feat: Add web component loading spinner and enhance initialization

Author: EranGrin

demo-app-vite/index.html

@@ -59,6 +59,9 @@ <h2>Custom Event</h2>
 
       <!-- named slot -->
       <div class="customName" hidden slot="customName">I am a custom named slot </div>
+      <div class="customName" data-web-component-loader slot="customName">
+        <div class="spinner"></div>
+      </div>
     </my-web-component>
 
     <script type="module" src="./src/main.ts"></script>
@@ -117,5 +120,20 @@ <h2>Custom Event</h2>
     color: white;
     font-weight: bold;
   }
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #4a90e2; /* Customize spinner color if needed */
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 1s linear infinite;
+    margin: auto;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
   </style>
 </html>

demo-app-vite/src/main.ts

@@ -32,6 +32,7 @@ createWebComponent({
   h,
   createApp,
   getCurrentInstance,
+  disableShadowDOM: false,
   asyncInitialization: asyncPromise
 })
 
@@ -40,6 +41,7 @@ createWebComponent({
   elementName: 'my-child-component',
   plugins: pluginsWrapper,
   cssFrameworkStyles: style,
+  disableShadowDOM: false,
   VueDefineCustomElement,
   h,
   createApp,

package/src/web-component-util.js

@@ -39,6 +39,7 @@ export const defineCustomElement = ({
   disableShadowDOM,
   replaceRootWithHostInCssFramework,
   asyncInitialization = () => Promise.resolve(),
+  loaderAttribute = 'data-web-component-loader'
 }) =>
   {
     const customElementDefiner = disableShadowDOM ? VueDefineCustomElementPatch : VueDefineCustomElement
@@ -90,6 +91,21 @@ export const defineCustomElement = ({
               insertStyles(comp.styles);
             }
           }
+
+          const host = this.$el.getRootNode()?.host || nearestElement(this.$el);
+          if (host) {
+            const hiddenEls = host.querySelectorAll(`[hidden]`);
+            const loaderEls = host.querySelectorAll(`[${loaderAttribute}]`);
+      
+            hiddenEls.forEach(el => {
+              el.removeAttribute('hidden');
+            });
+
+            loaderEls.forEach(el => {
+              el.remove();
+            });
+
+          }
         },
         unmounted() {
           if (!disableRemoveStylesOnUnmount) {
@@ -133,17 +149,6 @@ export const defineCustomElement = ({
       const namedSlots = rootComponent?.namedSlots?.reduce((acc, slotsName) => {
         acc[slotsName] = () => h('slot', {
           name: slotsName,
-          onSlotchange: (event) => {
-            const slotElement = event.target;
-            const nodes = typeof slotElement.assignedElements === 'function'
-              ? slotElement.assignedElements()
-              : (slotElement.assignedNodes ? slotElement.assignedNodes().filter(node => node.nodeType === 1) : []);
-            nodes.forEach(node => {
-              if (node.hasAttribute('hidden')) {
-                node.removeAttribute('hidden');
-              }
-            });
-          }
         });
         return acc;
       }, {});