@stencil/core 4.35.1 → 4.35.3-dev.1751519082.58bc2b5

package/internal/testing/index.js

@@ -592,17 +592,24 @@ var globalStyles = (
   ""
 );
 
+// src/utils/style.ts
+function createStyleSheetIfNeededAndSupported(styles2) {
+  if (!styles2 || !supportsConstructableStylesheets) return void 0;
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(styles2);
+  return sheet;
+}
+
 // src/utils/shadow-root.ts
+var globalStyleSheet;
 function createShadowRoot(cmpMeta) {
+  var _a;
   const shadowRoot = import_app_data.BUILD.shadowDelegatesFocus ? this.attachShadow({
     mode: "open",
     delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
   }) : this.attachShadow({ mode: "open" });
-  if (supportsConstructableStylesheets) {
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(globalStyles);
-    shadowRoot.adoptedStyleSheets.push(sheet);
-  }
+  if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported(globalStyles)) != null ? _a : null;
+  if (globalStyleSheet) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
 }
 
 // src/utils/util.ts
@@ -623,7 +630,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");
@@ -1257,8 +1264,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.unshift(stylesheet);
+              } 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.push(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;
@@ -1274,7 +1398,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.`);
@@ -1290,28 +1414,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,
@@ -1323,10 +1447,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;
@@ -1339,13 +1463,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;
@@ -1399,18 +1523,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;
     }
@@ -1420,13 +1544,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"];
@@ -1463,6 +1587,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;
@@ -1478,7 +1612,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);
@@ -1486,7 +1620,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;
@@ -1508,14 +1644,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);
         }
       }
@@ -1524,12 +1662,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) {
@@ -1540,14 +1678,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();
 };
@@ -1579,7 +1716,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;
         }
@@ -1597,7 +1734,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);
             }
           }
@@ -1694,9 +1831,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;
           }
@@ -1709,7 +1846,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();
     }
   }
@@ -1762,15 +1899,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();
@@ -1796,7 +1933,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;
@@ -2231,31 +2368,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;
@@ -2267,18 +2404,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, {
@@ -2296,123 +2433,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");
 
@@ -2431,12 +2451,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)));
@@ -2918,6 +2939,8 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
       !isInitialRender && import_app_data13.BUILD.updatable && oldChildren !== null
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
+    } else if (import_app_data13.BUILD.hydrateClientSide && isInitialRender && import_app_data13.BUILD.updatable && oldChildren !== null && newChildren === null) {
+      newVNode2.$children$ = oldChildren;
     }
     if (import_app_data13.BUILD.svg && isSvgMode && tag === "svg") {
       isSvgMode = false;
@@ -3385,10 +3408,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");
   }
@@ -3820,6 +3849,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) {