@stencil/core 4.22.3 → 4.23.0

package/internal/hydrate/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Platform v4.22.3 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.23.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -88,102 +88,20 @@ var unwrapErr = (result) => {
 };
 
 // src/runtime/connected-callback.ts
-import { BUILD as BUILD15 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD16 } from "@stencil/core/internal/app-data";
 
 // src/runtime/client-hydrate.ts
-import { BUILD as BUILD3 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD7 } from "@stencil/core/internal/app-data";
 
-// src/runtime/profile.ts
-import { BUILD } from "@stencil/core/internal/app-data";
-var i = 0;
-var createTime = (fnName, tagName = "") => {
-  if (BUILD.profile && performance.mark) {
-    const key = `st:${fnName}:${tagName}:${i++}`;
-    performance.mark(key);
-    return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);
-  } else {
-    return () => {
-      return;
-    };
-  }
-};
-var uniqueTime = (key, measureText) => {
-  if (BUILD.profile && performance.mark) {
-    if (performance.getEntriesByName(key, "mark").length === 0) {
-      performance.mark(key);
-    }
-    return () => {
-      if (performance.getEntriesByName(measureText, "measure").length === 0) {
-        performance.measure(measureText, key);
-      }
-    };
-  } else {
-    return () => {
-      return;
-    };
-  }
-};
-var inspect = (ref) => {
-  const hostRef = getHostRef(ref);
-  if (!hostRef) {
-    return void 0;
-  }
-  const flags = hostRef.$flags$;
-  const hostElement = hostRef.$hostElement$;
-  return {
-    renderCount: hostRef.$renderCount$,
-    flags: {
-      hasRendered: !!(flags & 2 /* hasRendered */),
-      hasConnected: !!(flags & 1 /* hasConnected */),
-      isWaitingForChildren: !!(flags & 4 /* isWaitingForChildren */),
-      isConstructingInstance: !!(flags & 8 /* isConstructingInstance */),
-      isQueuedForUpdate: !!(flags & 16 /* isQueuedForUpdate */),
-      hasInitializedComponent: !!(flags & 32 /* hasInitializedComponent */),
-      hasLoadedComponent: !!(flags & 64 /* hasLoadedComponent */),
-      isWatchReady: !!(flags & 128 /* isWatchReady */),
-      isListenReady: !!(flags & 256 /* isListenReady */),
-      needsRerender: !!(flags & 512 /* needsRerender */)
-    },
-    instanceValues: hostRef.$instanceValues$,
-    ancestorComponent: hostRef.$ancestorComponent$,
-    hostElement,
-    lazyInstance: hostRef.$lazyInstance$,
-    vnode: hostRef.$vnode$,
-    modeName: hostRef.$modeName$,
-    onReadyPromise: hostRef.$onReadyPromise$,
-    onReadyResolve: hostRef.$onReadyResolve$,
-    onInstancePromise: hostRef.$onInstancePromise$,
-    onInstanceResolve: hostRef.$onInstanceResolve$,
-    onRenderResolve: hostRef.$onRenderResolve$,
-    queuedListeners: hostRef.$queuedListeners$,
-    rmListeners: hostRef.$rmListeners$,
-    ["s-id"]: hostElement["s-id"],
-    ["s-cr"]: hostElement["s-cr"],
-    ["s-lr"]: hostElement["s-lr"],
-    ["s-p"]: hostElement["s-p"],
-    ["s-rc"]: hostElement["s-rc"],
-    ["s-sc"]: hostElement["s-sc"]
-  };
-};
-var installDevTools = () => {
-  if (BUILD.devTools) {
-    const stencil = win.stencil = win.stencil || {};
-    const originalInspect = stencil.inspect;
-    stencil.inspect = (ref) => {
-      let result = inspect(ref);
-      if (!result && typeof originalInspect === "function") {
-        result = originalInspect(ref);
-      }
-      return result;
-    };
-  }
-};
+// src/runtime/dom-extras.ts
+import { BUILD as BUILD5 } from "@stencil/core/internal/app-data";
 
 // src/runtime/runtime-constants.ts
 var CONTENT_REF_ID = "r";
 var ORG_LOCATION_ID = "o";
 var SLOT_NODE_ID = "s";
 var TEXT_NODE_ID = "t";
+var COMMENT_NODE_ID = "c";
 var HYDRATE_ID = "s-id";
 var HYDRATED_STYLE_ID = "sty-id";
 var HYDRATE_CHILD_ID = "c-id";
@@ -203,8 +121,11 @@ var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
   "formStateRestoreCallback"
 ];
 
+// src/runtime/vdom/vdom-render.ts
+import { BUILD as BUILD4 } from "@stencil/core/internal/app-data";
+
 // src/runtime/vdom/h.ts
-import { BUILD as BUILD2 } from "@stencil/core/internal/app-data";
+import { BUILD } from "@stencil/core/internal/app-data";
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -220,7 +141,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 (BUILD2.isDev && typeof nodeName !== "function" && child.$flags$ === void 0) {
+        } else if (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.`);
@@ -236,28 +157,28 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
   };
   walk(children);
   if (vnodeData) {
-    if (BUILD2.isDev && nodeName === "input") {
+    if (BUILD.isDev && nodeName === "input") {
       validateInputProperties(vnodeData);
     }
-    if (BUILD2.vdomKey && vnodeData.key) {
+    if (BUILD.vdomKey && vnodeData.key) {
       key = vnodeData.key;
     }
-    if (BUILD2.slotRelocation && vnodeData.name) {
+    if (BUILD.slotRelocation && vnodeData.name) {
       slotName = vnodeData.name;
     }
-    if (BUILD2.vdomClass) {
+    if (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 (BUILD2.isDev && vNodeChildren.some(isHost)) {
+  if (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 (BUILD2.vdomFunctional && typeof nodeName === "function") {
+  if (BUILD.vdomFunctional && typeof nodeName === "function") {
     return nodeName(
       vnodeData === null ? {} : vnodeData,
       vNodeChildren,
@@ -269,10 +190,10 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
   if (vNodeChildren.length > 0) {
     vnode.$children$ = vNodeChildren;
   }
-  if (BUILD2.vdomKey) {
+  if (BUILD.vdomKey) {
     vnode.$key$ = key;
   }
-  if (BUILD2.slotRelocation) {
+  if (BUILD.slotRelocation) {
     vnode.$name$ = slotName;
   }
   return vnode;
@@ -285,13 +206,13 @@ var newVNode = (tag, text) => {
     $elm$: null,
     $children$: null
   };
-  if (BUILD2.vdomAttribute) {
+  if (BUILD.vdomAttribute) {
     vnode.$attrs$ = null;
   }
-  if (BUILD2.vdomKey) {
+  if (BUILD.vdomKey) {
     vnode.$key$ = null;
   }
-  if (BUILD2.slotRelocation) {
+  if (BUILD.slotRelocation) {
     vnode.$name$ = null;
   }
   return vnode;
@@ -343,416 +264,51 @@ var validateInputProperties = (inputElm) => {
   }
 };
 
-// src/runtime/client-hydrate.ts
-var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-  const endHydrate = createTime("hydrateClient", tagName);
-  const shadowRoot = hostElm.shadowRoot;
-  const childRenderNodes = [];
-  const slotNodes = [];
-  const shadowRootNodes = BUILD3.shadowDom && shadowRoot ? [] : null;
-  const vnode = hostRef.$vnode$ = newVNode(tagName, null);
-  if (!plt.$orgLocNodes$) {
-    initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
-  }
-  hostElm[HYDRATE_ID] = hostId;
-  hostElm.removeAttribute(HYDRATE_ID);
-  clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
-  childRenderNodes.map((c) => {
-    const orgLocationId = c.$hostId$ + "." + c.$nodeId$;
-    const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
-    const node = c.$elm$;
-    if (orgLocationNode && supportsShadow && orgLocationNode["s-en"] === "") {
-      orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
-    }
-    if (!shadowRoot) {
-      node["s-hn"] = tagName;
-      if (orgLocationNode) {
-        node["s-ol"] = orgLocationNode;
-        node["s-ol"]["s-nr"] = node;
-      }
-    }
-    plt.$orgLocNodes$.delete(orgLocationId);
-  });
-  if (BUILD3.shadowDom && shadowRoot) {
-    shadowRootNodes.map((shadowRootNode) => {
-      if (shadowRootNode) {
-        shadowRoot.appendChild(shadowRootNode);
-      }
-    });
-  }
-  endHydrate();
-};
-var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
-  let childNodeType;
-  let childIdSplt;
-  let childVNode;
-  let i2;
-  if (node.nodeType === 1 /* ElementNode */) {
-    childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
-    if (childNodeType) {
-      childIdSplt = childNodeType.split(".");
-      if (childIdSplt[0] === hostId || childIdSplt[0] === "0") {
-        childVNode = {
-          $flags$: 0,
-          $hostId$: childIdSplt[0],
-          $nodeId$: childIdSplt[1],
-          $depth$: childIdSplt[2],
-          $index$: childIdSplt[3],
-          $tag$: node.tagName.toLowerCase(),
-          $elm$: node,
-          $attrs$: null,
-          $children$: null,
-          $key$: null,
-          $name$: null,
-          $text$: null
-        };
-        childRenderNodes.push(childVNode);
-        node.removeAttribute(HYDRATE_CHILD_ID);
-        if (!parentVNode.$children$) {
-          parentVNode.$children$ = [];
-        }
-        parentVNode.$children$[childVNode.$index$] = childVNode;
-        parentVNode = childVNode;
-        if (shadowRootNodes && childVNode.$depth$ === "0") {
-          shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-        }
-      }
-    }
-    if (node.shadowRoot) {
-      for (i2 = node.shadowRoot.childNodes.length - 1; i2 >= 0; i2--) {
-        clientHydrate(
-          parentVNode,
-          childRenderNodes,
-          slotNodes,
-          shadowRootNodes,
-          hostElm,
-          node.shadowRoot.childNodes[i2],
-          hostId
-        );
+// src/runtime/vdom/update-element.ts
+import { BUILD as BUILD3 } from "@stencil/core/internal/app-data";
+
+// src/runtime/vdom/set-accessor.ts
+import { BUILD as BUILD2 } from "@stencil/core/internal/app-data";
+var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
+  if (oldValue !== newValue) {
+    let isProp = isMemberInElement(elm, memberName);
+    let ln = memberName.toLowerCase();
+    if (BUILD2.vdomClass && memberName === "class") {
+      const classList = elm.classList;
+      const oldClasses = parseClassList(oldValue);
+      const newClasses = parseClassList(newValue);
+      if (elm["s-si"] && newClasses.indexOf(elm["s-si"]) < 0) {
+        newClasses.push(elm["s-si"]);
       }
-    }
-    for (i2 = node.childNodes.length - 1; i2 >= 0; i2--) {
-      clientHydrate(
-        parentVNode,
-        childRenderNodes,
-        slotNodes,
-        shadowRootNodes,
-        hostElm,
-        node.childNodes[i2],
-        hostId
-      );
-    }
-  } else if (node.nodeType === 8 /* CommentNode */) {
-    childIdSplt = node.nodeValue.split(".");
-    if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
-      childNodeType = childIdSplt[0];
-      childVNode = {
-        $flags$: 0,
-        $hostId$: childIdSplt[1],
-        $nodeId$: childIdSplt[2],
-        $depth$: childIdSplt[3],
-        $index$: childIdSplt[4],
-        $elm$: node,
-        $attrs$: null,
-        $children$: null,
-        $key$: null,
-        $name$: null,
-        $tag$: null,
-        $text$: null
-      };
-      if (childNodeType === TEXT_NODE_ID) {
-        childVNode.$elm$ = node.nextSibling;
-        if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
-          childVNode.$text$ = childVNode.$elm$.textContent;
-          childRenderNodes.push(childVNode);
-          node.remove();
-          if (!parentVNode.$children$) {
-            parentVNode.$children$ = [];
-          }
-          parentVNode.$children$[childVNode.$index$] = childVNode;
-          if (shadowRootNodes && childVNode.$depth$ === "0") {
-            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+      classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+      classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+    } else if (BUILD2.vdomStyle && memberName === "style") {
+      if (BUILD2.updatable) {
+        for (const prop in oldValue) {
+          if (!newValue || newValue[prop] == null) {
+            if (!BUILD2.hydrateServerSide && prop.includes("-")) {
+              elm.style.removeProperty(prop);
+            } else {
+              elm.style[prop] = "";
+            }
           }
         }
-      } else if (childVNode.$hostId$ === hostId) {
-        if (childNodeType === SLOT_NODE_ID) {
-          childVNode.$tag$ = "slot";
-          if (childIdSplt[5]) {
-            node["s-sn"] = childVNode.$name$ = childIdSplt[5];
+      }
+      for (const prop in newValue) {
+        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+          if (!BUILD2.hydrateServerSide && prop.includes("-")) {
+            elm.style.setProperty(prop, newValue[prop]);
           } else {
-            node["s-sn"] = "";
-          }
-          node["s-sr"] = true;
-          if (BUILD3.shadowDom && shadowRootNodes) {
-            childVNode.$elm$ = doc.createElement(childVNode.$tag$);
-            if (childVNode.$name$) {
-              childVNode.$elm$.setAttribute("name", childVNode.$name$);
-            }
-            node.parentNode.insertBefore(childVNode.$elm$, node);
-            node.remove();
-            if (childVNode.$depth$ === "0") {
-              shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-            }
-          }
-          slotNodes.push(childVNode);
-          if (!parentVNode.$children$) {
-            parentVNode.$children$ = [];
-          }
-          parentVNode.$children$[childVNode.$index$] = childVNode;
-        } else if (childNodeType === CONTENT_REF_ID) {
-          if (BUILD3.shadowDom && shadowRootNodes) {
-            node.remove();
-          } else if (BUILD3.slotRelocation) {
-            hostElm["s-cr"] = node;
-            node["s-cn"] = true;
+            elm.style[prop] = newValue[prop];
           }
         }
       }
-    }
-  } else if (parentVNode && parentVNode.$tag$ === "style") {
-    const vnode = newVNode(null, node.textContent);
-    vnode.$elm$ = node;
-    vnode.$index$ = "0";
-    parentVNode.$children$ = [vnode];
-  }
-};
-var initializeDocumentHydrate = (node, orgLocNodes) => {
-  if (node.nodeType === 1 /* ElementNode */) {
-    let i2 = 0;
-    if (node.shadowRoot) {
-      for (; i2 < node.shadowRoot.childNodes.length; i2++) {
-        initializeDocumentHydrate(node.shadowRoot.childNodes[i2], orgLocNodes);
+    } else if (BUILD2.vdomKey && memberName === "key") {
+    } else if (BUILD2.vdomRef && memberName === "ref") {
+      if (newValue) {
+        newValue(elm);
       }
-    }
-    for (i2 = 0; i2 < node.childNodes.length; i2++) {
-      initializeDocumentHydrate(node.childNodes[i2], orgLocNodes);
-    }
-  } else if (node.nodeType === 8 /* CommentNode */) {
-    const childIdSplt = node.nodeValue.split(".");
-    if (childIdSplt[0] === ORG_LOCATION_ID) {
-      orgLocNodes.set(childIdSplt[1] + "." + childIdSplt[2], node);
-      node.nodeValue = "";
-      node["s-en"] = childIdSplt[3];
-    }
-  }
-};
-
-// src/runtime/initialize-component.ts
-import { BUILD as BUILD14 } from "@stencil/core/internal/app-data";
-
-// src/runtime/mode.ts
-var computeMode = (elm) => modeResolutionChain.map((h2) => h2(elm)).find((m) => !!m);
-var setMode = (handler) => modeResolutionChain.push(handler);
-var getMode = (ref) => getHostRef(ref).$modeName$;
-
-// src/runtime/proxy-component.ts
-import { BUILD as BUILD13 } from "@stencil/core/internal/app-data";
-
-// src/runtime/set-value.ts
-import { BUILD as BUILD12 } from "@stencil/core/internal/app-data";
-
-// src/runtime/parse-property-value.ts
-import { BUILD as BUILD4 } from "@stencil/core/internal/app-data";
-var parsePropertyValue = (propValue, propType) => {
-  if (propValue != null && !isComplexType(propValue)) {
-    if (BUILD4.propBoolean && propType & 4 /* Boolean */) {
-      return propValue === "false" ? false : propValue === "" || !!propValue;
-    }
-    if (BUILD4.propNumber && propType & 2 /* Number */) {
-      return parseFloat(propValue);
-    }
-    if (BUILD4.propString && propType & 1 /* String */) {
-      return String(propValue);
-    }
-    return propValue;
-  }
-  return propValue;
-};
-
-// src/runtime/update-component.ts
-import { BUILD as BUILD11, NAMESPACE } from "@stencil/core/internal/app-data";
-
-// src/runtime/event-emitter.ts
-import { BUILD as BUILD6 } from "@stencil/core/internal/app-data";
-
-// src/runtime/element.ts
-import { BUILD as BUILD5 } from "@stencil/core/internal/app-data";
-var getElement = (ref) => BUILD5.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
-
-// src/runtime/event-emitter.ts
-var createEvent = (ref, name, flags) => {
-  const elm = getElement(ref);
-  return {
-    emit: (detail) => {
-      if (BUILD6.isDev && !elm.isConnected) {
-        consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
-      }
-      return emitEvent(elm, name, {
-        bubbles: !!(flags & 4 /* Bubbles */),
-        composed: !!(flags & 2 /* Composed */),
-        cancelable: !!(flags & 1 /* Cancellable */),
-        detail
-      });
-    }
-  };
-};
-var emitEvent = (elm, name, opts) => {
-  const ev = plt.ce(name, opts);
-  elm.dispatchEvent(ev);
-  return ev;
-};
-
-// src/runtime/styles.ts
-import { BUILD as BUILD7 } from "@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 (!BUILD7.attachStyles) {
-    return scopeId2;
-  }
-  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
-  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 (BUILD7.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
-          styleElm.innerHTML = style;
-        } else {
-          styleElm = doc.createElement("style");
-          styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(doc);
-          if (nonce != null) {
-            styleElm.setAttribute("nonce", nonce);
-          }
-          if ((BUILD7.hydrateServerSide || BUILD7.hotModuleReplacement) && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
-            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);
-            } 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.nodeName !== "HEAD") {
-            styleContainerNode.insertBefore(styleElm, null);
-          }
-        }
-        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
-          styleElm.innerHTML += SLOT_FB_CSS;
-        }
-        if (appliedStyles) {
-          appliedStyles.add(scopeId2);
-        }
-      }
-    } else if (BUILD7.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(
-    BUILD7.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
-    cmpMeta,
-    hostRef.$modeName$
-  );
-  if ((BUILD7.shadowDom || BUILD7.scoped) && BUILD7.cssAnnotations && flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
-    elm["s-sc"] = scopeId2;
-    elm.classList.add(scopeId2 + "-h");
-    if (BUILD7.scoped && flags & 2 /* scopedCssEncapsulation */) {
-      elm.classList.add(scopeId2 + "-s");
-    }
-  }
-  endAttachStyles();
-};
-var getScopeId = (cmp, mode) => "sc-" + (BUILD7.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
-
-// src/runtime/vdom/vdom-render.ts
-import { BUILD as BUILD10 } from "@stencil/core/internal/app-data";
-
-// src/runtime/vdom/update-element.ts
-import { BUILD as BUILD9 } from "@stencil/core/internal/app-data";
-
-// src/runtime/vdom/set-accessor.ts
-import { BUILD as BUILD8 } from "@stencil/core/internal/app-data";
-var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
-  if (oldValue !== newValue) {
-    let isProp = isMemberInElement(elm, memberName);
-    let ln = memberName.toLowerCase();
-    if (BUILD8.vdomClass && memberName === "class") {
-      const classList = elm.classList;
-      const oldClasses = parseClassList(oldValue);
-      const newClasses = parseClassList(newValue);
-      classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
-      classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
-    } else if (BUILD8.vdomStyle && memberName === "style") {
-      if (BUILD8.updatable) {
-        for (const prop in oldValue) {
-          if (!newValue || newValue[prop] == null) {
-            if (!BUILD8.hydrateServerSide && prop.includes("-")) {
-              elm.style.removeProperty(prop);
-            } else {
-              elm.style[prop] = "";
-            }
-          }
-        }
-      }
-      for (const prop in newValue) {
-        if (!oldValue || newValue[prop] !== oldValue[prop]) {
-          if (!BUILD8.hydrateServerSide && prop.includes("-")) {
-            elm.style.setProperty(prop, newValue[prop]);
-          } else {
-            elm.style[prop] = newValue[prop];
-          }
-        }
-      }
-    } else if (BUILD8.vdomKey && memberName === "key") {
-    } else if (BUILD8.vdomRef && memberName === "ref") {
-      if (newValue) {
-        newValue(elm);
-      }
-    } else if (BUILD8.vdomListener && (BUILD8.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
+    } else if (BUILD2.vdomListener && (BUILD2.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
       if (memberName[2] === "-") {
         memberName = memberName.slice(3);
       } else if (isMemberInElement(win, ln)) {
@@ -770,7 +326,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
           plt.ael(elm, memberName, newValue, capture);
         }
       }
-    } else if (BUILD8.vdomPropOrAttr) {
+    } else if (BUILD2.vdomPropOrAttr) {
       const isComplex = isComplexType(newValue);
       if ((isProp || isComplex && newValue !== null) && !isSvg) {
         try {
@@ -792,7 +348,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
         }
       }
       let xlink = false;
-      if (BUILD8.vdomXlink) {
+      if (BUILD2.vdomXlink) {
         if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
           memberName = ln;
           xlink = true;
@@ -800,7 +356,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       }
       if (newValue == null || newValue === false) {
         if (newValue !== false || elm.getAttribute(memberName) === "") {
-          if (BUILD8.vdomXlink && xlink) {
+          if (BUILD2.vdomXlink && xlink) {
             elm.removeAttributeNS(XLINK_NS, memberName);
           } else {
             elm.removeAttribute(memberName);
@@ -808,7 +364,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
         }
       } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
         newValue = newValue === true ? "" : newValue;
-        if (BUILD8.vdomXlink && xlink) {
+        if (BUILD2.vdomXlink && xlink) {
           elm.setAttributeNS(XLINK_NS, memberName, newValue);
         } else {
           elm.setAttribute(memberName, newValue);
@@ -827,7 +383,7 @@ var updateElement = (oldVnode, newVnode, isSvgMode2) => {
   const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
   const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || EMPTY_OBJ;
   const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
-  if (BUILD9.updatable) {
+  if (BUILD3.updatable) {
     for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
       if (!(memberName in newVnodeAttrs)) {
         setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode2, newVnode.$flags$);
@@ -863,7 +419,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
   let elm;
   let childNode;
   let oldVNode;
-  if (BUILD10.slotRelocation && !useNativeShadowDom) {
+  if (BUILD4.slotRelocation && !useNativeShadowDom) {
     checkSlotRelocate = true;
     if (newVNode2.$tag$ === "slot") {
       if (scopeId) {
@@ -881,37 +437,37 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
       );
     }
   }
-  if (BUILD10.isDev && newVNode2.$elm$) {
+  if (BUILD4.isDev && newVNode2.$elm$) {
     consoleDevError(
       `The JSX ${newVNode2.$text$ !== null ? `"${newVNode2.$text$}" text` : `"${newVNode2.$tag$}" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes`
     );
   }
-  if (BUILD10.vdomText && newVNode2.$text$ !== null) {
+  if (BUILD4.vdomText && newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
-  } else if (BUILD10.slotRelocation && newVNode2.$flags$ & 1 /* isSlotReference */) {
-    elm = newVNode2.$elm$ = BUILD10.isDebug || BUILD10.hydrateServerSide ? slotReferenceDebugNode(newVNode2) : doc.createTextNode("");
+  } else if (BUILD4.slotRelocation && newVNode2.$flags$ & 1 /* isSlotReference */) {
+    elm = newVNode2.$elm$ = BUILD4.isDebug || BUILD4.hydrateServerSide ? slotReferenceDebugNode(newVNode2) : doc.createTextNode("");
   } else {
-    if (BUILD10.svg && !isSvgMode) {
+    if (BUILD4.svg && !isSvgMode) {
       isSvgMode = newVNode2.$tag$ === "svg";
     }
-    elm = newVNode2.$elm$ = BUILD10.svg ? doc.createElementNS(
+    elm = newVNode2.$elm$ = BUILD4.svg ? doc.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
-      !useNativeShadowDom && BUILD10.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD4.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     ) : doc.createElement(
-      !useNativeShadowDom && BUILD10.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD4.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     );
-    if (BUILD10.svg && isSvgMode && newVNode2.$tag$ === "foreignObject") {
+    if (BUILD4.svg && isSvgMode && newVNode2.$tag$ === "foreignObject") {
       isSvgMode = false;
     }
-    if (BUILD10.vdomAttribute) {
+    if (BUILD4.vdomAttribute) {
       updateElement(null, newVNode2, isSvgMode);
     }
     const rootNode = elm.getRootNode();
     const isElementWithinShadowRoot = !rootNode.querySelector("body");
-    if (!isElementWithinShadowRoot && BUILD10.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
+    if (!isElementWithinShadowRoot && BUILD4.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
-    if (BUILD10.scoped) {
+    if (BUILD4.scoped) {
       updateElementScopeIds(elm, parentElm);
     }
     if (newVNode2.$children$) {
@@ -922,7 +478,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         }
       }
     }
-    if (BUILD10.svg) {
+    if (BUILD4.svg) {
       if (newVNode2.$tag$ === "svg") {
         isSvgMode = false;
       } else if (elm.tagName === "foreignObject") {
@@ -931,7 +487,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
   }
   elm["s-hn"] = hostTagName;
-  if (BUILD10.slotRelocation) {
+  if (BUILD4.slotRelocation) {
     if (newVNode2.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
       elm["s-sr"] = true;
       elm["s-cr"] = contentRef;
@@ -939,7 +495,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
       elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
       oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
       if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
-        if (BUILD10.experimentalSlotFixes) {
+        if (BUILD4.experimentalSlotFixes) {
           relocateToHostRoot(oldParentVNode.$elm$);
         } else {
           putBackInOriginalLocation(oldParentVNode.$elm$, false);
@@ -953,8 +509,12 @@ var relocateToHostRoot = (parentElm) => {
   plt.$flags$ |= 1 /* isTmpDisconnected */;
   const host = parentElm.closest(hostTagName.toLowerCase());
   if (host != null) {
-    const contentRefNode = Array.from(host.childNodes).find((ref) => ref["s-cr"]);
-    const childNodeArray = Array.from(parentElm.childNodes);
+    const contentRefNode = Array.from(host.__childNodes || host.childNodes).find(
+      (ref) => ref["s-cr"]
+    );
+    const childNodeArray = Array.from(
+      parentElm.__childNodes || parentElm.childNodes
+    );
     for (const childNode of contentRefNode ? childNodeArray.reverse() : childNodeArray) {
       if (childNode["s-sh"] != null) {
         insertBefore(host, childNode, contentRefNode != null ? contentRefNode : null);
@@ -967,8 +527,8 @@ var relocateToHostRoot = (parentElm) => {
 };
 var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ |= 1 /* isTmpDisconnected */;
-  const oldSlotChildNodes = Array.from(parentElm.childNodes);
-  if (parentElm["s-sr"] && BUILD10.experimentalSlotFixes) {
+  const oldSlotChildNodes = Array.from(parentElm.__childNodes || parentElm.childNodes);
+  if (parentElm["s-sr"] && BUILD4.experimentalSlotFixes) {
     let node = parentElm;
     while (node = node.nextSibling) {
       if (node && node["s-sn"] === parentElm["s-sn"] && node["s-sh"] === hostTagName) {
@@ -992,9 +552,9 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ &= ~1 /* isTmpDisconnected */;
 };
 var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-  let containerElm = BUILD10.slotRelocation && parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
+  let containerElm = BUILD4.slotRelocation && parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
   let childNode;
-  if (BUILD10.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
+  if (BUILD4.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
     containerElm = containerElm.shadowRoot;
   }
   for (; startIdx <= endIdx; ++startIdx) {
@@ -1002,7 +562,7 @@ var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
       childNode = createElm(null, parentVNode, startIdx, parentElm);
       if (childNode) {
         vnodes[startIdx].$elm$ = childNode;
-        insertBefore(containerElm, childNode, BUILD10.slotRelocation ? referenceNode(before) : before);
+        insertBefore(containerElm, childNode, BUILD4.slotRelocation ? referenceNode(before) : before);
       }
     }
   }
@@ -1014,7 +574,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
       const elm = vnode.$elm$;
       nullifyVNodeRefs(vnode);
       if (elm) {
-        if (BUILD10.slotRelocation) {
+        if (BUILD4.slotRelocation) {
           checkSlotFallbackVisibility = true;
           if (elm["s-ol"]) {
             elm["s-ol"].remove();
@@ -1058,7 +618,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldEndVnode = oldCh[--oldEndIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
-      if (BUILD10.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+      if (BUILD4.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
         putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
       }
       patch(oldStartVnode, newEndVnode, isInitialRender);
@@ -1066,7 +626,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldStartVnode = oldCh[++oldStartIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
-      if (BUILD10.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+      if (BUILD4.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
         putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
       }
       patch(oldEndVnode, newStartVnode, isInitialRender);
@@ -1075,7 +635,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       newStartVnode = newCh[++newStartIdx];
     } else {
       idxInOld = -1;
-      if (BUILD10.vdomKey) {
+      if (BUILD4.vdomKey) {
         for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
           if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
             idxInOld = i2;
@@ -1083,7 +643,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
           }
         }
       }
-      if (BUILD10.vdomKey && idxInOld >= 0) {
+      if (BUILD4.vdomKey && idxInOld >= 0) {
         elmToMove = oldCh[idxInOld];
         if (elmToMove.$tag$ !== newStartVnode.$tag$) {
           node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld, parentElm);
@@ -1098,7 +658,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         newStartVnode = newCh[++newStartIdx];
       }
       if (node) {
-        if (BUILD10.slotRelocation) {
+        if (BUILD4.slotRelocation) {
           insertBefore(parentReferenceNode(oldStartVnode.$elm$), node, referenceNode(oldStartVnode.$elm$));
         } else {
           insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
@@ -1115,13 +675,13 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       newStartIdx,
       newEndIdx
     );
-  } else if (BUILD10.updatable && newStartIdx > newEndIdx) {
+  } else if (BUILD4.updatable && newStartIdx > newEndIdx) {
     removeVnodes(oldCh, oldStartIdx, oldEndIdx);
   }
 };
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
-    if (BUILD10.slotRelocation && leftVNode.$tag$ === "slot") {
+    if (BUILD4.slotRelocation && leftVNode.$tag$ === "slot") {
       if (
         // The component gets hydrated and no VDOM has been initialized.
         // Here the comparison can't happen as $name$ property is not set for `leftNode`.
@@ -1133,7 +693,7 @@ var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
       }
       return leftVNode.$name$ === rightVNode.$name$;
     }
-    if (BUILD10.vdomKey && !isInitialRender) {
+    if (BUILD4.vdomKey && !isInitialRender) {
       return leftVNode.$key$ === rightVNode.$key$;
     }
     return true;
@@ -1151,13 +711,13 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   let defaultHolder;
-  if (!BUILD10.vdomText || text === null) {
-    if (BUILD10.svg) {
+  if (!BUILD4.vdomText || text === null) {
+    if (BUILD4.svg) {
       isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
     }
-    if (BUILD10.vdomAttribute || BUILD10.reflect) {
-      if (BUILD10.slot && tag === "slot" && !useNativeShadowDom) {
-        if (BUILD10.experimentalSlotFixes && oldVNode.$name$ !== newVNode2.$name$) {
+    if (BUILD4.vdomAttribute || BUILD4.reflect) {
+      if (BUILD4.slot && tag === "slot" && !useNativeShadowDom) {
+        if (BUILD4.experimentalSlotFixes && oldVNode.$name$ !== newVNode2.$name$) {
           newVNode2.$elm$["s-sn"] = newVNode2.$name$ || "";
           relocateToHostRoot(newVNode2.$elm$.parentElement);
         }
@@ -1165,30 +725,30 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
         updateElement(oldVNode, newVNode2, isSvgMode);
       }
     }
-    if (BUILD10.updatable && oldChildren !== null && newChildren !== null) {
+    if (BUILD4.updatable && oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
     } else if (newChildren !== null) {
-      if (BUILD10.updatable && BUILD10.vdomText && oldVNode.$text$ !== null) {
+      if (BUILD4.updatable && BUILD4.vdomText && oldVNode.$text$ !== null) {
         elm.textContent = "";
       }
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
     } else if (
       // don't do this on initial render as it can cause non-hydrated content to be removed
-      !isInitialRender && BUILD10.updatable && oldChildren !== null
+      !isInitialRender && BUILD4.updatable && oldChildren !== null
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
-    if (BUILD10.svg && isSvgMode && tag === "svg") {
+    if (BUILD4.svg && isSvgMode && tag === "svg") {
       isSvgMode = false;
     }
-  } else if (BUILD10.vdomText && BUILD10.slotRelocation && (defaultHolder = elm["s-cr"])) {
+  } else if (BUILD4.vdomText && BUILD4.slotRelocation && (defaultHolder = elm["s-cr"])) {
     defaultHolder.parentNode.textContent = text;
-  } else if (BUILD10.vdomText && oldVNode.$text$ !== text) {
+  } else if (BUILD4.vdomText && oldVNode.$text$ !== text) {
     elm.data = text;
   }
 };
 var updateFallbackSlotVisibility = (elm) => {
-  const childNodes = elm.childNodes;
+  const childNodes = elm.__childNodes || elm.childNodes;
   for (const childNode of childNodes) {
     if (childNode.nodeType === 1 /* ElementNode */) {
       if (childNode["s-sr"]) {
@@ -1201,7 +761,7 @@ var updateFallbackSlotVisibility = (elm) => {
                 childNode.hidden = true;
                 break;
               }
-            } else {
+            } else if (slotName === siblingNode["s-sn"]) {
               if (siblingNode.nodeType === 1 /* ElementNode */ || siblingNode.nodeType === 3 /* TextNode */ && siblingNode.textContent.trim() !== "") {
                 childNode.hidden = true;
                 break;
@@ -1219,13 +779,14 @@ var markSlotContentForRelocation = (elm) => {
   let node;
   let hostContentNodes;
   let j;
-  for (const childNode of elm.childNodes) {
+  const children = elm.__childNodes || elm.childNodes;
+  for (const childNode of children) {
     if (childNode["s-sr"] && (node = childNode["s-cr"]) && node.parentNode) {
-      hostContentNodes = node.parentNode.childNodes;
+      hostContentNodes = node.parentNode.__childNodes || node.parentNode.childNodes;
       const slotName = childNode["s-sn"];
       for (j = hostContentNodes.length - 1; j >= 0; j--) {
         node = hostContentNodes[j];
-        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!BUILD10.experimentalSlotFixes || !node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
+        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!BUILD4.experimentalSlotFixes || !node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
           if (isNodeLocatedInSlot(node, slotName)) {
             let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
             checkSlotFallbackVisibility = true;
@@ -1279,14 +840,14 @@ var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
   return slotName === "";
 };
 var nullifyVNodeRefs = (vNode) => {
-  if (BUILD10.vdomRef) {
+  if (BUILD4.vdomRef) {
     vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
     vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
   }
 };
 var insertBefore = (parent, newNode, reference) => {
   const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
-  if (BUILD10.scoped) {
+  if (BUILD4.scoped) {
     updateElementScopeIds(newNode, parent);
   }
   return inserted;
@@ -1310,7 +871,7 @@ var updateElementScopeIds = (element, parent, iterateChildNodes = false) => {
     if (scopeIds.size) {
       (_a = element.classList) == null ? void 0 : _a.add(...element["s-scs"] = Array.from(scopeIds));
       if (element["s-ol"] || iterateChildNodes) {
-        for (const childNode of Array.from(element.childNodes)) {
+        for (const childNode of Array.from(element.__childNodes || element.childNodes)) {
           updateElementScopeIds(childNode, element, true);
         }
       }
@@ -1324,7 +885,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
   const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
-  if (BUILD10.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
+  if (BUILD4.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
     throw new Error(`The <Host> must be the single root component.
 Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
 
@@ -1338,7 +899,7 @@ render() {
 }
   `);
   }
-  if (BUILD10.reflect && cmpMeta.$attrsToReflect$) {
+  if (BUILD4.reflect && cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
     cmpMeta.$attrsToReflect$.map(
       ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
@@ -1354,24 +915,24 @@ render() {
   rootVnode.$tag$ = null;
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
-  rootVnode.$elm$ = oldVNode.$elm$ = BUILD10.shadowDom ? hostElm.shadowRoot || hostElm : hostElm;
-  if (BUILD10.scoped || BUILD10.shadowDom) {
+  rootVnode.$elm$ = oldVNode.$elm$ = BUILD4.shadowDom ? hostElm.shadowRoot || hostElm : hostElm;
+  if (BUILD4.scoped || BUILD4.shadowDom) {
     scopeId = hostElm["s-sc"];
   }
   useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
-  if (BUILD10.slotRelocation) {
+  if (BUILD4.slotRelocation) {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
   }
   patch(oldVNode, rootVnode, isInitialLoad);
-  if (BUILD10.slotRelocation) {
+  if (BUILD4.slotRelocation) {
     plt.$flags$ |= 1 /* isTmpDisconnected */;
     if (checkSlotRelocate) {
       markSlotContentForRelocation(rootVnode.$elm$);
       for (const relocateData of relocateNodes) {
         const nodeToRelocate = relocateData.$nodeToRelocate$;
         if (!nodeToRelocate["s-ol"]) {
-          const orgLocationNode = BUILD10.isDebug || BUILD10.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : doc.createTextNode("");
+          const orgLocationNode = BUILD4.isDebug || BUILD4.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : doc.createTextNode("");
           orgLocationNode["s-nr"] = nodeToRelocate;
           insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
         }
@@ -1382,7 +943,7 @@ render() {
         if (slotRefNode) {
           const parentNodeRef = slotRefNode.parentNode;
           let insertBeforeNode = slotRefNode.nextSibling;
-          if (!BUILD10.experimentalSlotFixes || insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */) {
+          if (!BUILD4.experimentalSlotFixes || insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */) {
             let orgLocationNode = (_a = nodeToRelocate["s-ol"]) == null ? void 0 : _a.previousSibling;
             while (orgLocationNode) {
               let refNode = (_b = orgLocationNode["s-nr"]) != null ? _b : null;
@@ -1401,7 +962,7 @@ render() {
           }
           if (!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode || nodeToRelocate.nextSibling !== insertBeforeNode) {
             if (nodeToRelocate !== insertBeforeNode) {
-              if (!BUILD10.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
+              if (!BUILD4.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
                 nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
               }
               insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
@@ -1427,8 +988,9 @@ render() {
     plt.$flags$ &= ~1 /* isTmpDisconnected */;
     relocateNodes.length = 0;
   }
-  if (BUILD10.experimentalScopedSlotChanges && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
-    for (const childNode of rootVnode.$elm$.childNodes) {
+  if (BUILD4.experimentalScopedSlotChanges && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+    const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
+    for (const childNode of children) {
       if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
         if (isInitialLoad && childNode["s-ih"] == null) {
           childNode["s-ih"] = (_e = childNode.hidden) != null ? _e : false;
@@ -1437,37 +999,926 @@ render() {
       }
     }
   }
-  contentRef = void 0;
+  contentRef = void 0;
+};
+var slotReferenceDebugNode = (slotVNode) => doc.createComment(
+  `<slot${slotVNode.$name$ ? ' name="' + slotVNode.$name$ + '"' : ""}> (host=${hostTagName.toLowerCase()})`
+);
+var originalLocationDebugNode = (nodeToRelocate) => doc.createComment(
+  `org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate["s-hn"]})` : `[${nodeToRelocate.textContent}]`)
+);
+
+// src/runtime/dom-extras.ts
+var patchPseudoShadowDom = (hostElementPrototype) => {
+  patchCloneNode(hostElementPrototype);
+  patchSlotAppendChild(hostElementPrototype);
+  patchSlotAppend(hostElementPrototype);
+  patchSlotPrepend(hostElementPrototype);
+  patchSlotInsertAdjacentElement(hostElementPrototype);
+  patchSlotInsertAdjacentHTML(hostElementPrototype);
+  patchSlotInsertAdjacentText(hostElementPrototype);
+  patchTextContent(hostElementPrototype);
+  patchChildSlotNodes(hostElementPrototype);
+  patchSlotRemoveChild(hostElementPrototype);
+};
+var patchCloneNode = (HostElementPrototype) => {
+  const orgCloneNode = HostElementPrototype.cloneNode;
+  HostElementPrototype.cloneNode = function(deep) {
+    const srcNode = this;
+    const isShadowDom = BUILD5.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
+    const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
+    if (BUILD5.slot && !isShadowDom && deep) {
+      let i2 = 0;
+      let slotted, nonStencilNode;
+      const stencilPrivates = [
+        "s-id",
+        "s-cr",
+        "s-lr",
+        "s-rc",
+        "s-sc",
+        "s-p",
+        "s-cn",
+        "s-sr",
+        "s-sn",
+        "s-hn",
+        "s-ol",
+        "s-nr",
+        "s-si",
+        "s-rf",
+        "s-scs"
+      ];
+      const childNodes = this.__childNodes || this.childNodes;
+      for (; i2 < childNodes.length; i2++) {
+        slotted = childNodes[i2]["s-nr"];
+        nonStencilNode = stencilPrivates.every((privateField) => !childNodes[i2][privateField]);
+        if (slotted) {
+          if (BUILD5.appendChildSlotFix && clonedNode.__appendChild) {
+            clonedNode.__appendChild(slotted.cloneNode(true));
+          } else {
+            clonedNode.appendChild(slotted.cloneNode(true));
+          }
+        }
+        if (nonStencilNode) {
+          clonedNode.appendChild(childNodes[i2].cloneNode(true));
+        }
+      }
+    }
+    return clonedNode;
+  };
+};
+var patchSlotAppendChild = (HostElementPrototype) => {
+  HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
+  HostElementPrototype.appendChild = function(newChild) {
+    const slotName = newChild["s-sn"] = getSlotName(newChild);
+    const slotNode = getHostSlotNode(this.__childNodes || this.childNodes, slotName, this.tagName);
+    if (slotNode) {
+      addSlotRelocateNode(newChild, slotNode);
+      const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+      const appendAfter = slotChildNodes[slotChildNodes.length - 1];
+      const insertedNode = insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);
+      updateFallbackSlotVisibility(this);
+      return insertedNode;
+    }
+    return this.__appendChild(newChild);
+  };
+};
+var patchSlotRemoveChild = (ElementPrototype) => {
+  ElementPrototype.__removeChild = ElementPrototype.removeChild;
+  ElementPrototype.removeChild = function(toRemove) {
+    if (toRemove && typeof toRemove["s-sn"] !== "undefined") {
+      const childNodes = this.__childNodes || this.childNodes;
+      const slotNode = getHostSlotNode(childNodes, toRemove["s-sn"], this.tagName);
+      if (slotNode && toRemove.isConnected) {
+        toRemove.remove();
+        updateFallbackSlotVisibility(this);
+        return;
+      }
+    }
+    return this.__removeChild(toRemove);
+  };
+};
+var patchSlotPrepend = (HostElementPrototype) => {
+  HostElementPrototype.__prepend = HostElementPrototype.prepend;
+  HostElementPrototype.prepend = function(...newChildren) {
+    newChildren.forEach((newChild) => {
+      if (typeof newChild === "string") {
+        newChild = this.ownerDocument.createTextNode(newChild);
+      }
+      const slotName = newChild["s-sn"] = getSlotName(newChild);
+      const childNodes = this.__childNodes || this.childNodes;
+      const slotNode = getHostSlotNode(childNodes, slotName, this.tagName);
+      if (slotNode) {
+        addSlotRelocateNode(newChild, slotNode, true);
+        const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+        const appendAfter = slotChildNodes[0];
+        return insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);
+      }
+      if (newChild.nodeType === 1 && !!newChild.getAttribute("slot")) {
+        newChild.hidden = true;
+      }
+      return HostElementPrototype.__prepend(newChild);
+    });
+  };
+};
+var patchSlotAppend = (HostElementPrototype) => {
+  HostElementPrototype.__append = HostElementPrototype.append;
+  HostElementPrototype.append = function(...newChildren) {
+    newChildren.forEach((newChild) => {
+      if (typeof newChild === "string") {
+        newChild = this.ownerDocument.createTextNode(newChild);
+      }
+      this.appendChild(newChild);
+    });
+  };
+};
+var patchSlotInsertAdjacentHTML = (HostElementPrototype) => {
+  const originalInsertAdjacentHtml = HostElementPrototype.insertAdjacentHTML;
+  HostElementPrototype.insertAdjacentHTML = function(position, text) {
+    if (position !== "afterbegin" && position !== "beforeend") {
+      return originalInsertAdjacentHtml.call(this, position, text);
+    }
+    const container = this.ownerDocument.createElement("_");
+    let node;
+    container.innerHTML = text;
+    if (position === "afterbegin") {
+      while (node = container.firstChild) {
+        this.prepend(node);
+      }
+    } else if (position === "beforeend") {
+      while (node = container.firstChild) {
+        this.append(node);
+      }
+    }
+  };
+};
+var patchSlotInsertAdjacentText = (HostElementPrototype) => {
+  HostElementPrototype.insertAdjacentText = function(position, text) {
+    this.insertAdjacentHTML(position, text);
+  };
+};
+var patchSlotInsertAdjacentElement = (HostElementPrototype) => {
+  const originalInsertAdjacentElement = HostElementPrototype.insertAdjacentElement;
+  HostElementPrototype.insertAdjacentElement = function(position, element) {
+    if (position !== "afterbegin" && position !== "beforeend") {
+      return originalInsertAdjacentElement.call(this, position, element);
+    }
+    if (position === "afterbegin") {
+      this.prepend(element);
+      return element;
+    } else if (position === "beforeend") {
+      this.append(element);
+      return element;
+    }
+    return element;
+  };
+};
+var patchTextContent = (hostElementPrototype) => {
+  let descriptor = globalThis.Node && Object.getOwnPropertyDescriptor(Node.prototype, "textContent");
+  if (!descriptor) {
+    descriptor = Object.getOwnPropertyDescriptor(hostElementPrototype, "textContent");
+  }
+  if (descriptor) Object.defineProperty(hostElementPrototype, "__textContent", descriptor);
+  Object.defineProperty(hostElementPrototype, "textContent", {
+    get: function() {
+      let text = "";
+      const childNodes = this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes);
+      childNodes.forEach((node) => text += node.textContent || "");
+      return text;
+    },
+    set: function(value) {
+      const childNodes = this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes);
+      childNodes.forEach((node) => {
+        if (node["s-ol"]) node["s-ol"].remove();
+        node.remove();
+      });
+      this.insertAdjacentHTML("beforeend", value);
+    }
+  });
+};
+var patchChildSlotNodes = (elm) => {
+  class FakeNodeList extends Array {
+    item(n) {
+      return this[n];
+    }
+  }
+  let childNodesFn = globalThis.Node && Object.getOwnPropertyDescriptor(Node.prototype, "childNodes");
+  if (!childNodesFn) {
+    childNodesFn = Object.getOwnPropertyDescriptor(elm, "childNodes");
+  }
+  if (childNodesFn) Object.defineProperty(elm, "__childNodes", childNodesFn);
+  let childrenFn = Object.getOwnPropertyDescriptor(Element.prototype, "children");
+  if (!childrenFn) {
+    childrenFn = Object.getOwnPropertyDescriptor(elm, "children");
+  }
+  if (childrenFn) Object.defineProperty(elm, "__children", childrenFn);
+  Object.defineProperty(elm, "children", {
+    get() {
+      return this.childNodes.filter((n) => n.nodeType === 1);
+    }
+  });
+  Object.defineProperty(elm, "childElementCount", {
+    get() {
+      return this.children.length;
+    }
+  });
+  if (!childNodesFn) return;
+  Object.defineProperty(elm, "childNodes", {
+    get() {
+      var _a, _b;
+      if (!plt.$flags$ || !((_a = getHostRef(this)) == null ? void 0 : _a.$flags$) || (plt.$flags$ & 1 /* isTmpDisconnected */) === 0 && ((_b = getHostRef(this)) == null ? void 0 : _b.$flags$) & 2 /* hasRendered */) {
+        const result = new FakeNodeList();
+        const nodes = getSlottedChildNodes(this.__childNodes);
+        result.push(...nodes);
+        return result;
+      }
+      return FakeNodeList.from(this.__childNodes);
+    }
+  });
+};
+var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
+  let slottedNodeLocation;
+  if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
+    slottedNodeLocation = newChild["s-ol"];
+  } else {
+    slottedNodeLocation = document.createTextNode("");
+    slottedNodeLocation["s-nr"] = newChild;
+  }
+  if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
+  const parent = slotNode["s-cr"].parentNode;
+  const appendMethod = prepend ? parent.__prepend || parent.prepend : parent.__appendChild || parent.appendChild;
+  if (typeof position !== "undefined") {
+    if (BUILD5.hydrateClientSide) {
+      slottedNodeLocation["s-oo"] = position;
+      const childNodes = parent.__childNodes || parent.childNodes;
+      const slotRelocateNodes = [slottedNodeLocation];
+      childNodes.forEach((n) => {
+        if (n["s-nr"]) slotRelocateNodes.push(n);
+      });
+      slotRelocateNodes.sort((a, b) => {
+        if (!a["s-oo"] || a["s-oo"] < b["s-oo"]) return -1;
+        else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
+        return 0;
+      });
+      slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
+    }
+  } else {
+    appendMethod.call(parent, slottedNodeLocation);
+  }
+  newChild["s-ol"] = slottedNodeLocation;
+  newChild["s-sh"] = slotNode["s-hn"];
+};
+var getSlottedChildNodes = (childNodes) => {
+  const result = [];
+  for (let i2 = 0; i2 < childNodes.length; i2++) {
+    const slottedNode = childNodes[i2]["s-nr"];
+    if (slottedNode && slottedNode.isConnected) {
+      result.push(slottedNode);
+    }
+  }
+  return result;
+};
+var getSlotName = (node) => node["s-sn"] || node.nodeType === 1 && node.getAttribute("slot") || "";
+var getHostSlotNode = (childNodes, slotName, hostName) => {
+  let i2 = 0;
+  let childNode;
+  for (; i2 < childNodes.length; i2++) {
+    childNode = childNodes[i2];
+    if (childNode["s-sr"] && childNode["s-sn"] === slotName && childNode["s-hn"] === hostName) {
+      return childNode;
+    }
+    childNode = getHostSlotNode(childNode.childNodes, slotName, hostName);
+    if (childNode) {
+      return childNode;
+    }
+  }
+  return null;
+};
+var getHostSlotChildNodes = (n, slotName) => {
+  const childNodes = [n];
+  while ((n = n.nextSibling) && n["s-sn"] === slotName) {
+    childNodes.push(n);
+  }
+  return childNodes;
+};
+
+// src/runtime/profile.ts
+import { BUILD as BUILD6 } from "@stencil/core/internal/app-data";
+var i = 0;
+var createTime = (fnName, tagName = "") => {
+  if (BUILD6.profile && performance.mark) {
+    const key = `st:${fnName}:${tagName}:${i++}`;
+    performance.mark(key);
+    return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);
+  } else {
+    return () => {
+      return;
+    };
+  }
+};
+var uniqueTime = (key, measureText) => {
+  if (BUILD6.profile && performance.mark) {
+    if (performance.getEntriesByName(key, "mark").length === 0) {
+      performance.mark(key);
+    }
+    return () => {
+      if (performance.getEntriesByName(measureText, "measure").length === 0) {
+        performance.measure(measureText, key);
+      }
+    };
+  } else {
+    return () => {
+      return;
+    };
+  }
+};
+var inspect = (ref) => {
+  const hostRef = getHostRef(ref);
+  if (!hostRef) {
+    return void 0;
+  }
+  const flags = hostRef.$flags$;
+  const hostElement = hostRef.$hostElement$;
+  return {
+    renderCount: hostRef.$renderCount$,
+    flags: {
+      hasRendered: !!(flags & 2 /* hasRendered */),
+      hasConnected: !!(flags & 1 /* hasConnected */),
+      isWaitingForChildren: !!(flags & 4 /* isWaitingForChildren */),
+      isConstructingInstance: !!(flags & 8 /* isConstructingInstance */),
+      isQueuedForUpdate: !!(flags & 16 /* isQueuedForUpdate */),
+      hasInitializedComponent: !!(flags & 32 /* hasInitializedComponent */),
+      hasLoadedComponent: !!(flags & 64 /* hasLoadedComponent */),
+      isWatchReady: !!(flags & 128 /* isWatchReady */),
+      isListenReady: !!(flags & 256 /* isListenReady */),
+      needsRerender: !!(flags & 512 /* needsRerender */)
+    },
+    instanceValues: hostRef.$instanceValues$,
+    ancestorComponent: hostRef.$ancestorComponent$,
+    hostElement,
+    lazyInstance: hostRef.$lazyInstance$,
+    vnode: hostRef.$vnode$,
+    modeName: hostRef.$modeName$,
+    onReadyPromise: hostRef.$onReadyPromise$,
+    onReadyResolve: hostRef.$onReadyResolve$,
+    onInstancePromise: hostRef.$onInstancePromise$,
+    onInstanceResolve: hostRef.$onInstanceResolve$,
+    onRenderResolve: hostRef.$onRenderResolve$,
+    queuedListeners: hostRef.$queuedListeners$,
+    rmListeners: hostRef.$rmListeners$,
+    ["s-id"]: hostElement["s-id"],
+    ["s-cr"]: hostElement["s-cr"],
+    ["s-lr"]: hostElement["s-lr"],
+    ["s-p"]: hostElement["s-p"],
+    ["s-rc"]: hostElement["s-rc"],
+    ["s-sc"]: hostElement["s-sc"]
+  };
+};
+var installDevTools = () => {
+  if (BUILD6.devTools) {
+    const stencil = win.stencil = win.stencil || {};
+    const originalInspect = stencil.inspect;
+    stencil.inspect = (ref) => {
+      let result = inspect(ref);
+      if (!result && typeof originalInspect === "function") {
+        result = originalInspect(ref);
+      }
+      return result;
+    };
+  }
+};
+
+// src/runtime/client-hydrate.ts
+var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+  const endHydrate = createTime("hydrateClient", tagName);
+  const shadowRoot = hostElm.shadowRoot;
+  const childRenderNodes = [];
+  const slotNodes = [];
+  const slottedNodes = [];
+  const shadowRootNodes = BUILD7.shadowDom && shadowRoot ? [] : null;
+  const vnode = newVNode(tagName, null);
+  vnode.$elm$ = hostElm;
+  if (!plt.$orgLocNodes$) {
+    initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
+  }
+  hostElm[HYDRATE_ID] = hostId;
+  hostElm.removeAttribute(HYDRATE_ID);
+  hostRef.$vnode$ = clientHydrate(
+    vnode,
+    childRenderNodes,
+    slotNodes,
+    shadowRootNodes,
+    hostElm,
+    hostElm,
+    hostId,
+    slottedNodes
+  );
+  let crIndex = 0;
+  const crLength = childRenderNodes.length;
+  let childRenderNode;
+  for (crIndex; crIndex < crLength; crIndex++) {
+    childRenderNode = childRenderNodes[crIndex];
+    const orgLocationId = childRenderNode.$hostId$ + "." + childRenderNode.$nodeId$;
+    const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
+    const node = childRenderNode.$elm$;
+    if (!shadowRoot) {
+      node["s-hn"] = tagName.toUpperCase();
+      if (childRenderNode.$tag$ === "slot") {
+        node["s-cr"] = hostElm["s-cr"];
+      }
+    }
+    if (orgLocationNode && orgLocationNode.isConnected) {
+      if (shadowRoot && orgLocationNode["s-en"] === "") {
+        orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
+      }
+      orgLocationNode.parentNode.removeChild(orgLocationNode);
+      if (!shadowRoot) {
+        node["s-oo"] = parseInt(childRenderNode.$nodeId$);
+      }
+    }
+    plt.$orgLocNodes$.delete(orgLocationId);
+  }
+  const hosts = [];
+  let snIndex = 0;
+  const snLen = slottedNodes.length;
+  let slotGroup;
+  let snGroupIdx;
+  let snGroupLen;
+  let slottedItem;
+  for (snIndex; snIndex < snLen; snIndex++) {
+    slotGroup = slottedNodes[snIndex];
+    if (!slotGroup || !slotGroup.length) continue;
+    snGroupLen = slotGroup.length;
+    snGroupIdx = 0;
+    for (snGroupIdx; snGroupIdx < snGroupLen; snGroupIdx++) {
+      slottedItem = slotGroup[snGroupIdx];
+      if (!hosts[slottedItem.hostId]) {
+        hosts[slottedItem.hostId] = plt.$orgLocNodes$.get(slottedItem.hostId);
+      }
+      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 {
+          const hostChildren = hostEle.__childNodes || hostEle.childNodes;
+          slottedItem.slot["s-cr"] = hostChildren[0];
+        }
+        addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
+      }
+      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
+        hostEle.appendChild(slottedItem.node);
+      }
+    }
+  }
+  if (BUILD7.shadowDom && shadowRoot) {
+    let rnIdex = 0;
+    const rnLen = shadowRootNodes.length;
+    for (rnIdex; rnIdex < rnLen; rnIdex++) {
+      shadowRoot.appendChild(shadowRootNodes[rnIdex]);
+    }
+    Array.from(hostElm.childNodes).forEach((node) => {
+      if (node.nodeType === 8 /* CommentNode */ && typeof node["s-sn"] !== "string") {
+        node.parentNode.removeChild(node);
+      }
+    });
+  }
+  hostRef.$hostElement$ = hostElm;
+  endHydrate();
+};
+var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId, slottedNodes = []) => {
+  let childNodeType;
+  let childIdSplt;
+  let childVNode;
+  let i2;
+  const scopeId2 = hostElm["s-sc"];
+  if (node.nodeType === 1 /* ElementNode */) {
+    childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
+    if (childNodeType) {
+      childIdSplt = childNodeType.split(".");
+      if (childIdSplt[0] === hostId || childIdSplt[0] === "0") {
+        childVNode = createSimpleVNode({
+          $flags$: 0,
+          $hostId$: childIdSplt[0],
+          $nodeId$: childIdSplt[1],
+          $depth$: childIdSplt[2],
+          $index$: childIdSplt[3],
+          $tag$: node.tagName.toLowerCase(),
+          $elm$: node,
+          // If we don't add the initial classes to the VNode, the first `vdom-render.ts` reconciliation will fail:
+          // client side changes before componentDidLoad will be ignored, `set-accessor.ts` will just take the element's initial classes
+          $attrs$: { class: node.className }
+        });
+        childRenderNodes.push(childVNode);
+        node.removeAttribute(HYDRATE_CHILD_ID);
+        if (!parentVNode.$children$) {
+          parentVNode.$children$ = [];
+        }
+        const slotName = childVNode.$elm$.getAttribute("s-sn");
+        if (typeof slotName === "string") {
+          if (childVNode.$tag$ === "slot-fb") {
+            addSlot(
+              slotName,
+              childIdSplt[2],
+              childVNode,
+              node,
+              parentVNode,
+              childRenderNodes,
+              slotNodes,
+              shadowRootNodes,
+              slottedNodes
+            );
+          }
+          childVNode.$elm$["s-sn"] = slotName;
+          childVNode.$elm$.removeAttribute("s-sn");
+        }
+        if (childVNode.$index$ !== void 0) {
+          parentVNode.$children$[childVNode.$index$] = childVNode;
+        }
+        if (scopeId2) node["s-si"] = scopeId2;
+        parentVNode = childVNode;
+        if (shadowRootNodes && childVNode.$depth$ === "0") {
+          shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+        }
+      }
+    }
+    if (node.shadowRoot) {
+      for (i2 = node.shadowRoot.childNodes.length - 1; i2 >= 0; i2--) {
+        clientHydrate(
+          parentVNode,
+          childRenderNodes,
+          slotNodes,
+          shadowRootNodes,
+          hostElm,
+          node.shadowRoot.childNodes[i2],
+          hostId,
+          slottedNodes
+        );
+      }
+    }
+    const nonShadowNodes = node.__childNodes || node.childNodes;
+    for (i2 = nonShadowNodes.length - 1; i2 >= 0; i2--) {
+      clientHydrate(
+        parentVNode,
+        childRenderNodes,
+        slotNodes,
+        shadowRootNodes,
+        hostElm,
+        nonShadowNodes[i2],
+        hostId,
+        slottedNodes
+      );
+    }
+  } else if (node.nodeType === 8 /* CommentNode */) {
+    childIdSplt = node.nodeValue.split(".");
+    if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
+      childNodeType = childIdSplt[0];
+      childVNode = createSimpleVNode({
+        $hostId$: childIdSplt[1],
+        $nodeId$: childIdSplt[2],
+        $depth$: childIdSplt[3],
+        $index$: childIdSplt[4] || "0",
+        $elm$: node,
+        $attrs$: null,
+        $children$: null,
+        $key$: null,
+        $name$: null,
+        $tag$: null,
+        $text$: null
+      });
+      if (childNodeType === TEXT_NODE_ID) {
+        childVNode.$elm$ = node.nextSibling;
+        if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
+          childVNode.$text$ = childVNode.$elm$.textContent;
+          childRenderNodes.push(childVNode);
+          node.remove();
+          if (hostId === childVNode.$hostId$) {
+            if (!parentVNode.$children$) {
+              parentVNode.$children$ = [];
+            }
+            parentVNode.$children$[childVNode.$index$] = childVNode;
+          }
+          if (shadowRootNodes && childVNode.$depth$ === "0") {
+            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+          }
+        }
+      } else if (childNodeType === COMMENT_NODE_ID) {
+        childVNode.$elm$ = node.nextSibling;
+        if (childVNode.$elm$ && childVNode.$elm$.nodeType === 8 /* CommentNode */) {
+          childRenderNodes.push(childVNode);
+          node.remove();
+        }
+      } else if (childVNode.$hostId$ === hostId) {
+        if (childNodeType === SLOT_NODE_ID) {
+          childVNode.$tag$ = "slot";
+          const slotName = node["s-sn"] = childVNode.$name$ = childIdSplt[5] || "";
+          addSlot(
+            slotName,
+            childIdSplt[2],
+            childVNode,
+            node,
+            parentVNode,
+            childRenderNodes,
+            slotNodes,
+            shadowRootNodes,
+            slottedNodes
+          );
+        } else if (childNodeType === CONTENT_REF_ID) {
+          if (BUILD7.shadowDom && shadowRootNodes) {
+            node.remove();
+          } else if (BUILD7.slotRelocation) {
+            hostElm["s-cr"] = node;
+            node["s-cn"] = true;
+          }
+        }
+      }
+    }
+  } else if (parentVNode && parentVNode.$tag$ === "style") {
+    const vnode = newVNode(null, node.textContent);
+    vnode.$elm$ = node;
+    vnode.$index$ = "0";
+    parentVNode.$children$ = [vnode];
+  }
+  return parentVNode;
+};
+var initializeDocumentHydrate = (node, orgLocNodes) => {
+  if (node.nodeType === 1 /* ElementNode */) {
+    const componentId = node[HYDRATE_ID] || node.getAttribute(HYDRATE_ID);
+    if (componentId) {
+      orgLocNodes.set(componentId, node);
+    }
+    let i2 = 0;
+    if (node.shadowRoot) {
+      for (; i2 < node.shadowRoot.childNodes.length; i2++) {
+        initializeDocumentHydrate(node.shadowRoot.childNodes[i2], orgLocNodes);
+      }
+    }
+    const nonShadowNodes = node.__childNodes || node.childNodes;
+    for (i2 = 0; i2 < nonShadowNodes.length; i2++) {
+      initializeDocumentHydrate(nonShadowNodes[i2], orgLocNodes);
+    }
+  } else if (node.nodeType === 8 /* CommentNode */) {
+    const childIdSplt = node.nodeValue.split(".");
+    if (childIdSplt[0] === ORG_LOCATION_ID) {
+      orgLocNodes.set(childIdSplt[1] + "." + childIdSplt[2], node);
+      node.nodeValue = "";
+      node["s-en"] = childIdSplt[3];
+    }
+  }
+};
+var createSimpleVNode = (vnode) => {
+  const defaultVNode = {
+    $flags$: 0,
+    $hostId$: null,
+    $nodeId$: null,
+    $depth$: null,
+    $index$: "0",
+    $elm$: null,
+    $attrs$: null,
+    $children$: null,
+    $key$: null,
+    $name$: null,
+    $tag$: null,
+    $text$: null
+  };
+  return { ...defaultVNode, ...vnode };
+};
+function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNodes, slotNodes, shadowRootNodes, slottedNodes) {
+  node["s-sr"] = true;
+  const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
+  if (BUILD7.shadowDom && shadowRootNodes) {
+    const slot = childVNode.$elm$ = doc.createElement(childVNode.$tag$);
+    if (childVNode.$name$) {
+      childVNode.$elm$.setAttribute("name", slotName);
+    }
+    if (parentNodeId && parentNodeId !== childVNode.$hostId$) {
+      parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
+    } else {
+      node.parentNode.insertBefore(childVNode.$elm$, node);
+    }
+    addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
+    node.remove();
+    if (childVNode.$depth$ === "0") {
+      shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+    }
+  } else {
+    const slot = childVNode.$elm$;
+    const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
+    addSlottedNodes(slottedNodes, slotId, slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
+    if (shouldMove) {
+      parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
+    }
+    childRenderNodes.push(childVNode);
+  }
+  slotNodes.push(childVNode);
+  if (!parentVNode.$children$) {
+    parentVNode.$children$ = [];
+  }
+  parentVNode.$children$[childVNode.$index$] = childVNode;
+}
+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 */))) {
+    slottedNode["s-sn"] = slotName;
+    slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
+    slottedNode = slottedNode.nextSibling;
+  }
+};
+
+// src/runtime/initialize-component.ts
+import { BUILD as BUILD15 } from "@stencil/core/internal/app-data";
+
+// src/runtime/mode.ts
+var computeMode = (elm) => modeResolutionChain.map((h2) => h2(elm)).find((m) => !!m);
+var setMode = (handler) => modeResolutionChain.push(handler);
+var getMode = (ref) => getHostRef(ref).$modeName$;
+
+// src/runtime/proxy-component.ts
+import { BUILD as BUILD14 } from "@stencil/core/internal/app-data";
+
+// src/runtime/set-value.ts
+import { BUILD as BUILD13 } from "@stencil/core/internal/app-data";
+
+// src/runtime/parse-property-value.ts
+import { BUILD as BUILD8 } from "@stencil/core/internal/app-data";
+var parsePropertyValue = (propValue, propType) => {
+  if (propValue != null && !isComplexType(propValue)) {
+    if (BUILD8.propBoolean && propType & 4 /* Boolean */) {
+      return propValue === "false" ? false : propValue === "" || !!propValue;
+    }
+    if (BUILD8.propNumber && propType & 2 /* Number */) {
+      return parseFloat(propValue);
+    }
+    if (BUILD8.propString && propType & 1 /* String */) {
+      return String(propValue);
+    }
+    return propValue;
+  }
+  return propValue;
+};
+
+// src/runtime/update-component.ts
+import { BUILD as BUILD12, NAMESPACE } from "@stencil/core/internal/app-data";
+
+// src/runtime/event-emitter.ts
+import { BUILD as BUILD10 } from "@stencil/core/internal/app-data";
+
+// src/runtime/element.ts
+import { BUILD as BUILD9 } from "@stencil/core/internal/app-data";
+var getElement = (ref) => BUILD9.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      if (BUILD10.isDev && !elm.isConnected) {
+        consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
+      }
+      return emitEvent(elm, name, {
+        bubbles: !!(flags & 4 /* Bubbles */),
+        composed: !!(flags & 2 /* Composed */),
+        cancelable: !!(flags & 1 /* Cancellable */),
+        detail
+      });
+    }
+  };
+};
+var emitEvent = (elm, name, opts) => {
+  const ev = plt.ce(name, opts);
+  elm.dispatchEvent(ev);
+  return ev;
+};
+
+// src/runtime/styles.ts
+import { BUILD as BUILD11 } from "@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 (!BUILD11.attachStyles) {
+    return scopeId2;
+  }
+  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
+  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 (BUILD11.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
+          styleElm.innerHTML = style;
+        } else {
+          styleElm = doc.createElement("style");
+          styleElm.innerHTML = style;
+          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(doc);
+          if (nonce != null) {
+            styleElm.setAttribute("nonce", nonce);
+          }
+          if ((BUILD11.hydrateServerSide || BUILD11.hotModuleReplacement) && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+            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);
+            } 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.nodeName !== "HEAD") {
+            styleContainerNode.insertBefore(styleElm, null);
+          }
+        }
+        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
+          styleElm.innerHTML += SLOT_FB_CSS;
+        }
+        if (appliedStyles) {
+          appliedStyles.add(scopeId2);
+        }
+      }
+    } else if (BUILD11.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(
+    BUILD11.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+    cmpMeta,
+    hostRef.$modeName$
+  );
+  if ((BUILD11.shadowDom || BUILD11.scoped) && BUILD11.cssAnnotations && flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
+    elm["s-sc"] = scopeId2;
+    elm.classList.add(scopeId2 + "-h");
+    if (BUILD11.scoped && flags & 2 /* scopedCssEncapsulation */) {
+      elm.classList.add(scopeId2 + "-s");
+    }
+  }
+  endAttachStyles();
 };
-var slotReferenceDebugNode = (slotVNode) => doc.createComment(
-  `<slot${slotVNode.$name$ ? ' name="' + slotVNode.$name$ + '"' : ""}> (host=${hostTagName.toLowerCase()})`
-);
-var originalLocationDebugNode = (nodeToRelocate) => doc.createComment(
-  `org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate["s-hn"]})` : `[${nodeToRelocate.textContent}]`)
-);
+var getScopeId = (cmp, mode) => "sc-" + (BUILD11.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
 
 // src/runtime/update-component.ts
 var attachToAncestor = (hostRef, ancestorComponent) => {
-  if (BUILD11.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
+  if (BUILD12.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
     ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = r));
   }
 };
 var scheduleUpdate = (hostRef, isInitialLoad) => {
-  if (BUILD11.taskQueue && BUILD11.updatable) {
+  if (BUILD12.taskQueue && BUILD12.updatable) {
     hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
   }
-  if (BUILD11.asyncLoading && hostRef.$flags$ & 4 /* isWaitingForChildren */) {
+  if (BUILD12.asyncLoading && hostRef.$flags$ & 4 /* isWaitingForChildren */) {
     hostRef.$flags$ |= 512 /* needsRerender */;
     return;
   }
   attachToAncestor(hostRef, hostRef.$ancestorComponent$);
   const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
-  return BUILD11.taskQueue ? writeTask(dispatch) : dispatch();
+  return BUILD12.taskQueue ? writeTask(dispatch) : dispatch();
 };
 var dispatchHooks = (hostRef, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
-  const instance = BUILD11.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD12.lazyLoad ? hostRef.$lazyInstance$ : elm;
   if (!instance) {
     throw new Error(
       `Can't render component <${elm.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`
@@ -1475,7 +1926,7 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   }
   let maybePromise;
   if (isInitialLoad) {
-    if (BUILD11.lazyLoad && BUILD11.hostListener) {
+    if (BUILD12.lazyLoad && BUILD12.hostListener) {
       hostRef.$flags$ |= 256 /* isListenReady */;
       if (hostRef.$queuedListeners$) {
         hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
@@ -1483,17 +1934,17 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
       }
     }
     emitLifecycleEvent(elm, "componentWillLoad");
-    if (BUILD11.cmpWillLoad) {
+    if (BUILD12.cmpWillLoad) {
       maybePromise = safeCall(instance, "componentWillLoad");
     }
   } else {
     emitLifecycleEvent(elm, "componentWillUpdate");
-    if (BUILD11.cmpWillUpdate) {
+    if (BUILD12.cmpWillUpdate) {
       maybePromise = safeCall(instance, "componentWillUpdate");
     }
   }
   emitLifecycleEvent(elm, "componentWillRender");
-  if (BUILD11.cmpWillRender) {
+  if (BUILD12.cmpWillRender) {
     maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender"));
   }
   endSchedule();
@@ -1509,23 +1960,23 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$);
   const rc = elm["s-rc"];
-  if (BUILD11.style && isInitialLoad) {
+  if (BUILD12.style && isInitialLoad) {
     attachStyles(hostRef);
   }
   const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$);
-  if (BUILD11.isDev) {
+  if (BUILD12.isDev) {
     hostRef.$flags$ |= 1024 /* devOnRender */;
   }
-  if (BUILD11.hydrateServerSide) {
+  if (BUILD12.hydrateServerSide) {
     await callRender(hostRef, instance, elm, isInitialLoad);
   } else {
     callRender(hostRef, instance, elm, isInitialLoad);
   }
-  if (BUILD11.isDev) {
+  if (BUILD12.isDev) {
     hostRef.$renderCount$ = hostRef.$renderCount$ === void 0 ? 1 : hostRef.$renderCount$ + 1;
     hostRef.$flags$ &= ~1024 /* devOnRender */;
   }
-  if (BUILD11.hydrateServerSide) {
+  if (BUILD12.hydrateServerSide) {
     try {
       serverSideConnected(elm);
       if (isInitialLoad) {
@@ -1539,13 +1990,13 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
       consoleError(e, elm);
     }
   }
-  if (BUILD11.asyncLoading && rc) {
+  if (BUILD12.asyncLoading && rc) {
     rc.map((cb) => cb());
     elm["s-rc"] = void 0;
   }
   endRender();
   endUpdate();
-  if (BUILD11.asyncLoading) {
+  if (BUILD12.asyncLoading) {
     const childrenPromises = (_a = elm["s-p"]) != null ? _a : [];
     const postUpdate = () => postUpdateComponent(hostRef);
     if (childrenPromises.length === 0) {
@@ -1561,10 +2012,10 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
 };
 var renderingRef = null;
 var callRender = (hostRef, instance, elm, isInitialLoad) => {
-  const allRenderFn = BUILD11.allRenderFn ? true : false;
-  const lazyLoad = BUILD11.lazyLoad ? true : false;
-  const taskQueue = BUILD11.taskQueue ? true : false;
-  const updatable = BUILD11.updatable ? true : false;
+  const allRenderFn = BUILD12.allRenderFn ? true : false;
+  const lazyLoad = BUILD12.lazyLoad ? true : false;
+  const taskQueue = BUILD12.taskQueue ? true : false;
+  const updatable = BUILD12.updatable ? true : false;
   try {
     renderingRef = instance;
     instance = allRenderFn ? instance.render() : instance.render && instance.render();
@@ -1574,9 +2025,9 @@ var callRender = (hostRef, instance, elm, isInitialLoad) => {
     if (updatable || lazyLoad) {
       hostRef.$flags$ |= 2 /* hasRendered */;
     }
-    if (BUILD11.hasRenderFn || BUILD11.reflect) {
-      if (BUILD11.vdomRender || BUILD11.reflect) {
-        if (BUILD11.hydrateServerSide) {
+    if (BUILD12.hasRenderFn || BUILD12.reflect) {
+      if (BUILD12.vdomRender || BUILD12.reflect) {
+        if (BUILD12.hydrateServerSide) {
           return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
         } else {
           renderVdom(hostRef, instance, isInitialLoad);
@@ -1601,57 +2052,57 @@ var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
-  const instance = BUILD11.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD12.lazyLoad ? hostRef.$lazyInstance$ : elm;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  if (BUILD11.cmpDidRender) {
-    if (BUILD11.isDev) {
+  if (BUILD12.cmpDidRender) {
+    if (BUILD12.isDev) {
       hostRef.$flags$ |= 1024 /* devOnRender */;
     }
     safeCall(instance, "componentDidRender");
-    if (BUILD11.isDev) {
+    if (BUILD12.isDev) {
       hostRef.$flags$ &= ~1024 /* devOnRender */;
     }
   }
   emitLifecycleEvent(elm, "componentDidRender");
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
-    if (BUILD11.asyncLoading && BUILD11.cssAnnotations) {
+    if (BUILD12.asyncLoading && BUILD12.cssAnnotations) {
       addHydratedFlag(elm);
     }
-    if (BUILD11.cmpDidLoad) {
-      if (BUILD11.isDev) {
+    if (BUILD12.cmpDidLoad) {
+      if (BUILD12.isDev) {
         hostRef.$flags$ |= 2048 /* devOnDidLoad */;
       }
       safeCall(instance, "componentDidLoad");
-      if (BUILD11.isDev) {
+      if (BUILD12.isDev) {
         hostRef.$flags$ &= ~2048 /* devOnDidLoad */;
       }
     }
     emitLifecycleEvent(elm, "componentDidLoad");
     endPostUpdate();
-    if (BUILD11.asyncLoading) {
+    if (BUILD12.asyncLoading) {
       hostRef.$onReadyResolve$(elm);
       if (!ancestorComponent) {
         appDidLoad(tagName);
       }
     }
   } else {
-    if (BUILD11.cmpDidUpdate) {
-      if (BUILD11.isDev) {
+    if (BUILD12.cmpDidUpdate) {
+      if (BUILD12.isDev) {
         hostRef.$flags$ |= 1024 /* devOnRender */;
       }
       safeCall(instance, "componentDidUpdate");
-      if (BUILD11.isDev) {
+      if (BUILD12.isDev) {
         hostRef.$flags$ &= ~1024 /* devOnRender */;
       }
     }
     emitLifecycleEvent(elm, "componentDidUpdate");
     endPostUpdate();
   }
-  if (BUILD11.method && BUILD11.lazyLoad) {
+  if (BUILD12.method && BUILD12.lazyLoad) {
     hostRef.$onInstanceResolve$(elm);
   }
-  if (BUILD11.asyncLoading) {
+  if (BUILD12.asyncLoading) {
     if (hostRef.$onRenderResolve$) {
       hostRef.$onRenderResolve$();
       hostRef.$onRenderResolve$ = void 0;
@@ -1663,7 +2114,7 @@ var postUpdateComponent = (hostRef) => {
   }
 };
 var forceUpdate = (ref) => {
-  if (BUILD11.updatable && (Build.isBrowser || Build.isTesting)) {
+  if (BUILD12.updatable && (Build.isBrowser || Build.isTesting)) {
     const hostRef = getHostRef(ref);
     const isConnected = hostRef.$hostElement$.isConnected;
     if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
@@ -1674,14 +2125,14 @@ var forceUpdate = (ref) => {
   return false;
 };
 var appDidLoad = (who) => {
-  if (BUILD11.cssAnnotations) {
+  if (BUILD12.cssAnnotations) {
     addHydratedFlag(doc.documentElement);
   }
-  if (BUILD11.asyncQueue) {
+  if (BUILD12.asyncQueue) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
-  if (BUILD11.profile && performance.measure) {
+  if (BUILD12.profile && performance.measure) {
     performance.measure(`[Stencil] ${NAMESPACE} initial load (by ${who})`, "st:app:start");
   }
 };
@@ -1696,7 +2147,7 @@ var safeCall = (instance, method, arg) => {
   return void 0;
 };
 var emitLifecycleEvent = (elm, lifecycleName) => {
-  if (BUILD11.lifecycleDOMEvents) {
+  if (BUILD12.lifecycleDOMEvents) {
     emitEvent(elm, "stencil_" + lifecycleName, {
       bubbles: true,
       composed: true,
@@ -1708,7 +2159,7 @@ var emitLifecycleEvent = (elm, lifecycleName) => {
 };
 var addHydratedFlag = (elm) => {
   var _a, _b;
-  return BUILD11.hydratedClass ? elm.classList.add((_a = BUILD11.hydratedSelectorName) != null ? _a : "hydrated") : BUILD11.hydratedAttribute ? elm.setAttribute((_b = BUILD11.hydratedSelectorName) != null ? _b : "hydrated", "") : void 0;
+  return BUILD12.hydratedClass ? elm.classList.add((_a = BUILD12.hydratedSelectorName) != null ? _a : "hydrated") : BUILD12.hydratedAttribute ? elm.setAttribute((_b = BUILD12.hydratedSelectorName) != null ? _b : "hydrated", "") : void 0;
 };
 var serverSideConnected = (elm) => {
   const children = elm.children;
@@ -1727,21 +2178,21 @@ var serverSideConnected = (elm) => {
 var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 var setValue = (ref, propName, newVal, cmpMeta) => {
   const hostRef = getHostRef(ref);
-  if (BUILD12.lazyLoad && !hostRef) {
+  if (BUILD13.lazyLoad && !hostRef) {
     throw new Error(
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
     );
   }
-  const elm = BUILD12.lazyLoad ? hostRef.$hostElement$ : ref;
+  const elm = BUILD13.lazyLoad ? hostRef.$hostElement$ : ref;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
-  const instance = BUILD12.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD13.lazyLoad ? hostRef.$lazyInstance$ : elm;
   newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
   const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
   const didValueChange = newVal !== oldVal && !areBothNaN;
-  if ((!BUILD12.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
+  if ((!BUILD13.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
-    if (BUILD12.isDev) {
+    if (BUILD13.isDev) {
       if (hostRef.$flags$ & 1024 /* devOnRender */) {
         consoleDevWarn(
           `The state/prop "${propName}" changed during rendering. This can potentially lead to infinite-loops and other bugs.`,
@@ -1764,8 +2215,8 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
         );
       }
     }
-    if (!BUILD12.lazyLoad || instance) {
-      if (BUILD12.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+    if (!BUILD13.lazyLoad || instance) {
+      if (BUILD13.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
         const watchMethods = cmpMeta.$watchers$[propName];
         if (watchMethods) {
           watchMethods.map((watchMethodName) => {
@@ -1777,8 +2228,8 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
           });
         }
       }
-      if (BUILD12.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
-        if (BUILD12.cmpShouldUpdate && instance.componentShouldUpdate) {
+      if (BUILD13.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+        if (BUILD13.cmpShouldUpdate && instance.componentShouldUpdate) {
           if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
             return;
           }
@@ -1793,59 +2244,105 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
-  if (BUILD13.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
+  if (BUILD14.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
     FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach((cbName) => {
       const originalFormAssociatedCallback = prototype[cbName];
       Object.defineProperty(prototype, cbName, {
         value(...args) {
           const hostRef = getHostRef(this);
-          const instance = BUILD13.lazyLoad ? hostRef.$lazyInstance$ : this;
+          const instance = BUILD14.lazyLoad ? hostRef.$lazyInstance$ : this;
           if (!instance) {
             hostRef.$onReadyPromise$.then((asyncInstance) => {
               const cb = asyncInstance[cbName];
               typeof cb === "function" && cb.call(asyncInstance, ...args);
             });
           } else {
-            const cb = BUILD13.lazyLoad ? instance[cbName] : originalFormAssociatedCallback;
+            const cb = BUILD14.lazyLoad ? instance[cbName] : originalFormAssociatedCallback;
             typeof cb === "function" && cb.call(instance, ...args);
           }
         }
       });
     });
   }
-  if (BUILD13.member && cmpMeta.$members$ || BUILD13.watchCallback && (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (BUILD13.watchCallback && Cstr.watchers && !cmpMeta.$watchers$) {
+  if (BUILD14.member && cmpMeta.$members$ || BUILD14.watchCallback && (cmpMeta.$watchers$ || Cstr.watchers)) {
+    if (BUILD14.watchCallback && Cstr.watchers && !cmpMeta.$watchers$) {
       cmpMeta.$watchers$ = Cstr.watchers;
     }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
-      if ((BUILD13.prop || BUILD13.state) && (memberFlags & 31 /* Prop */ || (!BUILD13.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
-        Object.defineProperty(prototype, memberName, {
-          get() {
-            return getValue(this, memberName);
-          },
-          set(newValue) {
-            if (BUILD13.isDev) {
-              const ref = getHostRef(this);
-              if (
-                // we are proxying the instance (not element)
-                (flags & 1 /* isElementConstructor */) === 0 && // the element is not constructing
-                (ref && ref.$flags$ & 8 /* isConstructingInstance */) === 0 && // the member is a prop
-                (memberFlags & 31 /* Prop */) !== 0 && // the member is not mutable
-                (memberFlags & 1024 /* Mutable */) === 0
-              ) {
-                consoleDevWarn(
-                  `@Prop() "${memberName}" on <${cmpMeta.$tagName$}> is immutable but was modified from within the component.
+      if ((BUILD14.prop || BUILD14.state) && (memberFlags & 31 /* Prop */ || (!BUILD14.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
+        if ((memberFlags & 2048 /* Getter */) === 0) {
+          Object.defineProperty(prototype, memberName, {
+            get() {
+              return getValue(this, memberName);
+            },
+            set(newValue) {
+              if (BUILD14.isDev) {
+                const ref = getHostRef(this);
+                if (
+                  // we are proxying the instance (not element)
+                  (flags & 1 /* isElementConstructor */) === 0 && // the element is not constructing
+                  (ref && ref.$flags$ & 8 /* isConstructingInstance */) === 0 && // the member is a prop
+                  (memberFlags & 31 /* Prop */) !== 0 && // the member is not mutable
+                  (memberFlags & 1024 /* Mutable */) === 0
+                ) {
+                  consoleDevWarn(
+                    `@Prop() "${memberName}" on <${cmpMeta.$tagName$}> is immutable but was modified from within the component.
 More information: https://stenciljs.com/docs/properties#prop-mutability`
-                );
+                  );
+                }
               }
-            }
-            setValue(this, memberName, newValue, cmpMeta);
-          },
-          configurable: true,
-          enumerable: true
-        });
-      } else if (BUILD13.lazyLoad && BUILD13.method && flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
+              setValue(this, memberName, newValue, cmpMeta);
+            },
+            configurable: true,
+            enumerable: true
+          });
+        } else if (flags & 1 /* isElementConstructor */ && memberFlags & 2048 /* Getter */) {
+          if (BUILD14.lazyLoad) {
+            Object.defineProperty(prototype, memberName, {
+              get() {
+                const ref = getHostRef(this);
+                const instance = BUILD14.lazyLoad && ref ? ref.$lazyInstance$ : prototype;
+                if (!instance) return;
+                return instance[memberName];
+              },
+              configurable: true,
+              enumerable: true
+            });
+          }
+          if (memberFlags & 4096 /* Setter */) {
+            const origSetter = Object.getOwnPropertyDescriptor(prototype, memberName).set;
+            Object.defineProperty(prototype, memberName, {
+              set(newValue) {
+                const ref = getHostRef(this);
+                if (origSetter) {
+                  const currentValue = ref.$hostElement$[memberName];
+                  if (!ref.$instanceValues$.get(memberName) && currentValue) {
+                    ref.$instanceValues$.set(memberName, currentValue);
+                  }
+                  origSetter.apply(this, [parsePropertyValue(newValue, cmpMeta.$members$[memberName][0])]);
+                  setValue(this, memberName, ref.$hostElement$[memberName], cmpMeta);
+                  return;
+                }
+                if (!ref) return;
+                const setterSetVal = () => {
+                  const currentValue = ref.$lazyInstance$[memberName];
+                  if (!ref.$instanceValues$.get(memberName) && currentValue) {
+                    ref.$instanceValues$.set(memberName, currentValue);
+                  }
+                  ref.$lazyInstance$[memberName] = parsePropertyValue(newValue, cmpMeta.$members$[memberName][0]);
+                  setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
+                };
+                if (ref.$lazyInstance$) {
+                  setterSetVal();
+                } else {
+                  ref.$onReadyPromise$.then(() => setterSetVal());
+                }
+              }
+            });
+          }
+        }
+      } else if (BUILD14.lazyLoad && BUILD14.method && flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
         Object.defineProperty(prototype, memberName, {
           value(...args) {
             var _a2;
@@ -1858,7 +2355,7 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
         });
       }
     });
-    if (BUILD13.observeAttribute && (!BUILD13.lazyLoad || flags & 1 /* isElementConstructor */)) {
+    if (BUILD14.observeAttribute && (!BUILD14.lazyLoad || flags & 1 /* isElementConstructor */)) {
       const attrNameToPropName = /* @__PURE__ */ new Map();
       prototype.attributeChangedCallback = function(attrName, oldValue, newValue) {
         plt.jmp(() => {
@@ -1874,8 +2371,8 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             const hostRef = getHostRef(this);
             const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
             if (flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
-              const elm = BUILD13.lazyLoad ? hostRef.$hostElement$ : this;
-              const instance = BUILD13.lazyLoad ? hostRef.$lazyInstance$ : elm;
+              const elm = BUILD14.lazyLoad ? hostRef.$hostElement$ : this;
+              const instance = BUILD14.lazyLoad ? hostRef.$lazyInstance$ : elm;
               const entry = (_a2 = cmpMeta.$watchers$) == null ? void 0 : _a2[attrName];
               entry == null ? void 0 : entry.forEach((callbackName) => {
                 if (instance[callbackName] != null) {
@@ -1885,7 +2382,10 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             }
             return;
           }
-          this[propName] = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
+          const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
+          if (!propDesc.get || !!propDesc.set) {
+            this[propName] = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
+          }
         });
       };
       Cstr.observedAttributes = Array.from(
@@ -1895,7 +2395,7 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
-            if (BUILD13.reflect && m[0] & 512 /* ReflectAttr */) {
+            if (BUILD14.reflect && m[0] & 512 /* ReflectAttr */) {
               (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
             }
             return attrName;
@@ -1913,7 +2413,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
     hostRef.$flags$ |= 32 /* hasInitializedComponent */;
     const bundleId = cmpMeta.$lazyBundleId$;
-    if ((BUILD14.lazyLoad || BUILD14.hydrateClientSide) && bundleId) {
+    if ((BUILD15.lazyLoad || BUILD15.hydrateClientSide) && bundleId) {
       const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
       if (CstrImport && "then" in CstrImport) {
         const endLoad = uniqueTime(
@@ -1928,15 +2428,15 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       if (!Cstr) {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
-      if (BUILD14.member && !Cstr.isProxied) {
-        if (BUILD14.watchCallback) {
+      if (BUILD15.member && !Cstr.isProxied) {
+        if (BUILD15.watchCallback) {
           cmpMeta.$watchers$ = Cstr.watchers;
         }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
       const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
-      if (BUILD14.member) {
+      if (BUILD15.member) {
         hostRef.$flags$ |= 8 /* isConstructingInstance */;
       }
       try {
@@ -1944,10 +2444,10 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       } catch (e) {
         consoleError(e);
       }
-      if (BUILD14.member) {
+      if (BUILD15.member) {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
-      if (BUILD14.watchCallback) {
+      if (BUILD15.watchCallback) {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
@@ -1957,24 +2457,24 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       const cmpTag = elm.localName;
       customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
     }
-    if (BUILD14.style && Cstr && Cstr.style) {
+    if (BUILD15.style && Cstr && Cstr.style) {
       let style;
       if (typeof Cstr.style === "string") {
         style = Cstr.style;
-      } else if (BUILD14.mode && typeof Cstr.style !== "string") {
+      } else if (BUILD15.mode && typeof Cstr.style !== "string") {
         hostRef.$modeName$ = computeMode(elm);
         if (hostRef.$modeName$) {
           style = Cstr.style[hostRef.$modeName$];
         }
-        if (BUILD14.hydrateServerSide && hostRef.$modeName$) {
+        if (BUILD15.hydrateServerSide && hostRef.$modeName$) {
           elm.setAttribute("s-mode", hostRef.$modeName$);
         }
       }
       const scopeId2 = getScopeId(cmpMeta, hostRef.$modeName$);
       if (!styles.has(scopeId2)) {
         const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
-        if (!BUILD14.hydrateServerSide && BUILD14.shadowDom && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
-        BUILD14.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
+        if (!BUILD15.hydrateServerSide && BUILD15.shadowDom && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+        BUILD15.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
           style = await import("../client/shadow-css.js").then((m) => m.scopeCss(style, scopeId2));
         }
         registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
@@ -1984,14 +2484,14 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
   const ancestorComponent = hostRef.$ancestorComponent$;
   const schedule = () => scheduleUpdate(hostRef, true);
-  if (BUILD14.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) {
+  if (BUILD15.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) {
     ancestorComponent["s-rc"].push(schedule);
   } else {
     schedule();
   }
 };
 var fireConnectedCallback = (instance) => {
-  if (BUILD14.lazyLoad && BUILD14.connectedCallback) {
+  if (BUILD15.lazyLoad && BUILD15.connectedCallback) {
     safeCall(instance, "connectedCallback");
   }
 };
@@ -2002,38 +2502,41 @@ var connectedCallback = (elm) => {
     const hostRef = getHostRef(elm);
     const cmpMeta = hostRef.$cmpMeta$;
     const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
-    if (BUILD15.hostListenerTargetParent) {
+    if (BUILD16.hostListenerTargetParent) {
       addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
     }
     if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
       hostRef.$flags$ |= 1 /* hasConnected */;
       let hostId;
-      if (BUILD15.hydrateClientSide) {
+      if (BUILD16.hydrateClientSide) {
         hostId = elm.getAttribute(HYDRATE_ID);
         if (hostId) {
-          if (BUILD15.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            const scopeId2 = BUILD15.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(elm.shadowRoot, cmpMeta);
+          if (BUILD16.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            const scopeId2 = BUILD16.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(elm.shadowRoot, cmpMeta);
             elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
+          } else if (BUILD16.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+            const scopeId2 = getScopeId(cmpMeta, BUILD16.mode ? elm.getAttribute("s-mode") : void 0);
+            elm["s-sc"] = scopeId2;
           }
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
       }
-      if (BUILD15.slotRelocation && !hostId) {
-        if (BUILD15.hydrateServerSide || (BUILD15.slot || BUILD15.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+      if (BUILD16.slotRelocation && !hostId) {
+        if (BUILD16.hydrateServerSide || (BUILD16.slot || BUILD16.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
           setContentReference(elm);
         }
       }
-      if (BUILD15.asyncLoading) {
+      if (BUILD16.asyncLoading) {
         let ancestorComponent = elm;
         while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
-          if (BUILD15.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
+          if (BUILD16.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
             attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
             break;
           }
         }
       }
-      if (BUILD15.prop && !BUILD15.hydrateServerSide && cmpMeta.$members$) {
+      if (BUILD16.prop && !BUILD16.hydrateServerSide && cmpMeta.$members$) {
         Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
           if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
             const value = elm[memberName];
@@ -2042,7 +2545,7 @@ var connectedCallback = (elm) => {
           }
         });
       }
-      if (BUILD15.initializeNextTick) {
+      if (BUILD16.initializeNextTick) {
         nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
       } else {
         initializeComponent(elm, hostRef, cmpMeta);
@@ -2060,32 +2563,32 @@ var connectedCallback = (elm) => {
 };
 var setContentReference = (elm) => {
   const contentRefElm = elm["s-cr"] = doc.createComment(
-    BUILD15.isDebug ? `content-ref (host=${elm.localName})` : ""
+    BUILD16.isDebug ? `content-ref (host=${elm.localName})` : ""
   );
   contentRefElm["s-cn"] = true;
   insertBefore(elm, contentRefElm, elm.firstChild);
 };
 
 // src/runtime/disconnected-callback.ts
-import { BUILD as BUILD16 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD17 } from "@stencil/core/internal/app-data";
 var disconnectInstance = (instance) => {
-  if (BUILD16.lazyLoad && BUILD16.disconnectedCallback) {
+  if (BUILD17.lazyLoad && BUILD17.disconnectedCallback) {
     safeCall(instance, "disconnectedCallback");
   }
-  if (BUILD16.cmpDidUnload) {
+  if (BUILD17.cmpDidUnload) {
     safeCall(instance, "componentDidUnload");
   }
 };
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
-    if (BUILD16.hostListener) {
+    if (BUILD17.hostListener) {
       if (hostRef.$rmListeners$) {
         hostRef.$rmListeners$.map((rmListener) => rmListener());
         hostRef.$rmListeners$ = void 0;
       }
     }
-    if (!BUILD16.lazyLoad) {
+    if (!BUILD17.lazyLoad) {
       disconnectInstance(elm);
     } else if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
       disconnectInstance(hostRef.$lazyInstance$);
@@ -2095,325 +2598,6 @@ var disconnectedCallback = async (elm) => {
   }
 };
 
-// src/runtime/dom-extras.ts
-import { BUILD as BUILD17 } from "@stencil/core/internal/app-data";
-var patchPseudoShadowDom = (hostElementPrototype, descriptorPrototype) => {
-  patchCloneNode(hostElementPrototype);
-  patchSlotAppendChild(hostElementPrototype);
-  patchSlotAppend(hostElementPrototype);
-  patchSlotPrepend(hostElementPrototype);
-  patchSlotInsertAdjacentElement(hostElementPrototype);
-  patchSlotInsertAdjacentHTML(hostElementPrototype);
-  patchSlotInsertAdjacentText(hostElementPrototype);
-  patchTextContent(hostElementPrototype);
-  patchChildSlotNodes(hostElementPrototype, descriptorPrototype);
-  patchSlotRemoveChild(hostElementPrototype);
-};
-var patchCloneNode = (HostElementPrototype) => {
-  const orgCloneNode = HostElementPrototype.cloneNode;
-  HostElementPrototype.cloneNode = function(deep) {
-    const srcNode = this;
-    const isShadowDom = BUILD17.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
-    const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
-    if (BUILD17.slot && !isShadowDom && deep) {
-      let i2 = 0;
-      let slotted, nonStencilNode;
-      const stencilPrivates = [
-        "s-id",
-        "s-cr",
-        "s-lr",
-        "s-rc",
-        "s-sc",
-        "s-p",
-        "s-cn",
-        "s-sr",
-        "s-sn",
-        "s-hn",
-        "s-ol",
-        "s-nr",
-        "s-si",
-        "s-rf",
-        "s-scs"
-      ];
-      for (; i2 < srcNode.childNodes.length; i2++) {
-        slotted = srcNode.childNodes[i2]["s-nr"];
-        nonStencilNode = stencilPrivates.every((privateField) => !srcNode.childNodes[i2][privateField]);
-        if (slotted) {
-          if (BUILD17.appendChildSlotFix && clonedNode.__appendChild) {
-            clonedNode.__appendChild(slotted.cloneNode(true));
-          } else {
-            clonedNode.appendChild(slotted.cloneNode(true));
-          }
-        }
-        if (nonStencilNode) {
-          clonedNode.appendChild(srcNode.childNodes[i2].cloneNode(true));
-        }
-      }
-    }
-    return clonedNode;
-  };
-};
-var patchSlotAppendChild = (HostElementPrototype) => {
-  HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
-  HostElementPrototype.appendChild = function(newChild) {
-    const slotName = newChild["s-sn"] = getSlotName(newChild);
-    const slotNode = getHostSlotNode(this.childNodes, slotName, this.tagName);
-    if (slotNode) {
-      const slotPlaceholder = document.createTextNode("");
-      slotPlaceholder["s-nr"] = newChild;
-      slotNode["s-cr"].parentNode.__appendChild(slotPlaceholder);
-      newChild["s-ol"] = slotPlaceholder;
-      newChild["s-sh"] = slotNode["s-hn"];
-      const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
-      const appendAfter = slotChildNodes[slotChildNodes.length - 1];
-      const insertedNode = insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);
-      updateFallbackSlotVisibility(this);
-      return insertedNode;
-    }
-    return this.__appendChild(newChild);
-  };
-};
-var patchSlotRemoveChild = (ElementPrototype) => {
-  ElementPrototype.__removeChild = ElementPrototype.removeChild;
-  ElementPrototype.removeChild = function(toRemove) {
-    if (toRemove && typeof toRemove["s-sn"] !== "undefined") {
-      const slotNode = getHostSlotNode(this.childNodes, toRemove["s-sn"], this.tagName);
-      if (slotNode) {
-        const slotChildNodes = getHostSlotChildNodes(slotNode, toRemove["s-sn"]);
-        const existingNode = slotChildNodes.find((n) => n === toRemove);
-        if (existingNode) {
-          existingNode.remove();
-          updateFallbackSlotVisibility(this);
-          return;
-        }
-      }
-    }
-    return this.__removeChild(toRemove);
-  };
-};
-var patchSlotPrepend = (HostElementPrototype) => {
-  const originalPrepend = HostElementPrototype.prepend;
-  HostElementPrototype.prepend = function(...newChildren) {
-    newChildren.forEach((newChild) => {
-      if (typeof newChild === "string") {
-        newChild = this.ownerDocument.createTextNode(newChild);
-      }
-      const slotName = newChild["s-sn"] = getSlotName(newChild);
-      const slotNode = getHostSlotNode(this.childNodes, slotName, this.tagName);
-      if (slotNode) {
-        const slotPlaceholder = document.createTextNode("");
-        slotPlaceholder["s-nr"] = newChild;
-        slotNode["s-cr"].parentNode.__appendChild(slotPlaceholder);
-        newChild["s-ol"] = slotPlaceholder;
-        newChild["s-sh"] = slotNode["s-hn"];
-        const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
-        const appendAfter = slotChildNodes[0];
-        return insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);
-      }
-      if (newChild.nodeType === 1 && !!newChild.getAttribute("slot")) {
-        newChild.hidden = true;
-      }
-      return originalPrepend.call(this, newChild);
-    });
-  };
-};
-var patchSlotAppend = (HostElementPrototype) => {
-  HostElementPrototype.append = function(...newChildren) {
-    newChildren.forEach((newChild) => {
-      if (typeof newChild === "string") {
-        newChild = this.ownerDocument.createTextNode(newChild);
-      }
-      this.appendChild(newChild);
-    });
-  };
-};
-var patchSlotInsertAdjacentHTML = (HostElementPrototype) => {
-  const originalInsertAdjacentHtml = HostElementPrototype.insertAdjacentHTML;
-  HostElementPrototype.insertAdjacentHTML = function(position, text) {
-    if (position !== "afterbegin" && position !== "beforeend") {
-      return originalInsertAdjacentHtml.call(this, position, text);
-    }
-    const container = this.ownerDocument.createElement("_");
-    let node;
-    container.innerHTML = text;
-    if (position === "afterbegin") {
-      while (node = container.firstChild) {
-        this.prepend(node);
-      }
-    } else if (position === "beforeend") {
-      while (node = container.firstChild) {
-        this.append(node);
-      }
-    }
-  };
-};
-var patchSlotInsertAdjacentText = (HostElementPrototype) => {
-  HostElementPrototype.insertAdjacentText = function(position, text) {
-    this.insertAdjacentHTML(position, text);
-  };
-};
-var patchSlotInsertAdjacentElement = (HostElementPrototype) => {
-  const originalInsertAdjacentElement = HostElementPrototype.insertAdjacentElement;
-  HostElementPrototype.insertAdjacentElement = function(position, element) {
-    if (position !== "afterbegin" && position !== "beforeend") {
-      return originalInsertAdjacentElement.call(this, position, element);
-    }
-    if (position === "afterbegin") {
-      this.prepend(element);
-      return element;
-    } else if (position === "beforeend") {
-      this.append(element);
-      return element;
-    }
-    return element;
-  };
-};
-var patchTextContent = (hostElementPrototype) => {
-  const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, "textContent");
-  Object.defineProperty(hostElementPrototype, "__textContent", descriptor);
-  if (BUILD17.experimentalScopedSlotChanges) {
-    Object.defineProperty(hostElementPrototype, "textContent", {
-      // To mimic shadow root behavior, we need to return the text content of all
-      // nodes in a slot reference node
-      get() {
-        const slotRefNodes = getAllChildSlotNodes(this.childNodes);
-        const textContent = slotRefNodes.map((node) => {
-          var _a, _b;
-          const text = [];
-          let slotContent = node.nextSibling;
-          while (slotContent && slotContent["s-sn"] === node["s-sn"]) {
-            if (slotContent.nodeType === 3 /* TEXT_NODE */ || slotContent.nodeType === 1 /* ELEMENT_NODE */) {
-              text.push((_b = (_a = slotContent.textContent) == null ? void 0 : _a.trim()) != null ? _b : "");
-            }
-            slotContent = slotContent.nextSibling;
-          }
-          return text.filter((ref) => ref !== "").join(" ");
-        }).filter((text) => text !== "").join(" ");
-        return " " + textContent + " ";
-      },
-      // To mimic shadow root behavior, we need to overwrite all nodes in a slot
-      // reference node. If a default slot reference node exists, the text content will be
-      // placed there. Otherwise, the new text node will be hidden
-      set(value) {
-        const slotRefNodes = getAllChildSlotNodes(this.childNodes);
-        slotRefNodes.forEach((node) => {
-          let slotContent = node.nextSibling;
-          while (slotContent && slotContent["s-sn"] === node["s-sn"]) {
-            const tmp = slotContent;
-            slotContent = slotContent.nextSibling;
-            tmp.remove();
-          }
-          if (node["s-sn"] === "") {
-            const textNode = this.ownerDocument.createTextNode(value);
-            textNode["s-sn"] = "";
-            insertBefore(node.parentElement, textNode, node.nextSibling);
-          } else {
-            node.remove();
-          }
-        });
-      }
-    });
-  } else {
-    Object.defineProperty(hostElementPrototype, "textContent", {
-      get() {
-        var _a;
-        const slotNode = getHostSlotNode(this.childNodes, "", this.tagName);
-        if (((_a = slotNode == null ? void 0 : slotNode.nextSibling) == null ? void 0 : _a.nodeType) === 3 /* TEXT_NODE */) {
-          return slotNode.nextSibling.textContent;
-        } else if (slotNode) {
-          return slotNode.textContent;
-        } else {
-          return this.__textContent;
-        }
-      },
-      set(value) {
-        var _a;
-        const slotNode = getHostSlotNode(this.childNodes, "", this.tagName);
-        if (((_a = slotNode == null ? void 0 : slotNode.nextSibling) == null ? void 0 : _a.nodeType) === 3 /* TEXT_NODE */) {
-          slotNode.nextSibling.textContent = value;
-        } else if (slotNode) {
-          slotNode.textContent = value;
-        } else {
-          this.__textContent = value;
-          const contentRefElm = this["s-cr"];
-          if (contentRefElm) {
-            insertBefore(this, contentRefElm, this.firstChild);
-          }
-        }
-      }
-    });
-  }
-};
-var patchChildSlotNodes = (elm, cmpMeta) => {
-  class FakeNodeList extends Array {
-    item(n) {
-      return this[n];
-    }
-  }
-  if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
-    const childNodesFn = elm.__lookupGetter__("childNodes");
-    Object.defineProperty(elm, "children", {
-      get() {
-        return this.childNodes.map((n) => n.nodeType === 1);
-      }
-    });
-    Object.defineProperty(elm, "childElementCount", {
-      get() {
-        return elm.children.length;
-      }
-    });
-    Object.defineProperty(elm, "childNodes", {
-      get() {
-        const childNodes = childNodesFn.call(this);
-        if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0 && getHostRef(this).$flags$ & 2 /* hasRendered */) {
-          const result = new FakeNodeList();
-          for (let i2 = 0; i2 < childNodes.length; i2++) {
-            const slot = childNodes[i2]["s-nr"];
-            if (slot) {
-              result.push(slot);
-            }
-          }
-          return result;
-        }
-        return FakeNodeList.from(childNodes);
-      }
-    });
-  }
-};
-var getAllChildSlotNodes = (childNodes) => {
-  const slotRefNodes = [];
-  for (const childNode of Array.from(childNodes)) {
-    if (childNode["s-sr"]) {
-      slotRefNodes.push(childNode);
-    }
-    slotRefNodes.push(...getAllChildSlotNodes(childNode.childNodes));
-  }
-  return slotRefNodes;
-};
-var getSlotName = (node) => node["s-sn"] || node.nodeType === 1 && node.getAttribute("slot") || "";
-var getHostSlotNode = (childNodes, slotName, hostName) => {
-  let i2 = 0;
-  let childNode;
-  for (; i2 < childNodes.length; i2++) {
-    childNode = childNodes[i2];
-    if (childNode["s-sr"] && childNode["s-sn"] === slotName && childNode["s-hn"] === hostName) {
-      return childNode;
-    }
-    childNode = getHostSlotNode(childNode.childNodes, slotName, hostName);
-    if (childNode) {
-      return childNode;
-    }
-  }
-  return null;
-};
-var getHostSlotChildNodes = (n, slotName) => {
-  const childNodes = [n];
-  while ((n = n.nextSibling) && n["s-sn"] === slotName) {
-    childNodes.push(n);
-  }
-  return childNodes;
-};
-
 // src/runtime/bootstrap-custom-element.ts
 var defineCustomElement = (Cstr, compactMeta) => {
   customElements.define(compactMeta[1], proxyCustomElement(Cstr, compactMeta));
@@ -2440,11 +2624,11 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   }
   if (BUILD18.experimentalSlotFixes) {
     if (BUILD18.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
-      patchPseudoShadowDom(Cstr.prototype, cmpMeta);
+      patchPseudoShadowDom(Cstr.prototype);
     }
   } else {
     if (BUILD18.slotChildNodesFix) {
-      patchChildSlotNodes(Cstr.prototype, cmpMeta);
+      patchChildSlotNodes(Cstr.prototype);
     }
     if (BUILD18.cloneNodeFix) {
       patchCloneNode(Cstr.prototype);
@@ -2458,16 +2642,16 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   }
   const originalConnectedCallback = Cstr.prototype.connectedCallback;
   const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
-  let hasHostListenerAttached = false;
   Object.assign(Cstr.prototype, {
+    __hasHostListenerAttached: false,
     __registerHost() {
       registerHost(this, cmpMeta);
     },
     connectedCallback() {
-      if (!hasHostListenerAttached) {
+      if (!this.__hasHostListenerAttached) {
         const hostRef = getHostRef(this);
         addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
-        hasHostListenerAttached = true;
+        this.__hasHostListenerAttached = true;
       }
       connectedCallback(this);
       if (BUILD18.connectedCallback && originalConnectedCallback) {
@@ -2650,11 +2834,11 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       };
       if (BUILD19.experimentalSlotFixes) {
         if (BUILD19.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
-          patchPseudoShadowDom(HostElement.prototype, cmpMeta);
+          patchPseudoShadowDom(HostElement.prototype);
         }
       } else {
         if (BUILD19.slotChildNodesFix) {
-          patchChildSlotNodes(HostElement.prototype, cmpMeta);
+          patchChildSlotNodes(HostElement.prototype);
         }
         if (BUILD19.cloneNodeFix) {
           patchCloneNode(HostElement.prototype);
@@ -2789,6 +2973,9 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
           childId = `${hostId}.${nodeId}`;
           if (nodeRef.nodeType === 1 /* ElementNode */) {
             nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);
+            if (typeof nodeRef["s-sn"] === "string" && !nodeRef.getAttribute("slot")) {
+              nodeRef.setAttribute("s-sn", nodeRef["s-sn"]);
+            }
           } else if (nodeRef.nodeType === 3 /* TextNode */) {
             if (hostId === 0) {
               const textContent = (_a = nodeRef.nodeValue) == null ? void 0 : _a.trim();
@@ -2800,6 +2987,10 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
             const commentBeforeTextNode = doc2.createComment(childId);
             commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;
             insertBefore(nodeRef.parentNode, commentBeforeTextNode, nodeRef);
+          } else if (nodeRef.nodeType === 8 /* CommentNode */) {
+            const commentBeforeTextNode = doc2.createComment(childId);
+            commentBeforeTextNode.nodeValue = `${COMMENT_NODE_ID}.${childId}`;
+            nodeRef.parentNode.insertBefore(commentBeforeTextNode, nodeRef);
           }
         }
         let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`;
@@ -2880,6 +3071,9 @@ var insertChildVNodeAnnotations = (doc2, vnodeChild, cmpData, hostId, depth, ind
   childElm["s-node-id"] = nodeId;
   if (childElm.nodeType === 1 /* ElementNode */) {
     childElm.setAttribute(HYDRATE_CHILD_ID, childId);
+    if (typeof childElm["s-sn"] === "string" && !childElm.getAttribute("slot")) {
+      childElm.setAttribute("s-sn", childElm["s-sn"]);
+    }
   } else if (childElm.nodeType === 3 /* TextNode */) {
     const parentNode = childElm.parentNode;
     const nodeName = parentNode == null ? void 0 : parentNode.nodeName;