oke

.nvmrc

@@ -0,0 +1 @@
+v18.13.0

src/index.ts

@@ -1,9 +1,3 @@
-// export * from './common/utils';
-// export * from './common/strings';
-// export * from './common/dates';
-// export * from './common/html';
-// export * from './common/clipboard';
-
 export const defaultBody = `
 <div id="root">
   <style>
@@ -32,13 +26,46 @@ export const defaultBody = `
 </div>
 `;
 
+const styles = new CSSStyleSheet();
+styles.replaceSync(`
+.spinner:before {
+  content:"";
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 80px;
+  width: 80px;
+  margin-top: -40px;
+  margin-left: -40px;
+  border-radius: 50%;
+  border-top: 2px solid #009688;
+  border-right: 2px solid transparent;
+  animation: spinner 0.7s linear infinite;
+}
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+`);
+
 class ReactRoot extends HTMLElement {
+  private shadow: ShadowRoot = null!;
+
 	constructor() {		
 		super();
+    // const cssText = this.style.cssText;
+    this.style.cssText = 'display:contents';
+
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.adoptedStyleSheets = [styles];
+    //this.shadow.innerHTML = defaultBody;
 	}
 
 	connectedCallback() {	
-		this.outerHTML = defaultBody;
+		this.shadow.innerHTML = `
+  <span class="spinner"></span>`;
 	}
 }
 if(!window.customElements.get('px-root')){

tsup.config.ts

@@ -12,7 +12,7 @@ export const tsup: Options = {
   skipNodeModulesBundle: true,
   entryPoints: ['src/index.ts'],
   watch: env === 'development',
-  target: 'es2020',
+  target: 'esnext',
   outDir: 'lib',
   entry: ['src/**/*.ts'], //include all files under src
 };