@stencil/core 4.35.1-dev.1750455125.b359bb3 → 4.35.1-dev.1750741417.3f80413

package/internal/testing/index.js

@@ -623,7 +623,7 @@ var isJsFile = lowerPathParam((p) => p.endsWith(".js") || p.endsWith(".mjs") ||
 var import_app_data18 = require("@stencil/core/internal/app-data");
 
 // src/runtime/client-hydrate.ts
-var import_app_data6 = require("@stencil/core/internal/app-data");
+var import_app_data7 = require("@stencil/core/internal/app-data");
 
 // src/runtime/dom-extras.ts
 var import_app_data3 = require("@stencil/core/internal/app-data");
@@ -756,19 +756,8 @@ var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
 };
 var getSlotName = (node) => typeof node["s-sn"] === "string" ? node["s-sn"] : node.nodeType === 1 && node.getAttribute("slot") || void 0;
 function patchSlotNode(node) {
-  console.log("\u{1F527} patchSlotNode called for:", node);
-  if (node.assignedElements || node.assignedNodes || !node["s-sr"]) {
-    console.log("\u274C patchSlotNode: already patched or not a slot reference");
-    return;
-  }
-  console.log("\u2705 patchSlotNode: proceeding with patching");
+  if (node.assignedElements || node.assignedNodes || !node["s-sr"]) return;
   const assignedFactory = (elementsOnly) => (function(opts) {
-    var _a, _b;
-    console.log("\u{1F3ED} assignedFactory called:", {
-      elementsOnly,
-      slotName: this["s-sn"],
-      parentElement: (_b = (_a = this["s-cr"]) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.tagName
-    });
     const toReturn = [];
     const slotName = this["s-sn"];
     if (opts == null ? void 0 : opts.flatten) {
@@ -780,30 +769,11 @@ function patchSlotNode(node) {
     }
     const parent = this["s-cr"].parentElement;
     const slottedNodes = parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes);
-    console.log("\u{1F50D} Processing slotted nodes:", {
-      count: slottedNodes.length,
-      nodes: Array.from(slottedNodes).map((n) => ({ tagName: n.tagName, nodeType: n.nodeType }))
-    });
     slottedNodes.forEach((n) => {
-      console.log("\u{1F50D} Checking node:", {
-        tagName: n.tagName,
-        nodeType: n.nodeType,
-        slotName: getSlotName(n),
-        targetSlotName: slotName
-      });
       if (slotName === getSlotName(n)) {
-        console.log("\u2705 Node matches slot, adding to return array");
         toReturn.push(n);
-        patchSlottedShadowDomEvents(n, parent);
-      } else {
-        console.log("\u274C Node does not match slot");
       }
     });
-    console.log("\u{1F3ED} assignedFactory returning:", {
-      count: toReturn.length,
-      elementsOnly,
-      nodes: toReturn.map((n) => ({ tagName: n.tagName, nodeType: n.nodeType }))
-    });
     if (elementsOnly) {
       return toReturn.filter((n) => n.nodeType === 1 /* ElementNode */);
     }
@@ -812,70 +782,6 @@ function patchSlotNode(node) {
   node.assignedElements = assignedFactory(true);
   node.assignedNodes = assignedFactory(false);
 }
-function patchSlottedShadowDomEvents(slottedNode, parentHost) {
-  var _a, _b, _c;
-  console.log("\u{1F50D} patchSlottedShadowDomEvents called:", {
-    slottedNode: slottedNode.tagName,
-    parentHost: parentHost.tagName,
-    nodeType: slottedNode.nodeType,
-    isElement: slottedNode.nodeType === 1 /* ElementNode */
-  });
-  if (slottedNode.nodeType !== 1 /* ElementNode */) {
-    console.log("\u274C Not an element node, skipping");
-    return;
-  }
-  const element = slottedNode;
-  console.log("\u{1F50D} Element details:", {
-    tagName: element.tagName,
-    hasHyphen: (_a = element.tagName) == null ? void 0 : _a.includes("-"),
-    hasShadowRoot: !!element.shadowRoot,
-    parentHasShadowRoot: !!parentHost.shadowRoot
-  });
-  if (!((_b = element.tagName) == null ? void 0 : _b.includes("-")) || !element.shadowRoot || parentHost.shadowRoot) {
-    console.log("\u274C Conditions not met for patching:", {
-      hasHyphen: (_c = element.tagName) == null ? void 0 : _c.includes("-"),
-      hasShadowRoot: !!element.shadowRoot,
-      parentHasShadowRoot: !!parentHost.shadowRoot
-    });
-    return;
-  }
-  if (element.__stencilSlotEventPatched) {
-    console.log("\u26A0\uFE0F Already patched, skipping");
-    return;
-  }
-  console.log("\u2705 Patching element:", element.tagName);
-  element.__stencilSlotEventPatched = true;
-  const originalDispatchEvent = element.dispatchEvent;
-  element.dispatchEvent = function(event) {
-    var _a2;
-    console.log("\u{1F3AF} dispatchEvent called:", {
-      type: event.type,
-      target: (_a2 = event.target) == null ? void 0 : _a2.tagName,
-      bubbles: event.bubbles,
-      composed: event.composed
-    });
-    if ((event.type === "focus" || event.type === "blur") && event.bubbles) {
-      console.log("\u{1F6D1} Intercepting focus/blur event, creating non-bubbling version");
-      const nonBubblingEvent = new event.constructor(event.type, {
-        ...event,
-        bubbles: false,
-        composed: event.composed
-      });
-      Object.keys(event).forEach((key) => {
-        if (key !== "bubbles" && key !== "type") {
-          try {
-            nonBubblingEvent[key] = event[key];
-          } catch (e) {
-          }
-        }
-      });
-      console.log("\u{1F4E4} Dispatching non-bubbling event");
-      return originalDispatchEvent.call(this, nonBubblingEvent);
-    }
-    console.log("\u{1F4E4} Dispatching original event");
-    return originalDispatchEvent.call(this, event);
-  };
-}
 function dispatchSlotChangeEvent(elm) {
   elm.dispatchEvent(new CustomEvent("slotchange", { bubbles: false, cancelable: false, composed: false }));
 }
@@ -1220,67 +1126,17 @@ var patchPreviousElementSibling = (element) => {
   });
 };
 var patchParentNode = (node) => {
-  var _a;
   if (!node || node.__parentNode) return;
   patchHostOriginalAccessor("parentNode", node);
   Object.defineProperty(node, "parentNode", {
     get: function() {
-      var _a2;
-      return ((_a2 = this["s-ol"]) == null ? void 0 : _a2.parentNode) || this.__parentNode;
+      var _a;
+      return ((_a = this["s-ol"]) == null ? void 0 : _a.parentNode) || this.__parentNode;
     },
     set: function(value) {
       this.__parentNode = value;
     }
   });
-  if (node.nodeType === 1 /* ELEMENT_NODE */) {
-    const element = node;
-    if (((_a = element.tagName) == null ? void 0 : _a.includes("-")) && element.shadowRoot) {
-      if (import_app_data3.BUILD.isDev) {
-        console.log("\u{1F527} Patching focus method for slotted shadow DOM element:", element.tagName);
-      }
-      const originalFocus = element.focus.bind(element);
-      const originalDispatchEvent = element.dispatchEvent.bind(element);
-      const originalAddEventListener = element.addEventListener.bind(element);
-      let lastFocusTime = 0;
-      const blurSuppressionWindow = 200;
-      const blurListeners = [];
-      element.focus = function(options) {
-        lastFocusTime = Date.now();
-        originalFocus(options);
-      };
-      element.addEventListener = function(type, listener, options) {
-        if (type === "blur") {
-          const wrappedListener = function(event) {
-            const now = Date.now();
-            const timeSinceFocus = now - lastFocusTime;
-            if (timeSinceFocus < blurSuppressionWindow && lastFocusTime > 0) {
-              if (import_app_data3.BUILD.isDev) {
-                console.log("\u{1F6D1} Suppressing erroneous blur event - happened too soon after focus");
-              }
-              return;
-            }
-            listener.call(this, event);
-          };
-          blurListeners.push({ listener, options });
-          return originalAddEventListener.call(this, type, wrappedListener, options);
-        }
-        return originalAddEventListener.call(this, type, listener, options);
-      };
-      element.dispatchEvent = function(event) {
-        if (event.type === "blur") {
-          const now = Date.now();
-          const timeSinceFocus = now - lastFocusTime;
-          if (timeSinceFocus < blurSuppressionWindow && lastFocusTime > 0) {
-            if (import_app_data3.BUILD.isDev) {
-              console.log("\u{1F6D1} Preventing erroneous blur dispatchEvent - happened too soon after focus");
-            }
-            return true;
-          }
-        }
-        return originalDispatchEvent(event);
-      };
-    }
-  }
 };
 var validElementPatches = ["children", "nextElementSibling", "previousElementSibling"];
 var validNodesPatches = [
@@ -1401,8 +1257,125 @@ var installDevTools = () => {
   }
 };
 
-// src/runtime/vdom/h.ts
+// src/runtime/styles.ts
 var import_app_data5 = require("@stencil/core/internal/app-data");
+var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
+var registerStyle = (scopeId2, cssText, allowCS) => {
+  let style = styles.get(scopeId2);
+  if (supportsConstructableStylesheets && allowCS) {
+    style = style || new CSSStyleSheet();
+    if (typeof style === "string") {
+      style = cssText;
+    } else {
+      style.replaceSync(cssText);
+    }
+  } else {
+    style = cssText;
+  }
+  styles.set(scopeId2, style);
+};
+var addStyle = (styleContainerNode, cmpMeta, mode) => {
+  var _a;
+  const scopeId2 = getScopeId(cmpMeta, mode);
+  const style = styles.get(scopeId2);
+  if (!import_app_data5.BUILD.attachStyles || !win.document) {
+    return scopeId2;
+  }
+  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
+  if (style) {
+    if (typeof style === "string") {
+      styleContainerNode = styleContainerNode.head || styleContainerNode;
+      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+      let styleElm;
+      if (!appliedStyles) {
+        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
+      }
+      if (!appliedStyles.has(scopeId2)) {
+        if (import_app_data5.BUILD.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
+          styleElm.innerHTML = style;
+        } else {
+          styleElm = win.document.createElement("style");
+          styleElm.innerHTML = style;
+          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
+          if (nonce != null) {
+            styleElm.setAttribute("nonce", nonce);
+          }
+          if ((import_app_data5.BUILD.hydrateServerSide || import_app_data5.BUILD.hotModuleReplacement) && (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
+            styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
+          }
+          if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
+            if (styleContainerNode.nodeName === "HEAD") {
+              const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
+              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
+              styleContainerNode.insertBefore(
+                styleElm,
+                (referenceNode2 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
+              );
+            } else if ("host" in styleContainerNode) {
+              if (supportsConstructableStylesheets) {
+                const stylesheet = new CSSStyleSheet();
+                stylesheet.replaceSync(style);
+                styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
+              } else {
+                const existingStyleContainer = styleContainerNode.querySelector("style");
+                if (existingStyleContainer) {
+                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
+                } else {
+                  styleContainerNode.prepend(styleElm);
+                }
+              }
+            } else {
+              styleContainerNode.append(styleElm);
+            }
+          }
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            styleContainerNode.insertBefore(styleElm, null);
+          }
+        }
+        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
+          styleElm.innerHTML += SLOT_FB_CSS;
+        }
+        if (appliedStyles) {
+          appliedStyles.add(scopeId2);
+        }
+      }
+    } else if (import_app_data5.BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
+      styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+    }
+  }
+  return scopeId2;
+};
+var attachStyles = (hostRef) => {
+  const cmpMeta = hostRef.$cmpMeta$;
+  const elm = hostRef.$hostElement$;
+  const flags = cmpMeta.$flags$;
+  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
+  const scopeId2 = addStyle(
+    import_app_data5.BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+    cmpMeta,
+    hostRef.$modeName$
+  );
+  if ((import_app_data5.BUILD.shadowDom || import_app_data5.BUILD.scoped) && import_app_data5.BUILD.cssAnnotations && flags & 10 /* needsScopedEncapsulation */) {
+    elm["s-sc"] = scopeId2;
+    elm.classList.add(scopeId2 + "-h");
+  }
+  endAttachStyles();
+};
+var getScopeId = (cmp, mode) => "sc-" + (import_app_data5.BUILD.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
+var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
+var hydrateScopedToShadow = () => {
+  if (!win.document) {
+    return;
+  }
+  const styles2 = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
+  let i2 = 0;
+  for (; i2 < styles2.length; i2++) {
+    registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
+  }
+};
+
+// src/runtime/vdom/h.ts
+var import_app_data6 = require("@stencil/core/internal/app-data");
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -1418,7 +1391,7 @@ var h = (nodeName, vnodeData, ...children) => {
       } else if (child != null && typeof child !== "boolean") {
         if (simple = typeof nodeName !== "function" && !isComplexType(child)) {
           child = String(child);
-        } else if (import_app_data5.BUILD.isDev && typeof nodeName !== "function" && child.$flags$ === void 0) {
+        } else if (import_app_data6.BUILD.isDev && typeof nodeName !== "function" && child.$flags$ === void 0) {
           consoleDevError(`vNode passed as children has unexpected type.
 Make sure it's using the correct h() function.
 Empty objects can also be the cause, look for JSX comments that became objects.`);
@@ -1434,28 +1407,28 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
   };
   walk(children);
   if (vnodeData) {
-    if (import_app_data5.BUILD.isDev && nodeName === "input") {
+    if (import_app_data6.BUILD.isDev && nodeName === "input") {
       validateInputProperties(vnodeData);
     }
-    if (import_app_data5.BUILD.vdomKey && vnodeData.key) {
+    if (import_app_data6.BUILD.vdomKey && vnodeData.key) {
       key = vnodeData.key;
     }
-    if (import_app_data5.BUILD.slotRelocation && vnodeData.name) {
+    if (import_app_data6.BUILD.slotRelocation && vnodeData.name) {
       slotName = vnodeData.name;
     }
-    if (import_app_data5.BUILD.vdomClass) {
+    if (import_app_data6.BUILD.vdomClass) {
       const classData = vnodeData.className || vnodeData.class;
       if (classData) {
         vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" ");
       }
     }
   }
-  if (import_app_data5.BUILD.isDev && vNodeChildren.some(isHost)) {
+  if (import_app_data6.BUILD.isDev && vNodeChildren.some(isHost)) {
     consoleDevError(`The <Host> must be the single root component. Make sure:
 - You are NOT using hostData() and <Host> in the same component.
 - <Host> is used once, and it's the single root component of the render() function.`);
   }
-  if (import_app_data5.BUILD.vdomFunctional && typeof nodeName === "function") {
+  if (import_app_data6.BUILD.vdomFunctional && typeof nodeName === "function") {
     return nodeName(
       vnodeData === null ? {} : vnodeData,
       vNodeChildren,
@@ -1467,10 +1440,10 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
   if (vNodeChildren.length > 0) {
     vnode.$children$ = vNodeChildren;
   }
-  if (import_app_data5.BUILD.vdomKey) {
+  if (import_app_data6.BUILD.vdomKey) {
     vnode.$key$ = key;
   }
-  if (import_app_data5.BUILD.slotRelocation) {
+  if (import_app_data6.BUILD.slotRelocation) {
     vnode.$name$ = slotName;
   }
   return vnode;
@@ -1483,13 +1456,13 @@ var newVNode = (tag, text) => {
     $elm$: null,
     $children$: null
   };
-  if (import_app_data5.BUILD.vdomAttribute) {
+  if (import_app_data6.BUILD.vdomAttribute) {
     vnode.$attrs$ = null;
   }
-  if (import_app_data5.BUILD.vdomKey) {
+  if (import_app_data6.BUILD.vdomKey) {
     vnode.$key$ = null;
   }
-  if (import_app_data5.BUILD.slotRelocation) {
+  if (import_app_data6.BUILD.slotRelocation) {
     vnode.$name$ = null;
   }
   return vnode;
@@ -1543,18 +1516,18 @@ var validateInputProperties = (inputElm) => {
 
 // src/runtime/client-hydrate.ts
 var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-  var _a;
+  var _a, _b;
   const endHydrate = createTime("hydrateClient", tagName);
   const shadowRoot = hostElm.shadowRoot;
   const childRenderNodes = [];
   const slotNodes = [];
   const slottedNodes = [];
-  const shadowRootNodes = import_app_data6.BUILD.shadowDom && shadowRoot ? [] : null;
+  const shadowRootNodes = import_app_data7.BUILD.shadowDom && shadowRoot ? [] : null;
   const vnode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
   const members = Object.entries(((_a = hostRef.$cmpMeta$) == null ? void 0 : _a.$members$) || {});
   members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
-    var _a2, _b;
+    var _a2, _b2;
     if (!(memberFlags & 31 /* Prop */)) {
       return;
     }
@@ -1564,13 +1537,13 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       const attrPropVal = parsePropertyValue(
         attrVal,
         memberFlags,
-        import_app_data6.BUILD.formAssociated && !!(((_a2 = hostRef.$cmpMeta$) == null ? void 0 : _a2.$flags$) & 64 /* formAssociated */)
+        import_app_data7.BUILD.formAssociated && !!(((_a2 = hostRef.$cmpMeta$) == null ? void 0 : _a2.$flags$) & 64 /* formAssociated */)
       );
-      (_b = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b.set(memberName, attrPropVal);
+      (_b2 = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b2.set(memberName, attrPropVal);
     }
   });
   let scopeId2;
-  if (import_app_data6.BUILD.scoped) {
+  if (import_app_data7.BUILD.scoped) {
     const cmpMeta = hostRef.$cmpMeta$;
     if (cmpMeta && cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */ && hostElm["s-sc"]) {
       scopeId2 = hostElm["s-sc"];
@@ -1607,6 +1580,16 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       if (childRenderNode.$tag$ === "slot") {
         node["s-cr"] = hostElm["s-cr"];
       }
+    } else if (((_b = childRenderNode.$tag$) == null ? void 0 : _b.toString().includes("-")) && !childRenderNode.$elm$.shadowRoot) {
+      const cmpMeta = getHostRef(childRenderNode.$elm$);
+      const scopeId3 = getScopeId(
+        cmpMeta.$cmpMeta$,
+        import_app_data7.BUILD.mode ? childRenderNode.$elm$.getAttribute("s-mode") : void 0
+      );
+      const styleSheet = win.document.querySelector(`style[sty-id="${scopeId3}"]`);
+      if (styleSheet) {
+        hostElm.shadowRoot.append(styleSheet.cloneNode(true));
+      }
     }
     if (childRenderNode.$tag$ === "slot") {
       childRenderNode.$name$ = childRenderNode.$elm$["s-sn"] || childRenderNode.$elm$["name"] || null;
@@ -1622,7 +1605,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
     }
     if (orgLocationNode && orgLocationNode.isConnected) {
-      if (shadowRoot && orgLocationNode["s-en"] === "") {
+      if (orgLocationNode.parentElement.shadowRoot && orgLocationNode["s-en"] === "") {
         orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
       }
       orgLocationNode.parentNode.removeChild(orgLocationNode);
@@ -1630,7 +1613,9 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         node["s-oo"] = parseInt(childRenderNode.$nodeId$);
       }
     }
-    plt.$orgLocNodes$.delete(orgLocationId);
+    if (orgLocationNode && !orgLocationNode["s-id"]) {
+      plt.$orgLocNodes$.delete(orgLocationId);
+    }
   }
   const hosts = [];
   const snLen = slottedNodes.length;
@@ -1652,14 +1637,16 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       if (!hosts[slottedItem.hostId]) continue;
       const hostEle = hosts[slottedItem.hostId];
       if (!hostEle.shadowRoot || !shadowRoot) {
-        slottedItem.slot["s-cr"] = hostEle["s-cr"];
-        if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) {
-          slottedItem.slot["s-cr"] = hostEle;
-        } else {
-          slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
+        if (!slottedItem.slot["s-cr"]) {
+          slottedItem.slot["s-cr"] = hostEle["s-cr"];
+          if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) {
+            slottedItem.slot["s-cr"] = hostEle;
+          } else {
+            slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
+          }
         }
         addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
-        if (import_app_data6.BUILD.experimentalSlotFixes) {
+        if (import_app_data7.BUILD.experimentalSlotFixes) {
           patchSlottedNode(slottedItem.node);
         }
       }
@@ -1668,12 +1655,12 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
     }
   }
-  if (import_app_data6.BUILD.scoped && scopeId2 && slotNodes.length) {
+  if (import_app_data7.BUILD.scoped && scopeId2 && slotNodes.length) {
     slotNodes.forEach((slot) => {
       slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
     });
   }
-  if (import_app_data6.BUILD.shadowDom && shadowRoot && !shadowRoot.childNodes.length) {
+  if (import_app_data7.BUILD.shadowDom && shadowRoot) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
     if (rnLen) {
@@ -1684,14 +1671,13 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
           if (node.nodeType === 1 /* ElementNode */ && node.slot && node.hidden) {
             node.removeAttribute("hidden");
-          } else if (node.nodeType === 8 /* CommentNode */ || node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+          } else if (node.nodeType === 8 /* CommentNode */ && !node.nodeValue || node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
             node.parentNode.removeChild(node);
           }
         }
       });
     }
   }
-  plt.$orgLocNodes$.delete(hostElm["s-id"]);
   hostRef.$hostElement$ = hostElm;
   endHydrate();
 };
@@ -1723,7 +1709,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         if (!parentVNode.$children$) {
           parentVNode.$children$ = [];
         }
-        if (import_app_data6.BUILD.scoped && scopeId2) {
+        if (import_app_data7.BUILD.scoped && scopeId2 && childIdSplt[0] === hostId) {
           node["s-si"] = scopeId2;
           childVNode.$attrs$.class += " " + scopeId2;
         }
@@ -1741,7 +1727,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
               shadowRootNodes,
               slottedNodes
             );
-            if (import_app_data6.BUILD.scoped && scopeId2) {
+            if (import_app_data7.BUILD.scoped && scopeId2) {
               node.classList.add(scopeId2);
             }
           }
@@ -1838,9 +1824,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
             slottedNodes
           );
         } else if (childNodeType === CONTENT_REF_ID) {
-          if (import_app_data6.BUILD.shadowDom && shadowRootNodes) {
+          if (import_app_data7.BUILD.shadowDom && shadowRootNodes) {
             node.remove();
-          } else if (import_app_data6.BUILD.slotRelocation) {
+          } else if (import_app_data7.BUILD.slotRelocation) {
             hostElm["s-cr"] = node;
             node["s-cn"] = true;
           }
@@ -1853,7 +1839,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
     vnode.$index$ = "0";
     parentVNode.$children$ = [vnode];
   } else {
-    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim() && !node["s-nr"]) {
       node.remove();
     }
   }
@@ -1906,15 +1892,15 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
   childVNode.$name$ = slotName || null;
   childVNode.$tag$ = "slot";
   const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
-  if (import_app_data6.BUILD.shadowDom && shadowRootNodes && win.document) {
+  if (import_app_data7.BUILD.shadowDom && shadowRootNodes && win.document) {
     const slot = childVNode.$elm$ = win.document.createElement(childVNode.$tag$);
     if (childVNode.$name$) {
       childVNode.$elm$.setAttribute("name", slotName);
     }
-    if (parentNodeId && parentNodeId !== childVNode.$hostId$) {
-      parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
+    if (parentVNode.$elm$.shadowRoot && parentNodeId && parentNodeId !== childVNode.$hostId$) {
+      internalCall(parentVNode.$elm$, "insertBefore")(slot, internalCall(parentVNode.$elm$, "children")[0]);
     } else {
-      node.parentNode.insertBefore(slot, node);
+      internalCall(internalCall(node, "parentNode"), "insertBefore")(slot, node);
     }
     addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
     node.remove();
@@ -1940,7 +1926,7 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
 var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) => {
   let slottedNode = slotNode.nextSibling;
   slottedNodes[slotNodeId] = slottedNodes[slotNodeId] || [];
-  while (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (slottedNode.nodeType === 8 /* CommentNode */ && slottedNode.nodeValue.indexOf(".") !== 1 || slottedNode.nodeType === 3 /* TextNode */))) {
+  while (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (slottedNode.nodeType === 8 /* CommentNode */ || slottedNode.nodeType === 3 /* TextNode */ || slottedNode.tagName === "SLOT"))) {
     slottedNode["s-sn"] = slotName;
     slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
     slottedNode = slottedNode.nextSibling;
@@ -2375,31 +2361,31 @@ var import_app_data16 = require("@stencil/core/internal/app-data");
 var import_app_data15 = require("@stencil/core/internal/app-data");
 
 // src/runtime/parse-property-value.ts
-var import_app_data7 = require("@stencil/core/internal/app-data");
+var import_app_data8 = require("@stencil/core/internal/app-data");
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
-  if ((import_app_data7.BUILD.hydrateClientSide || import_app_data7.BUILD.hydrateServerSide) && typeof propValue === "string" && (propValue.startsWith("{") && propValue.endsWith("}") || propValue.startsWith("[") && propValue.endsWith("]"))) {
+  if ((import_app_data8.BUILD.hydrateClientSide || import_app_data8.BUILD.hydrateServerSide) && typeof propValue === "string" && (propValue.startsWith("{") && propValue.endsWith("}") || propValue.startsWith("[") && propValue.endsWith("]"))) {
     try {
       propValue = JSON.parse(propValue);
       return propValue;
     } catch (e) {
     }
   }
-  if ((import_app_data7.BUILD.hydrateClientSide || import_app_data7.BUILD.hydrateServerSide) && typeof propValue === "string" && propValue.startsWith(SERIALIZED_PREFIX)) {
+  if ((import_app_data8.BUILD.hydrateClientSide || import_app_data8.BUILD.hydrateServerSide) && typeof propValue === "string" && propValue.startsWith(SERIALIZED_PREFIX)) {
     propValue = deserializeProperty(propValue);
     return propValue;
   }
   if (propValue != null && !isComplexType(propValue)) {
-    if (import_app_data7.BUILD.propBoolean && propType & 4 /* Boolean */) {
-      if (import_app_data7.BUILD.formAssociated && isFormAssociated && typeof propValue === "string") {
+    if (import_app_data8.BUILD.propBoolean && propType & 4 /* Boolean */) {
+      if (import_app_data8.BUILD.formAssociated && isFormAssociated && typeof propValue === "string") {
         return propValue === "" || !!propValue;
       } else {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
-    if (import_app_data7.BUILD.propNumber && propType & 2 /* Number */) {
+    if (import_app_data8.BUILD.propNumber && propType & 2 /* Number */) {
       return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
     }
-    if (import_app_data7.BUILD.propString && propType & 1 /* String */) {
+    if (import_app_data8.BUILD.propString && propType & 1 /* String */) {
       return String(propValue);
     }
     return propValue;
@@ -2411,18 +2397,18 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
 var import_app_data14 = require("@stencil/core/internal/app-data");
 
 // src/runtime/event-emitter.ts
-var import_app_data9 = require("@stencil/core/internal/app-data");
+var import_app_data10 = require("@stencil/core/internal/app-data");
 
 // src/runtime/element.ts
-var import_app_data8 = require("@stencil/core/internal/app-data");
-var getElement = (ref) => import_app_data8.BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
+var import_app_data9 = require("@stencil/core/internal/app-data");
+var getElement = (ref) => import_app_data9.BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
 
 // src/runtime/event-emitter.ts
 var createEvent = (ref, name, flags) => {
   const elm = getElement(ref);
   return {
     emit: (detail) => {
-      if (import_app_data9.BUILD.isDev && !elm.isConnected) {
+      if (import_app_data10.BUILD.isDev && !elm.isConnected) {
         consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
       }
       return emitEvent(elm, name, {
@@ -2440,123 +2426,6 @@ var emitEvent = (elm, name, opts) => {
   return ev;
 };
 
-// src/runtime/styles.ts
-var import_app_data10 = require("@stencil/core/internal/app-data");
-var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
-var registerStyle = (scopeId2, cssText, allowCS) => {
-  let style = styles.get(scopeId2);
-  if (supportsConstructableStylesheets && allowCS) {
-    style = style || new CSSStyleSheet();
-    if (typeof style === "string") {
-      style = cssText;
-    } else {
-      style.replaceSync(cssText);
-    }
-  } else {
-    style = cssText;
-  }
-  styles.set(scopeId2, style);
-};
-var addStyle = (styleContainerNode, cmpMeta, mode) => {
-  var _a;
-  const scopeId2 = getScopeId(cmpMeta, mode);
-  const style = styles.get(scopeId2);
-  if (!import_app_data10.BUILD.attachStyles || !win.document) {
-    return scopeId2;
-  }
-  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
-  if (style) {
-    if (typeof style === "string") {
-      styleContainerNode = styleContainerNode.head || styleContainerNode;
-      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-      let styleElm;
-      if (!appliedStyles) {
-        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
-      }
-      if (!appliedStyles.has(scopeId2)) {
-        if (import_app_data10.BUILD.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
-          styleElm.innerHTML = style;
-        } else {
-          styleElm = win.document.createElement("style");
-          styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
-          if (nonce != null) {
-            styleElm.setAttribute("nonce", nonce);
-          }
-          if ((import_app_data10.BUILD.hydrateServerSide || import_app_data10.BUILD.hotModuleReplacement) && (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
-            styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
-          }
-          if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
-            if (styleContainerNode.nodeName === "HEAD") {
-              const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
-              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
-              styleContainerNode.insertBefore(
-                styleElm,
-                (referenceNode2 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
-              );
-            } else if ("host" in styleContainerNode) {
-              if (supportsConstructableStylesheets) {
-                const stylesheet = new CSSStyleSheet();
-                stylesheet.replaceSync(style);
-                styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
-              } else {
-                const existingStyleContainer = styleContainerNode.querySelector("style");
-                if (existingStyleContainer) {
-                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
-                } else {
-                  styleContainerNode.prepend(styleElm);
-                }
-              }
-            } else {
-              styleContainerNode.append(styleElm);
-            }
-          }
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            styleContainerNode.insertBefore(styleElm, null);
-          }
-        }
-        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
-          styleElm.innerHTML += SLOT_FB_CSS;
-        }
-        if (appliedStyles) {
-          appliedStyles.add(scopeId2);
-        }
-      }
-    } else if (import_app_data10.BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
-      styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
-    }
-  }
-  return scopeId2;
-};
-var attachStyles = (hostRef) => {
-  const cmpMeta = hostRef.$cmpMeta$;
-  const elm = hostRef.$hostElement$;
-  const flags = cmpMeta.$flags$;
-  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-  const scopeId2 = addStyle(
-    import_app_data10.BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
-    cmpMeta,
-    hostRef.$modeName$
-  );
-  if ((import_app_data10.BUILD.shadowDom || import_app_data10.BUILD.scoped) && import_app_data10.BUILD.cssAnnotations && flags & 10 /* needsScopedEncapsulation */) {
-    elm["s-sc"] = scopeId2;
-    elm.classList.add(scopeId2 + "-h");
-  }
-  endAttachStyles();
-};
-var getScopeId = (cmp, mode) => "sc-" + (import_app_data10.BUILD.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
-var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
-var hydrateScopedToShadow = () => {
-  if (!win.document) {
-    return;
-  }
-  const styles2 = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
-  let i2 = 0;
-  for (; i2 < styles2.length; i2++) {
-    registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
-  }
-};
-
 // src/runtime/vdom/vdom-render.ts
 var import_app_data13 = require("@stencil/core/internal/app-data");
 
@@ -2575,12 +2444,13 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     const classList = elm.classList;
     const oldClasses = parseClassList(oldValue);
     let newClasses = parseClassList(newValue);
-    if (import_app_data11.BUILD.hydrateClientSide && elm["s-si"] && initialRender) {
-      newClasses.push(elm["s-si"]);
+    if (import_app_data11.BUILD.hydrateClientSide && (elm["s-si"] || elm["s-sc"]) && initialRender) {
+      const scopeId2 = elm["s-sc"] || elm["s-si"];
+      newClasses.push(scopeId2);
       oldClasses.forEach((c) => {
-        if (c.startsWith(elm["s-si"])) newClasses.push(c);
+        if (c.startsWith(scopeId2)) newClasses.push(c);
       });
-      newClasses = [...new Set(newClasses)];
+      newClasses = [...new Set(newClasses)].filter((c) => c);
       classList.add(...newClasses);
     } else {
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
@@ -3529,10 +3399,16 @@ var forceUpdate = (ref) => {
   return false;
 };
 var appDidLoad = (who) => {
+  var _a;
   if (import_app_data14.BUILD.asyncQueue) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: import_app_data14.NAMESPACE } }));
+  if (import_app_data14.BUILD.hydrateClientSide) {
+    if ((_a = plt.$orgLocNodes$) == null ? void 0 : _a.size) {
+      plt.$orgLocNodes$.clear();
+    }
+  }
   if (import_app_data14.BUILD.profile && performance.measure) {
     performance.measure(`[Stencil] ${import_app_data14.NAMESPACE} initial load (by ${who})`, "st:app:start");
   }
@@ -3964,6 +3840,11 @@ var connectedCallback = (elm) => {
         if (import_app_data18.BUILD.hydrateServerSide || (import_app_data18.BUILD.slot || import_app_data18.BUILD.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
           setContentReference(elm);
+        } else if (import_app_data18.BUILD.hydrateClientSide && !(cmpMeta.$flags$ & 4 /* hasSlotRelocation */)) {
+          const commendPlaceholder = elm.firstChild;
+          if ((commendPlaceholder == null ? void 0 : commendPlaceholder.nodeType) === 8 /* CommentNode */ && !commendPlaceholder["s-cn"] && !commendPlaceholder.nodeValue) {
+            elm.removeChild(commendPlaceholder);
+          }
         }
       }
       if (import_app_data18.BUILD.asyncLoading) {