@stencil/core 4.32.0 → 4.33.0

package/internal/hydrate/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Hydrate Platform v4.32.0 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.33.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -73,7 +73,7 @@ var getAssetPath = (path) => {
 var setAssetPath = (path) => plt.$resourcesUrl$ = path;
 
 // src/runtime/bootstrap-custom-element.ts
-import { BUILD as BUILD20 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD21 } from "@stencil/core/internal/app-data";
 
 // src/utils/helpers.ts
 var isDef = (v) => v != null && v !== void 0;
@@ -245,6 +245,19 @@ function deserializeProperty(value) {
   return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
 }
 
+// src/utils/shadow-root.ts
+import { BUILD as BUILD2 } from "@stencil/core/internal/app-data";
+import { globalStyles } from "@stencil/core/internal/app-globals";
+function createShadowRoot(cmpMeta) {
+  const shadowRoot = BUILD2.shadowDelegatesFocus ? this.attachShadow({
+    mode: "open",
+    delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
+  }) : this.attachShadow({ mode: "open" });
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(globalStyles);
+  shadowRoot.adoptedStyleSheets.push(sheet);
+}
+
 // src/utils/util.ts
 var lowerPathParam = (fn) => (p) => fn(p.toLowerCase());
 var isDtsFile = lowerPathParam((p) => p.endsWith(".d.ts") || p.endsWith(".d.mts") || p.endsWith(".d.cts"));
@@ -260,16 +273,16 @@ var isJsxFile = lowerPathParam(
 var isJsFile = lowerPathParam((p) => p.endsWith(".js") || p.endsWith(".mjs") || p.endsWith(".cjs"));
 
 // src/runtime/connected-callback.ts
-import { BUILD as BUILD18 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD19 } from "@stencil/core/internal/app-data";
 
 // src/runtime/client-hydrate.ts
-import { BUILD as BUILD6 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD7 } from "@stencil/core/internal/app-data";
 
 // src/runtime/dom-extras.ts
-import { BUILD as BUILD3 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD4 } from "@stencil/core/internal/app-data";
 
 // src/runtime/slot-polyfill-utils.ts
-import { BUILD as BUILD2 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD3 } from "@stencil/core/internal/app-data";
 
 // src/runtime/runtime-constants.ts
 var CONTENT_REF_ID = "r";
@@ -375,7 +388,7 @@ var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
   if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
   const parent = slotNode["s-cr"].parentNode;
   const appendMethod = prepend ? internalCall(parent, "prepend") : internalCall(parent, "appendChild");
-  if (BUILD2.hydrateClientSide && typeof position !== "undefined") {
+  if (BUILD3.hydrateClientSide && typeof position !== "undefined") {
     slottedNodeLocation["s-oo"] = position;
     const childNodes = internalCall(parent, "childNodes");
     const slotRelocateNodes = [slottedNodeLocation];
@@ -453,9 +466,9 @@ var patchCloneNode = (HostElementPrototype) => {
   const orgCloneNode = HostElementPrototype.cloneNode;
   HostElementPrototype.cloneNode = function(deep) {
     const srcNode = this;
-    const isShadowDom = BUILD3.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
+    const isShadowDom = BUILD4.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
     const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
-    if (BUILD3.slot && !isShadowDom && deep) {
+    if (BUILD4.slot && !isShadowDom && deep) {
       let i2 = 0;
       let slotted, nonStencilNode;
       const stencilPrivates = [
@@ -480,7 +493,7 @@ var patchCloneNode = (HostElementPrototype) => {
         slotted = childNodes[i2]["s-nr"];
         nonStencilNode = stencilPrivates.every((privateField) => !childNodes[i2][privateField]);
         if (slotted) {
-          if (BUILD3.appendChildSlotFix && clonedNode.__appendChild) {
+          if (BUILD4.appendChildSlotFix && clonedNode.__appendChild) {
             clonedNode.__appendChild(slotted.cloneNode(true));
           } else {
             clonedNode.appendChild(slotted.cloneNode(true));
@@ -812,10 +825,10 @@ function internalCall(node, method) {
 }
 
 // src/runtime/profile.ts
-import { BUILD as BUILD4 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD5 } from "@stencil/core/internal/app-data";
 var i = 0;
 var createTime = (fnName, tagName = "") => {
-  if (BUILD4.profile && performance.mark) {
+  if (BUILD5.profile && performance.mark) {
     const key = `st:${fnName}:${tagName}:${i++}`;
     performance.mark(key);
     return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);
@@ -826,7 +839,7 @@ var createTime = (fnName, tagName = "") => {
   }
 };
 var uniqueTime = (key, measureText) => {
-  if (BUILD4.profile && performance.mark) {
+  if (BUILD5.profile && performance.mark) {
     if (performance.getEntriesByName(key, "mark").length === 0) {
       performance.mark(key);
     }
@@ -884,7 +897,7 @@ var inspect = (ref) => {
   };
 };
 var installDevTools = () => {
-  if (BUILD4.devTools) {
+  if (BUILD5.devTools) {
     const stencil = win.stencil = win.stencil || {};
     const originalInspect = stencil.inspect;
     stencil.inspect = (ref) => {
@@ -898,7 +911,7 @@ var installDevTools = () => {
 };
 
 // src/runtime/vdom/h.ts
-import { BUILD as BUILD5 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD6 } from "@stencil/core/internal/app-data";
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -914,7 +927,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 (BUILD5.isDev && typeof nodeName !== "function" && child.$flags$ === void 0) {
+        } else if (BUILD6.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.`);
@@ -930,28 +943,28 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
   };
   walk(children);
   if (vnodeData) {
-    if (BUILD5.isDev && nodeName === "input") {
+    if (BUILD6.isDev && nodeName === "input") {
       validateInputProperties(vnodeData);
     }
-    if (BUILD5.vdomKey && vnodeData.key) {
+    if (BUILD6.vdomKey && vnodeData.key) {
       key = vnodeData.key;
     }
-    if (BUILD5.slotRelocation && vnodeData.name) {
+    if (BUILD6.slotRelocation && vnodeData.name) {
       slotName = vnodeData.name;
     }
-    if (BUILD5.vdomClass) {
+    if (BUILD6.vdomClass) {
       const classData = vnodeData.className || vnodeData.class;
       if (classData) {
         vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" ");
       }
     }
   }
-  if (BUILD5.isDev && vNodeChildren.some(isHost)) {
+  if (BUILD6.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 (BUILD5.vdomFunctional && typeof nodeName === "function") {
+  if (BUILD6.vdomFunctional && typeof nodeName === "function") {
     return nodeName(
       vnodeData === null ? {} : vnodeData,
       vNodeChildren,
@@ -963,10 +976,10 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
   if (vNodeChildren.length > 0) {
     vnode.$children$ = vNodeChildren;
   }
-  if (BUILD5.vdomKey) {
+  if (BUILD6.vdomKey) {
     vnode.$key$ = key;
   }
-  if (BUILD5.slotRelocation) {
+  if (BUILD6.slotRelocation) {
     vnode.$name$ = slotName;
   }
   return vnode;
@@ -979,13 +992,13 @@ var newVNode = (tag, text) => {
     $elm$: null,
     $children$: null
   };
-  if (BUILD5.vdomAttribute) {
+  if (BUILD6.vdomAttribute) {
     vnode.$attrs$ = null;
   }
-  if (BUILD5.vdomKey) {
+  if (BUILD6.vdomKey) {
     vnode.$key$ = null;
   }
-  if (BUILD5.slotRelocation) {
+  if (BUILD6.slotRelocation) {
     vnode.$name$ = null;
   }
   return vnode;
@@ -1045,7 +1058,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const childRenderNodes = [];
   const slotNodes = [];
   const slottedNodes = [];
-  const shadowRootNodes = BUILD6.shadowDom && shadowRoot ? [] : null;
+  const shadowRootNodes = BUILD7.shadowDom && shadowRoot ? [] : null;
   const vnode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
   const members = Object.entries(((_a = hostRef.$cmpMeta$) == null ? void 0 : _a.$members$) || {});
@@ -1062,7 +1075,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     }
   });
   let scopeId2;
-  if (BUILD6.scoped) {
+  if (BUILD7.scoped) {
     const cmpMeta = hostRef.$cmpMeta$;
     if (cmpMeta && cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */ && hostElm["s-sc"]) {
       scopeId2 = hostElm["s-sc"];
@@ -1151,7 +1164,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
           slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
         }
         addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
-        if (BUILD6.experimentalSlotFixes) {
+        if (BUILD7.experimentalSlotFixes) {
           patchSlottedNode(slottedItem.node);
         }
       }
@@ -1160,12 +1173,12 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
     }
   }
-  if (BUILD6.scoped && scopeId2 && slotNodes.length) {
+  if (BUILD7.scoped && scopeId2 && slotNodes.length) {
     slotNodes.forEach((slot) => {
       slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
     });
   }
-  if (BUILD6.shadowDom && shadowRoot && !shadowRoot.childNodes.length) {
+  if (BUILD7.shadowDom && shadowRoot && !shadowRoot.childNodes.length) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
     if (rnLen) {
@@ -1215,7 +1228,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         if (!parentVNode.$children$) {
           parentVNode.$children$ = [];
         }
-        if (BUILD6.scoped && scopeId2) {
+        if (BUILD7.scoped && scopeId2) {
           node["s-si"] = scopeId2;
           childVNode.$attrs$.class += " " + scopeId2;
         }
@@ -1233,7 +1246,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
               shadowRootNodes,
               slottedNodes
             );
-            if (BUILD6.scoped && scopeId2) {
+            if (BUILD7.scoped && scopeId2) {
               node.classList.add(scopeId2);
             }
           }
@@ -1330,9 +1343,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
             slottedNodes
           );
         } else if (childNodeType === CONTENT_REF_ID) {
-          if (BUILD6.shadowDom && shadowRootNodes) {
+          if (BUILD7.shadowDom && shadowRootNodes) {
             node.remove();
-          } else if (BUILD6.slotRelocation) {
+          } else if (BUILD7.slotRelocation) {
             hostElm["s-cr"] = node;
             node["s-cn"] = true;
           }
@@ -1398,7 +1411,7 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
   childVNode.$name$ = slotName || null;
   childVNode.$tag$ = "slot";
   const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
-  if (BUILD6.shadowDom && shadowRootNodes && win.document) {
+  if (BUILD7.shadowDom && shadowRootNodes && win.document) {
     const slot = childVNode.$elm$ = win.document.createElement(childVNode.$tag$);
     if (childVNode.$name$) {
       childVNode.$elm$.setAttribute("name", slotName);
@@ -1447,7 +1460,7 @@ var findCorrespondingNode = (node, type) => {
 };
 
 // src/runtime/initialize-component.ts
-import { BUILD as BUILD17 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD18 } from "@stencil/core/internal/app-data";
 
 // src/utils/shadow-css.ts
 /**
@@ -1822,33 +1835,33 @@ var setMode = (handler) => modeResolutionChain.push(handler);
 var getMode = (ref) => getHostRef(ref).$modeName$;
 
 // src/runtime/proxy-component.ts
-import { BUILD as BUILD16 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD17 } from "@stencil/core/internal/app-data";
 
 // src/runtime/set-value.ts
-import { BUILD as BUILD15 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD16 } from "@stencil/core/internal/app-data";
 
 // src/runtime/parse-property-value.ts
-import { BUILD as BUILD7 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD8 } from "@stencil/core/internal/app-data";
 var parsePropertyValue = (propValue, propType) => {
-  if ((BUILD7.hydrateClientSide || BUILD7.hydrateServerSide) && typeof propValue === "string" && (propValue.startsWith("{") && propValue.endsWith("}") || propValue.startsWith("[") && propValue.endsWith("]"))) {
+  if ((BUILD8.hydrateClientSide || BUILD8.hydrateServerSide) && typeof propValue === "string" && (propValue.startsWith("{") && propValue.endsWith("}") || propValue.startsWith("[") && propValue.endsWith("]"))) {
     try {
       propValue = JSON.parse(propValue);
       return propValue;
     } catch (e) {
     }
   }
-  if ((BUILD7.hydrateClientSide || BUILD7.hydrateServerSide) && typeof propValue === "string" && propValue.startsWith(SERIALIZED_PREFIX)) {
+  if ((BUILD8.hydrateClientSide || BUILD8.hydrateServerSide) && typeof propValue === "string" && propValue.startsWith(SERIALIZED_PREFIX)) {
     propValue = deserializeProperty(propValue);
     return propValue;
   }
   if (propValue != null && !isComplexType(propValue)) {
-    if (BUILD7.propBoolean && propType & 4 /* Boolean */) {
+    if (BUILD8.propBoolean && propType & 4 /* Boolean */) {
       return propValue === "false" ? false : propValue === "" || !!propValue;
     }
-    if (BUILD7.propNumber && propType & 2 /* Number */) {
+    if (BUILD8.propNumber && propType & 2 /* Number */) {
       return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
     }
-    if (BUILD7.propString && propType & 1 /* String */) {
+    if (BUILD8.propString && propType & 1 /* String */) {
       return String(propValue);
     }
     return propValue;
@@ -1857,21 +1870,21 @@ var parsePropertyValue = (propValue, propType) => {
 };
 
 // src/runtime/update-component.ts
-import { BUILD as BUILD14, NAMESPACE } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD15, NAMESPACE } from "@stencil/core/internal/app-data";
 
 // src/runtime/event-emitter.ts
-import { BUILD as BUILD9 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD10 } from "@stencil/core/internal/app-data";
 
 // src/runtime/element.ts
-import { BUILD as BUILD8 } from "@stencil/core/internal/app-data";
-var getElement = (ref) => BUILD8.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
+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 (BUILD9.isDev && !elm.isConnected) {
+      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, {
@@ -1890,7 +1903,7 @@ var emitEvent = (elm, name, opts) => {
 };
 
 // src/runtime/styles.ts
-import { BUILD as BUILD10 } from "@stencil/core/internal/app-data";
+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);
@@ -1910,7 +1923,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
   var _a;
   const scopeId2 = getScopeId(cmpMeta, mode);
   const style = styles.get(scopeId2);
-  if (!BUILD10.attachStyles || !win.document) {
+  if (!BUILD11.attachStyles || !win.document) {
     return scopeId2;
   }
   styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
@@ -1923,7 +1936,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
         rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
       }
       if (!appliedStyles.has(scopeId2)) {
-        if (BUILD10.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
+        if (BUILD11.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
           styleElm.innerHTML = style;
         } else {
           styleElm = document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`) || win.document.createElement("style");
@@ -1932,7 +1945,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           if (nonce != null) {
             styleElm.setAttribute("nonce", nonce);
           }
-          if ((BUILD10.hydrateServerSide || BUILD10.hotModuleReplacement) && (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
+          if ((BUILD11.hydrateServerSide || BUILD11.hotModuleReplacement) && (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
             styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
           }
           if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
@@ -1971,7 +1984,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           appliedStyles.add(scopeId2);
         }
       }
-    } else if (BUILD10.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
+    } else if (BUILD11.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
       styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
     }
   }
@@ -1983,17 +1996,17 @@ var attachStyles = (hostRef) => {
   const flags = cmpMeta.$flags$;
   const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
   const scopeId2 = addStyle(
-    BUILD10.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+    BUILD11.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
     cmpMeta,
     hostRef.$modeName$
   );
-  if ((BUILD10.shadowDom || BUILD10.scoped) && BUILD10.cssAnnotations && flags & 10 /* needsScopedEncapsulation */) {
+  if ((BUILD11.shadowDom || BUILD11.scoped) && BUILD11.cssAnnotations && flags & 10 /* needsScopedEncapsulation */) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
   }
   endAttachStyles();
 };
-var getScopeId = (cmp, mode) => "sc-" + (BUILD10.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
+var getScopeId = (cmp, mode) => "sc-" + (BUILD11.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
 var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
 var hydrateScopedToShadow = () => {
   if (!win.document) {
@@ -2007,24 +2020,24 @@ var hydrateScopedToShadow = () => {
 };
 
 // src/runtime/vdom/vdom-render.ts
-import { BUILD as BUILD13 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD14 } from "@stencil/core/internal/app-data";
 
 // src/runtime/vdom/update-element.ts
-import { BUILD as BUILD12 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD13 } from "@stencil/core/internal/app-data";
 
 // src/runtime/vdom/set-accessor.ts
-import { BUILD as BUILD11 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD12 } from "@stencil/core/internal/app-data";
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
   if (oldValue === newValue) {
     return;
   }
   let isProp = isMemberInElement(elm, memberName);
   let ln = memberName.toLowerCase();
-  if (BUILD11.vdomClass && memberName === "class") {
+  if (BUILD12.vdomClass && memberName === "class") {
     const classList = elm.classList;
     const oldClasses = parseClassList(oldValue);
     let newClasses = parseClassList(newValue);
-    if (BUILD11.hydrateClientSide && elm["s-si"] && initialRender) {
+    if (BUILD12.hydrateClientSide && elm["s-si"] && initialRender) {
       newClasses.push(elm["s-si"]);
       oldClasses.forEach((c) => {
         if (c.startsWith(elm["s-si"])) newClasses.push(c);
@@ -2035,11 +2048,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
     }
-  } else if (BUILD11.vdomStyle && memberName === "style") {
-    if (BUILD11.updatable) {
+  } else if (BUILD12.vdomStyle && memberName === "style") {
+    if (BUILD12.updatable) {
       for (const prop in oldValue) {
         if (!newValue || newValue[prop] == null) {
-          if (!BUILD11.hydrateServerSide && prop.includes("-")) {
+          if (!BUILD12.hydrateServerSide && prop.includes("-")) {
             elm.style.removeProperty(prop);
           } else {
             elm.style[prop] = "";
@@ -2049,19 +2062,19 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     }
     for (const prop in newValue) {
       if (!oldValue || newValue[prop] !== oldValue[prop]) {
-        if (!BUILD11.hydrateServerSide && prop.includes("-")) {
+        if (!BUILD12.hydrateServerSide && prop.includes("-")) {
           elm.style.setProperty(prop, newValue[prop]);
         } else {
           elm.style[prop] = newValue[prop];
         }
       }
     }
-  } else if (BUILD11.vdomKey && memberName === "key") {
-  } else if (BUILD11.vdomRef && memberName === "ref") {
+  } else if (BUILD12.vdomKey && memberName === "key") {
+  } else if (BUILD12.vdomRef && memberName === "ref") {
     if (newValue) {
       newValue(elm);
     }
-  } else if (BUILD11.vdomListener && (BUILD11.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (BUILD12.vdomListener && (BUILD12.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -2079,7 +2092,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         plt.ael(elm, memberName, newValue, capture);
       }
     }
-  } else if (BUILD11.vdomPropOrAttr) {
+  } else if (BUILD12.vdomPropOrAttr) {
     const isComplex = isComplexType(newValue);
     if ((isProp || isComplex && newValue !== null) && !isSvg) {
       try {
@@ -2101,7 +2114,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       }
     }
     let xlink = false;
-    if (BUILD11.vdomXlink) {
+    if (BUILD12.vdomXlink) {
       if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
         memberName = ln;
         xlink = true;
@@ -2109,7 +2122,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     }
     if (newValue == null || newValue === false) {
       if (newValue !== false || elm.getAttribute(memberName) === "") {
-        if (BUILD11.vdomXlink && xlink) {
+        if (BUILD12.vdomXlink && xlink) {
           elm.removeAttributeNS(XLINK_NS, memberName);
         } else {
           elm.removeAttribute(memberName);
@@ -2117,7 +2130,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       }
     } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
       newValue = newValue === true ? "" : newValue;
-      if (BUILD11.vdomXlink && xlink) {
+      if (BUILD12.vdomXlink && xlink) {
         elm.setAttributeNS(XLINK_NS, memberName, newValue);
       } else {
         elm.setAttribute(memberName, newValue);
@@ -2143,7 +2156,7 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
   const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
   const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || {};
   const newVnodeAttrs = newVnode.$attrs$ || {};
-  if (BUILD12.updatable) {
+  if (BUILD13.updatable) {
     for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
       if (!(memberName in newVnodeAttrs)) {
         setAccessor(
@@ -2195,7 +2208,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   let elm;
   let childNode;
   let oldVNode;
-  if (BUILD13.slotRelocation && !useNativeShadowDom) {
+  if (BUILD14.slotRelocation && !useNativeShadowDom) {
     checkSlotRelocate = true;
     if (newVNode2.$tag$ === "slot") {
       newVNode2.$flags$ |= newVNode2.$children$ ? (
@@ -2210,20 +2223,20 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       );
     }
   }
-  if (BUILD13.isDev && newVNode2.$elm$) {
+  if (BUILD14.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 (BUILD13.vdomText && newVNode2.$text$ !== null) {
+  if (BUILD14.vdomText && newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
-  } else if (BUILD13.slotRelocation && newVNode2.$flags$ & 1 /* isSlotReference */) {
-    elm = newVNode2.$elm$ = BUILD13.isDebug || BUILD13.hydrateServerSide ? slotReferenceDebugNode(newVNode2) : win.document.createTextNode("");
-    if (BUILD13.vdomAttribute) {
+  } else if (BUILD14.slotRelocation && newVNode2.$flags$ & 1 /* isSlotReference */) {
+    elm = newVNode2.$elm$ = BUILD14.isDebug || BUILD14.hydrateServerSide ? slotReferenceDebugNode(newVNode2) : win.document.createTextNode("");
+    if (BUILD14.vdomAttribute) {
       updateElement(null, newVNode2, isSvgMode);
     }
   } else {
-    if (BUILD13.svg && !isSvgMode) {
+    if (BUILD14.svg && !isSvgMode) {
       isSvgMode = newVNode2.$tag$ === "svg";
     }
     if (!win.document) {
@@ -2231,19 +2244,19 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
       );
     }
-    elm = newVNode2.$elm$ = BUILD13.svg ? win.document.createElementNS(
+    elm = newVNode2.$elm$ = BUILD14.svg ? win.document.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
-      !useNativeShadowDom && BUILD13.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD14.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     ) : win.document.createElement(
-      !useNativeShadowDom && BUILD13.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD14.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     );
-    if (BUILD13.svg && isSvgMode && newVNode2.$tag$ === "foreignObject") {
+    if (BUILD14.svg && isSvgMode && newVNode2.$tag$ === "foreignObject") {
       isSvgMode = false;
     }
-    if (BUILD13.vdomAttribute) {
+    if (BUILD14.vdomAttribute) {
       updateElement(null, newVNode2, isSvgMode);
     }
-    if ((BUILD13.scoped || BUILD13.hydrateServerSide && 128 /* shadowNeedsScopedCss */) && isDef(scopeId) && elm["s-si"] !== scopeId) {
+    if ((BUILD14.scoped || BUILD14.hydrateServerSide && 128 /* shadowNeedsScopedCss */) && isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
     if (newVNode2.$children$) {
@@ -2254,7 +2267,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         }
       }
     }
-    if (BUILD13.svg) {
+    if (BUILD14.svg) {
       if (newVNode2.$tag$ === "svg") {
         isSvgMode = false;
       } else if (elm.tagName === "foreignObject") {
@@ -2263,7 +2276,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     }
   }
   elm["s-hn"] = hostTagName;
-  if (BUILD13.slotRelocation) {
+  if (BUILD14.slotRelocation) {
     if (newVNode2.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
       elm["s-sr"] = true;
       elm["s-cr"] = contentRef;
@@ -2272,13 +2285,13 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       patchSlotNode(elm);
       oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
       if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
-        if (BUILD13.experimentalSlotFixes) {
+        if (BUILD14.experimentalSlotFixes) {
           relocateToHostRoot(oldParentVNode.$elm$);
         } else {
           putBackInOriginalLocation(oldParentVNode.$elm$, false);
         }
       }
-      if (BUILD13.scoped || BUILD13.hydrateServerSide && 128 /* shadowNeedsScopedCss */) {
+      if (BUILD14.scoped || BUILD14.hydrateServerSide && 128 /* shadowNeedsScopedCss */) {
         addRemoveSlotScopedClass(contentRef, elm, newParentVNode.$elm$, oldParentVNode == null ? void 0 : oldParentVNode.$elm$);
       }
     }
@@ -2308,7 +2321,7 @@ var relocateToHostRoot = (parentElm) => {
 var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ |= 1 /* isTmpDisconnected */;
   const oldSlotChildNodes = Array.from(parentElm.__childNodes || parentElm.childNodes);
-  if (parentElm["s-sr"] && BUILD13.experimentalSlotFixes) {
+  if (parentElm["s-sr"] && BUILD14.experimentalSlotFixes) {
     let node = parentElm;
     while (node = node.nextSibling) {
       if (node && node["s-sn"] === parentElm["s-sn"] && node["s-sh"] === hostTagName) {
@@ -2332,9 +2345,9 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ &= ~1 /* isTmpDisconnected */;
 };
 var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-  let containerElm = BUILD13.slotRelocation && parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
+  let containerElm = BUILD14.slotRelocation && parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
   let childNode;
-  if (BUILD13.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
+  if (BUILD14.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
     containerElm = containerElm.shadowRoot;
   }
   for (; startIdx <= endIdx; ++startIdx) {
@@ -2342,7 +2355,7 @@ var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
       childNode = createElm(null, parentVNode, startIdx);
       if (childNode) {
         vnodes[startIdx].$elm$ = childNode;
-        insertBefore(containerElm, childNode, BUILD13.slotRelocation ? referenceNode(before) : before);
+        insertBefore(containerElm, childNode, BUILD14.slotRelocation ? referenceNode(before) : before);
       }
     }
   }
@@ -2354,7 +2367,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
       const elm = vnode.$elm$;
       nullifyVNodeRefs(vnode);
       if (elm) {
-        if (BUILD13.slotRelocation) {
+        if (BUILD14.slotRelocation) {
           checkSlotFallbackVisibility = true;
           if (elm["s-ol"]) {
             elm["s-ol"].remove();
@@ -2398,7 +2411,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldEndVnode = oldCh[--oldEndIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
-      if (BUILD13.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+      if (BUILD14.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
         putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
       }
       patch(oldStartVnode, newEndVnode, isInitialRender);
@@ -2406,7 +2419,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldStartVnode = oldCh[++oldStartIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
-      if (BUILD13.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+      if (BUILD14.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
         putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
       }
       patch(oldEndVnode, newStartVnode, isInitialRender);
@@ -2415,7 +2428,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       newStartVnode = newCh[++newStartIdx];
     } else {
       idxInOld = -1;
-      if (BUILD13.vdomKey) {
+      if (BUILD14.vdomKey) {
         for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
           if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
             idxInOld = i2;
@@ -2423,7 +2436,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
           }
         }
       }
-      if (BUILD13.vdomKey && idxInOld >= 0) {
+      if (BUILD14.vdomKey && idxInOld >= 0) {
         elmToMove = oldCh[idxInOld];
         if (elmToMove.$tag$ !== newStartVnode.$tag$) {
           node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
@@ -2438,7 +2451,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         newStartVnode = newCh[++newStartIdx];
       }
       if (node) {
-        if (BUILD13.slotRelocation) {
+        if (BUILD14.slotRelocation) {
           insertBefore(
             referenceNode(oldStartVnode.$elm$).parentNode,
             node,
@@ -2459,16 +2472,16 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       newStartIdx,
       newEndIdx
     );
-  } else if (BUILD13.updatable && newStartIdx > newEndIdx) {
+  } else if (BUILD14.updatable && newStartIdx > newEndIdx) {
     removeVnodes(oldCh, oldStartIdx, oldEndIdx);
   }
 };
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
-    if (BUILD13.slotRelocation && leftVNode.$tag$ === "slot") {
+    if (BUILD14.slotRelocation && leftVNode.$tag$ === "slot") {
       return leftVNode.$name$ === rightVNode.$name$;
     }
-    if (BUILD13.vdomKey && !isInitialRender) {
+    if (BUILD14.vdomKey && !isInitialRender) {
       return leftVNode.$key$ === rightVNode.$key$;
     }
     if (isInitialRender && !leftVNode.$key$ && rightVNode.$key$) {
@@ -2486,38 +2499,38 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   let defaultHolder;
-  if (!BUILD13.vdomText || text === null) {
-    if (BUILD13.svg) {
+  if (!BUILD14.vdomText || text === null) {
+    if (BUILD14.svg) {
       isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
     }
-    if (BUILD13.vdomAttribute || BUILD13.reflect) {
-      if (BUILD13.slot && tag === "slot" && !useNativeShadowDom) {
-        if (BUILD13.experimentalSlotFixes && oldVNode.$name$ !== newVNode2.$name$) {
+    if (BUILD14.vdomAttribute || BUILD14.reflect) {
+      if (BUILD14.slot && tag === "slot" && !useNativeShadowDom) {
+        if (BUILD14.experimentalSlotFixes && oldVNode.$name$ !== newVNode2.$name$) {
           newVNode2.$elm$["s-sn"] = newVNode2.$name$ || "";
           relocateToHostRoot(newVNode2.$elm$.parentElement);
         }
       }
       updateElement(oldVNode, newVNode2, isSvgMode, isInitialRender);
     }
-    if (BUILD13.updatable && oldChildren !== null && newChildren !== null) {
+    if (BUILD14.updatable && oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
     } else if (newChildren !== null) {
-      if (BUILD13.updatable && BUILD13.vdomText && oldVNode.$text$ !== null) {
+      if (BUILD14.updatable && BUILD14.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 && BUILD13.updatable && oldChildren !== null
+      !isInitialRender && BUILD14.updatable && oldChildren !== null
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
-    if (BUILD13.svg && isSvgMode && tag === "svg") {
+    if (BUILD14.svg && isSvgMode && tag === "svg") {
       isSvgMode = false;
     }
-  } else if (BUILD13.vdomText && BUILD13.slotRelocation && (defaultHolder = elm["s-cr"])) {
+  } else if (BUILD14.vdomText && BUILD14.slotRelocation && (defaultHolder = elm["s-cr"])) {
     defaultHolder.parentNode.textContent = text;
-  } else if (BUILD13.vdomText && oldVNode.$text$ !== text) {
+  } else if (BUILD14.vdomText && oldVNode.$text$ !== text) {
     elm.data = text;
   }
 };
@@ -2533,7 +2546,7 @@ var markSlotContentForRelocation = (elm) => {
       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"] && (!BUILD13.experimentalSlotFixes || !node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
+        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!BUILD14.experimentalSlotFixes || !node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
           if (isNodeLocatedInSlot(node, slotName)) {
             let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
             checkSlotFallbackVisibility = true;
@@ -2572,15 +2585,15 @@ var markSlotContentForRelocation = (elm) => {
   }
 };
 var nullifyVNodeRefs = (vNode) => {
-  if (BUILD13.vdomRef) {
+  if (BUILD14.vdomRef) {
     vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
     vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
   }
 };
 var insertBefore = (parent, newNode, reference) => {
-  if (BUILD13.scoped && typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
+  if (BUILD14.scoped && typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
     addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
-  } else if (BUILD13.experimentalSlotFixes && typeof newNode["s-sn"] === "string") {
+  } else if (BUILD14.experimentalSlotFixes && typeof newNode["s-sn"] === "string") {
     if (parent.getRootNode().nodeType !== 11 /* DOCUMENT_FRAGMENT_NODE */) {
       patchParentNode(newNode);
     }
@@ -2589,7 +2602,7 @@ var insertBefore = (parent, newNode, reference) => {
     if (slotNode) dispatchSlotChangeEvent(slotNode);
     return newNode;
   }
-  if (BUILD13.experimentalSlotFixes && parent.__insertBefore) {
+  if (BUILD14.experimentalSlotFixes && parent.__insertBefore) {
     return parent.__insertBefore(newNode, reference);
   } else {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
@@ -2624,7 +2637,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const isHostElement = isHost(renderFnResults);
   const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
-  if (BUILD13.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
+  if (BUILD14.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>.
 
@@ -2638,7 +2651,7 @@ render() {
 }
   `);
   }
-  if (BUILD13.reflect && cmpMeta.$attrsToReflect$) {
+  if (BUILD14.reflect && cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
     cmpMeta.$attrsToReflect$.map(
       ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
@@ -2654,24 +2667,24 @@ render() {
   rootVnode.$tag$ = null;
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
-  rootVnode.$elm$ = oldVNode.$elm$ = BUILD13.shadowDom ? hostElm.shadowRoot || hostElm : hostElm;
-  if (BUILD13.scoped || BUILD13.shadowDom) {
+  rootVnode.$elm$ = oldVNode.$elm$ = BUILD14.shadowDom ? hostElm.shadowRoot || hostElm : hostElm;
+  if (BUILD14.scoped || BUILD14.shadowDom) {
     scopeId = hostElm["s-sc"];
   }
   useNativeShadowDom = supportsShadow && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
-  if (BUILD13.slotRelocation) {
+  if (BUILD14.slotRelocation) {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
   }
   patch(oldVNode, rootVnode, isInitialLoad);
-  if (BUILD13.slotRelocation) {
+  if (BUILD14.slotRelocation) {
     plt.$flags$ |= 1 /* isTmpDisconnected */;
     if (checkSlotRelocate) {
       markSlotContentForRelocation(rootVnode.$elm$);
       for (const relocateData of relocateNodes) {
         const nodeToRelocate = relocateData.$nodeToRelocate$;
         if (!nodeToRelocate["s-ol"] && win.document) {
-          const orgLocationNode = BUILD13.isDebug || BUILD13.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : win.document.createTextNode("");
+          const orgLocationNode = BUILD14.isDebug || BUILD14.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : win.document.createTextNode("");
           orgLocationNode["s-nr"] = nodeToRelocate;
           insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
         }
@@ -2682,7 +2695,7 @@ render() {
         if (slotRefNode) {
           const parentNodeRef = slotRefNode.parentNode;
           let insertBeforeNode = slotRefNode.nextSibling;
-          if (!BUILD13.hydrateServerSide && (!BUILD13.experimentalSlotFixes || insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */)) {
+          if (!BUILD14.hydrateServerSide && (!BUILD14.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;
@@ -2703,7 +2716,7 @@ render() {
           const nextSibling = nodeToRelocate.__nextSibling || nodeToRelocate.nextSibling;
           if (!insertBeforeNode && parentNodeRef !== parent || nextSibling !== insertBeforeNode) {
             if (nodeToRelocate !== insertBeforeNode) {
-              if (!BUILD13.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
+              if (!BUILD14.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
                 nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
               }
               insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
@@ -2729,7 +2742,7 @@ render() {
     plt.$flags$ &= ~1 /* isTmpDisconnected */;
     relocateNodes.length = 0;
   }
-  if (BUILD13.experimentalScopedSlotChanges && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+  if (BUILD14.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"]) {
@@ -2757,7 +2770,7 @@ var originalLocationDebugNode = (nodeToRelocate) => {
 
 // src/runtime/update-component.ts
 var attachToAncestor = (hostRef, ancestorComponent) => {
-  if (BUILD14.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
+  if (BUILD15.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
     const index = ancestorComponent["s-p"].push(
       new Promise(
         (r) => hostRef.$onRenderResolve$ = () => {
@@ -2769,21 +2782,21 @@ var attachToAncestor = (hostRef, ancestorComponent) => {
   }
 };
 var scheduleUpdate = (hostRef, isInitialLoad) => {
-  if (BUILD14.taskQueue && BUILD14.updatable) {
+  if (BUILD15.taskQueue && BUILD15.updatable) {
     hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
   }
-  if (BUILD14.asyncLoading && hostRef.$flags$ & 4 /* isWaitingForChildren */) {
+  if (BUILD15.asyncLoading && hostRef.$flags$ & 4 /* isWaitingForChildren */) {
     hostRef.$flags$ |= 512 /* needsRerender */;
     return;
   }
   attachToAncestor(hostRef, hostRef.$ancestorComponent$);
   const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
-  return BUILD14.taskQueue ? writeTask(dispatch) : dispatch();
+  return BUILD15.taskQueue ? writeTask(dispatch) : dispatch();
 };
 var dispatchHooks = (hostRef, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
-  const instance = BUILD14.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD15.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`
@@ -2791,7 +2804,7 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   }
   let maybePromise;
   if (isInitialLoad) {
-    if (BUILD14.lazyLoad && BUILD14.hostListener) {
+    if (BUILD15.lazyLoad && BUILD15.hostListener) {
       hostRef.$flags$ |= 256 /* isListenReady */;
       if (hostRef.$queuedListeners$) {
         hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
@@ -2819,23 +2832,23 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$);
   const rc = elm["s-rc"];
-  if (BUILD14.style && isInitialLoad) {
+  if (BUILD15.style && isInitialLoad) {
     attachStyles(hostRef);
   }
   const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$);
-  if (BUILD14.isDev) {
+  if (BUILD15.isDev) {
     hostRef.$flags$ |= 1024 /* devOnRender */;
   }
-  if (BUILD14.hydrateServerSide) {
+  if (BUILD15.hydrateServerSide) {
     await callRender(hostRef, instance, elm, isInitialLoad);
   } else {
     callRender(hostRef, instance, elm, isInitialLoad);
   }
-  if (BUILD14.isDev) {
+  if (BUILD15.isDev) {
     hostRef.$renderCount$ = hostRef.$renderCount$ === void 0 ? 1 : hostRef.$renderCount$ + 1;
     hostRef.$flags$ &= ~1024 /* devOnRender */;
   }
-  if (BUILD14.hydrateServerSide) {
+  if (BUILD15.hydrateServerSide) {
     try {
       serverSideConnected(elm);
       if (isInitialLoad) {
@@ -2849,13 +2862,13 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
       consoleError(e, elm);
     }
   }
-  if (BUILD14.asyncLoading && rc) {
+  if (BUILD15.asyncLoading && rc) {
     rc.map((cb) => cb());
     elm["s-rc"] = void 0;
   }
   endRender();
   endUpdate();
-  if (BUILD14.asyncLoading) {
+  if (BUILD15.asyncLoading) {
     const childrenPromises = (_a = elm["s-p"]) != null ? _a : [];
     const postUpdate = () => postUpdateComponent(hostRef);
     if (childrenPromises.length === 0) {
@@ -2871,10 +2884,10 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
 };
 var renderingRef = null;
 var callRender = (hostRef, instance, elm, isInitialLoad) => {
-  const allRenderFn = BUILD14.allRenderFn ? true : false;
-  const lazyLoad = BUILD14.lazyLoad ? true : false;
-  const taskQueue = BUILD14.taskQueue ? true : false;
-  const updatable = BUILD14.updatable ? true : false;
+  const allRenderFn = BUILD15.allRenderFn ? true : false;
+  const lazyLoad = BUILD15.lazyLoad ? true : false;
+  const taskQueue = BUILD15.taskQueue ? true : false;
+  const updatable = BUILD15.updatable ? true : false;
   try {
     renderingRef = instance;
     instance = allRenderFn ? instance.render() : instance.render && instance.render();
@@ -2884,9 +2897,9 @@ var callRender = (hostRef, instance, elm, isInitialLoad) => {
     if (updatable || lazyLoad) {
       hostRef.$flags$ |= 2 /* hasRendered */;
     }
-    if (BUILD14.hasRenderFn || BUILD14.reflect) {
-      if (BUILD14.vdomRender || BUILD14.reflect) {
-        if (BUILD14.hydrateServerSide) {
+    if (BUILD15.hasRenderFn || BUILD15.reflect) {
+      if (BUILD15.vdomRender || BUILD15.reflect) {
+        if (BUILD15.hydrateServerSide) {
           return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
         } else {
           renderVdom(hostRef, instance, isInitialLoad);
@@ -2911,51 +2924,51 @@ var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
-  const instance = BUILD14.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD15.lazyLoad ? hostRef.$lazyInstance$ : elm;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  if (BUILD14.isDev) {
+  if (BUILD15.isDev) {
     hostRef.$flags$ |= 1024 /* devOnRender */;
   }
   safeCall(instance, "componentDidRender", void 0, elm);
-  if (BUILD14.isDev) {
+  if (BUILD15.isDev) {
     hostRef.$flags$ &= ~1024 /* devOnRender */;
   }
   emitLifecycleEvent(elm, "componentDidRender");
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
-    if (BUILD14.asyncLoading && BUILD14.cssAnnotations) {
+    if (BUILD15.asyncLoading && BUILD15.cssAnnotations) {
       addHydratedFlag(elm);
     }
-    if (BUILD14.isDev) {
+    if (BUILD15.isDev) {
       hostRef.$flags$ |= 2048 /* devOnDidLoad */;
     }
     safeCall(instance, "componentDidLoad", void 0, elm);
-    if (BUILD14.isDev) {
+    if (BUILD15.isDev) {
       hostRef.$flags$ &= ~2048 /* devOnDidLoad */;
     }
     emitLifecycleEvent(elm, "componentDidLoad");
     endPostUpdate();
-    if (BUILD14.asyncLoading) {
+    if (BUILD15.asyncLoading) {
       hostRef.$onReadyResolve$(elm);
       if (!ancestorComponent) {
         appDidLoad(tagName);
       }
     }
   } else {
-    if (BUILD14.isDev) {
+    if (BUILD15.isDev) {
       hostRef.$flags$ |= 1024 /* devOnRender */;
     }
     safeCall(instance, "componentDidUpdate", void 0, elm);
-    if (BUILD14.isDev) {
+    if (BUILD15.isDev) {
       hostRef.$flags$ &= ~1024 /* devOnRender */;
     }
     emitLifecycleEvent(elm, "componentDidUpdate");
     endPostUpdate();
   }
-  if (BUILD14.method && BUILD14.lazyLoad) {
+  if (BUILD15.method && BUILD15.lazyLoad) {
     hostRef.$onInstanceResolve$(elm);
   }
-  if (BUILD14.asyncLoading) {
+  if (BUILD15.asyncLoading) {
     if (hostRef.$onRenderResolve$) {
       hostRef.$onRenderResolve$();
       hostRef.$onRenderResolve$ = void 0;
@@ -2967,7 +2980,7 @@ var postUpdateComponent = (hostRef) => {
   }
 };
 var forceUpdate = (ref) => {
-  if (BUILD14.updatable && (Build.isBrowser || Build.isTesting)) {
+  if (BUILD15.updatable && (Build.isBrowser || Build.isTesting)) {
     const hostRef = getHostRef(ref);
     const isConnected = hostRef.$hostElement$.isConnected;
     if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
@@ -2978,11 +2991,11 @@ var forceUpdate = (ref) => {
   return false;
 };
 var appDidLoad = (who) => {
-  if (BUILD14.asyncQueue) {
+  if (BUILD15.asyncQueue) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
-  if (BUILD14.profile && performance.measure) {
+  if (BUILD15.profile && performance.measure) {
     performance.measure(`[Stencil] ${NAMESPACE} initial load (by ${who})`, "st:app:start");
   }
 };
@@ -2997,7 +3010,7 @@ var safeCall = (instance, method, arg, elm) => {
   return void 0;
 };
 var emitLifecycleEvent = (elm, lifecycleName) => {
-  if (BUILD14.lifecycleDOMEvents) {
+  if (BUILD15.lifecycleDOMEvents) {
     emitEvent(elm, "stencil_" + lifecycleName, {
       bubbles: true,
       composed: true,
@@ -3009,7 +3022,7 @@ var emitLifecycleEvent = (elm, lifecycleName) => {
 };
 var addHydratedFlag = (elm) => {
   var _a, _b;
-  return BUILD14.hydratedClass ? elm.classList.add((_a = BUILD14.hydratedSelectorName) != null ? _a : "hydrated") : BUILD14.hydratedAttribute ? elm.setAttribute((_b = BUILD14.hydratedSelectorName) != null ? _b : "hydrated", "") : void 0;
+  return BUILD15.hydratedClass ? elm.classList.add((_a = BUILD15.hydratedSelectorName) != null ? _a : "hydrated") : BUILD15.hydratedAttribute ? elm.setAttribute((_b = BUILD15.hydratedSelectorName) != null ? _b : "hydrated", "") : void 0;
 };
 var serverSideConnected = (elm) => {
   const children = elm.children;
@@ -3028,21 +3041,21 @@ var serverSideConnected = (elm) => {
 var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 var setValue = (ref, propName, newVal, cmpMeta) => {
   const hostRef = getHostRef(ref);
-  if (BUILD15.lazyLoad && !hostRef) {
+  if (BUILD16.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/stenciljs/core/issues/5457).`
     );
   }
-  const elm = BUILD15.lazyLoad ? hostRef.$hostElement$ : ref;
+  const elm = BUILD16.lazyLoad ? hostRef.$hostElement$ : ref;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
-  const instance = BUILD15.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD16.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 ((!BUILD15.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
+  if ((!BUILD16.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
-    if (BUILD15.isDev) {
+    if (BUILD16.isDev) {
       if (hostRef.$flags$ & 1024 /* devOnRender */) {
         consoleDevWarn(
           `The state/prop "${propName}" changed during rendering. This can potentially lead to infinite-loops and other bugs.`,
@@ -3065,8 +3078,8 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
         );
       }
     }
-    if (!BUILD15.lazyLoad || instance) {
-      if (BUILD15.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+    if (!BUILD16.lazyLoad || instance) {
+      if (BUILD16.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
         const watchMethods = cmpMeta.$watchers$[propName];
         if (watchMethods) {
           watchMethods.map((watchMethodName) => {
@@ -3078,7 +3091,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
           });
         }
       }
-      if (BUILD15.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+      if (BUILD16.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
         if (instance.componentShouldUpdate) {
           if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
             return;
@@ -3094,46 +3107,46 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
-  if (BUILD16.isTesting) {
+  if (BUILD17.isTesting) {
     if (prototype.__stencilAugmented) {
       return;
     }
     prototype.__stencilAugmented = true;
   }
-  if (BUILD16.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
+  if (BUILD17.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 = BUILD16.lazyLoad ? hostRef.$lazyInstance$ : this;
+          const instance = BUILD17.lazyLoad ? hostRef.$lazyInstance$ : this;
           if (!instance) {
             hostRef.$onReadyPromise$.then((asyncInstance) => {
               const cb = asyncInstance[cbName];
               typeof cb === "function" && cb.call(asyncInstance, ...args);
             });
           } else {
-            const cb = BUILD16.lazyLoad ? instance[cbName] : originalFormAssociatedCallback;
+            const cb = BUILD17.lazyLoad ? instance[cbName] : originalFormAssociatedCallback;
             typeof cb === "function" && cb.call(instance, ...args);
           }
         }
       });
     });
   }
-  if (BUILD16.member && cmpMeta.$members$ || BUILD16.watchCallback && (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (BUILD16.watchCallback && Cstr.watchers && !cmpMeta.$watchers$) {
+  if (BUILD17.member && cmpMeta.$members$ || BUILD17.watchCallback && (cmpMeta.$watchers$ || Cstr.watchers)) {
+    if (BUILD17.watchCallback && Cstr.watchers && !cmpMeta.$watchers$) {
       cmpMeta.$watchers$ = Cstr.watchers;
     }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
-      if ((BUILD16.prop || BUILD16.state) && (memberFlags & 31 /* Prop */ || (!BUILD16.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
+      if ((BUILD17.prop || BUILD17.state) && (memberFlags & 31 /* Prop */ || (!BUILD17.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
         const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(prototype, memberName) || {};
         if (origGetter) cmpMeta.$members$[memberName][0] |= 2048 /* Getter */;
         if (origSetter) cmpMeta.$members$[memberName][0] |= 4096 /* Setter */;
         if (flags & 1 /* isElementConstructor */ || !origGetter) {
           Object.defineProperty(prototype, memberName, {
             get() {
-              if (BUILD16.lazyLoad) {
+              if (BUILD17.lazyLoad) {
                 if ((cmpMeta.$members$[memberName][0] & 2048 /* Getter */) === 0) {
                   return getValue(this, memberName);
                 }
@@ -3142,7 +3155,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
                 if (!instance) return;
                 return instance[memberName];
               }
-              if (!BUILD16.lazyLoad) {
+              if (!BUILD17.lazyLoad) {
                 return origGetter ? origGetter.apply(this) : getValue(this, memberName);
               }
             },
@@ -3153,7 +3166,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         Object.defineProperty(prototype, memberName, {
           set(newValue) {
             const ref = getHostRef(this);
-            if (BUILD16.isDev) {
+            if (BUILD17.isDev) {
               if (
                 // we are proxying the instance (not element)
                 (flags & 1 /* isElementConstructor */) === 0 && // if the class has a setter, then the Element can update instance values, so ignore
@@ -3180,11 +3193,11 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
               setValue(this, memberName, newValue, cmpMeta);
               return;
             }
-            if (!BUILD16.lazyLoad) {
+            if (!BUILD17.lazyLoad) {
               setValue(this, memberName, newValue, cmpMeta);
               return;
             }
-            if (BUILD16.lazyLoad) {
+            if (BUILD17.lazyLoad) {
               if ((flags & 1 /* isElementConstructor */) === 0 || (cmpMeta.$members$[memberName][0] & 4096 /* Setter */) === 0) {
                 setValue(this, memberName, newValue, cmpMeta);
                 if (flags & 1 /* isElementConstructor */ && !ref.$lazyInstance$) {
@@ -3212,7 +3225,7 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             }
           }
         });
-      } else if (BUILD16.lazyLoad && BUILD16.method && flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
+      } else if (BUILD17.lazyLoad && BUILD17.method && flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
         Object.defineProperty(prototype, memberName, {
           value(...args) {
             var _a2;
@@ -3225,13 +3238,13 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
         });
       }
     });
-    if (BUILD16.observeAttribute && (!BUILD16.lazyLoad || flags & 1 /* isElementConstructor */)) {
+    if (BUILD17.observeAttribute && (!BUILD17.lazyLoad || flags & 1 /* isElementConstructor */)) {
       const attrNameToPropName = /* @__PURE__ */ new Map();
       prototype.attributeChangedCallback = function(attrName, oldValue, newValue) {
         plt.jmp(() => {
           var _a2;
           const propName = attrNameToPropName.get(attrName);
-          if (this.hasOwnProperty(propName) && BUILD16.lazyLoad) {
+          if (this.hasOwnProperty(propName) && BUILD17.lazyLoad) {
             newValue = this[propName];
             delete this[propName];
           } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
@@ -3241,8 +3254,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 = BUILD16.lazyLoad ? hostRef.$hostElement$ : this;
-              const instance = BUILD16.lazyLoad ? hostRef.$lazyInstance$ : elm;
+              const elm = BUILD17.lazyLoad ? hostRef.$hostElement$ : this;
+              const instance = BUILD17.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) {
@@ -3266,7 +3279,7 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
-            if (BUILD16.reflect && m[0] & 512 /* ReflectAttr */) {
+            if (BUILD17.reflect && m[0] & 512 /* ReflectAttr */) {
               (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
             }
             return attrName;
@@ -3284,7 +3297,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
     hostRef.$flags$ |= 32 /* hasInitializedComponent */;
     const bundleId = cmpMeta.$lazyBundleId$;
-    if (BUILD17.lazyLoad && bundleId) {
+    if (BUILD18.lazyLoad && bundleId) {
       const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
       if (CstrImport && "then" in CstrImport) {
         const endLoad = uniqueTime(
@@ -3299,15 +3312,15 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       if (!Cstr) {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
-      if (BUILD17.member && !Cstr.isProxied) {
-        if (BUILD17.watchCallback) {
+      if (BUILD18.member && !Cstr.isProxied) {
+        if (BUILD18.watchCallback) {
           cmpMeta.$watchers$ = Cstr.watchers;
         }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
       const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
-      if (BUILD17.member) {
+      if (BUILD18.member) {
         hostRef.$flags$ |= 8 /* isConstructingInstance */;
       }
       try {
@@ -3315,10 +3328,10 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       } catch (e) {
         consoleError(e, elm);
       }
-      if (BUILD17.member) {
+      if (BUILD18.member) {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
-      if (BUILD17.watchCallback) {
+      if (BUILD18.watchCallback) {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
@@ -3328,23 +3341,23 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       const cmpTag = elm.localName;
       customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
     }
-    if (BUILD17.style && Cstr && Cstr.style) {
+    if (BUILD18.style && Cstr && Cstr.style) {
       let style;
       if (typeof Cstr.style === "string") {
         style = Cstr.style;
-      } else if (BUILD17.mode && typeof Cstr.style !== "string") {
+      } else if (BUILD18.mode && typeof Cstr.style !== "string") {
         hostRef.$modeName$ = computeMode(elm);
         if (hostRef.$modeName$) {
           style = Cstr.style[hostRef.$modeName$];
         }
-        if (BUILD17.hydrateServerSide && hostRef.$modeName$) {
+        if (BUILD18.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 (BUILD17.hydrateServerSide && BUILD17.shadowDom && cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
+        if (BUILD18.hydrateServerSide && BUILD18.shadowDom && cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
           style = scopeCss(style, scopeId2, true);
         }
         registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
@@ -3354,14 +3367,14 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
   const ancestorComponent = hostRef.$ancestorComponent$;
   const schedule = () => scheduleUpdate(hostRef, true);
-  if (BUILD17.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) {
+  if (BUILD18.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) {
     ancestorComponent["s-rc"].push(schedule);
   } else {
     schedule();
   }
 };
 var fireConnectedCallback = (instance, elm) => {
-  if (BUILD17.lazyLoad) {
+  if (BUILD18.lazyLoad) {
     safeCall(instance, "connectedCallback", void 0, elm);
   }
 };
@@ -3372,41 +3385,41 @@ var connectedCallback = (elm) => {
     const hostRef = getHostRef(elm);
     const cmpMeta = hostRef.$cmpMeta$;
     const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
-    if (BUILD18.hostListenerTargetParent) {
+    if (BUILD19.hostListenerTargetParent) {
       addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
     }
     if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
       hostRef.$flags$ |= 1 /* hasConnected */;
       let hostId;
-      if (BUILD18.hydrateClientSide) {
+      if (BUILD19.hydrateClientSide) {
         hostId = elm.getAttribute(HYDRATE_ID);
         if (hostId) {
-          if (BUILD18.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            const scopeId2 = BUILD18.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(elm.shadowRoot, cmpMeta);
+          if (BUILD19.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            const scopeId2 = BUILD19.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(elm.shadowRoot, cmpMeta);
             elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
-          } else if (BUILD18.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
-            const scopeId2 = getScopeId(cmpMeta, BUILD18.mode ? elm.getAttribute("s-mode") : void 0);
+          } else if (BUILD19.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+            const scopeId2 = getScopeId(cmpMeta, BUILD19.mode ? elm.getAttribute("s-mode") : void 0);
             elm["s-sc"] = scopeId2;
           }
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
       }
-      if (BUILD18.slotRelocation && !hostId) {
-        if (BUILD18.hydrateServerSide || (BUILD18.slot || BUILD18.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+      if (BUILD19.slotRelocation && !hostId) {
+        if (BUILD19.hydrateServerSide || (BUILD19.slot || BUILD19.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
           setContentReference(elm);
         }
       }
-      if (BUILD18.asyncLoading) {
+      if (BUILD19.asyncLoading) {
         let ancestorComponent = elm;
         while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
-          if (BUILD18.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
+          if (BUILD19.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
             attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
             break;
           }
         }
       }
-      if (BUILD18.prop && !BUILD18.hydrateServerSide && cmpMeta.$members$) {
+      if (BUILD19.prop && !BUILD19.hydrateServerSide && cmpMeta.$members$) {
         Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
           if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
             const value = elm[memberName];
@@ -3415,7 +3428,7 @@ var connectedCallback = (elm) => {
           }
         });
       }
-      if (BUILD18.initializeNextTick) {
+      if (BUILD19.initializeNextTick) {
         nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
       } else {
         initializeComponent(elm, hostRef, cmpMeta);
@@ -3436,29 +3449,29 @@ var setContentReference = (elm) => {
     return;
   }
   const contentRefElm = elm["s-cr"] = win.document.createComment(
-    BUILD18.isDebug ? `content-ref (host=${elm.localName})` : ""
+    BUILD19.isDebug ? `content-ref (host=${elm.localName})` : ""
   );
   contentRefElm["s-cn"] = true;
   insertBefore(elm, contentRefElm, elm.firstChild);
 };
 
 // src/runtime/disconnected-callback.ts
-import { BUILD as BUILD19 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD20 } from "@stencil/core/internal/app-data";
 var disconnectInstance = (instance, elm) => {
-  if (BUILD19.lazyLoad) {
+  if (BUILD20.lazyLoad) {
     safeCall(instance, "disconnectedCallback", void 0, elm || instance);
   }
 };
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
-    if (BUILD19.hostListener) {
+    if (BUILD20.hostListener) {
       if (hostRef.$rmListeners$) {
         hostRef.$rmListeners$.map((rmListener) => rmListener());
         hostRef.$rmListeners$ = void 0;
       }
     }
-    if (!BUILD19.lazyLoad) {
+    if (!BUILD20.lazyLoad) {
       disconnectInstance(elm);
     } else if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
       disconnectInstance(hostRef.$lazyInstance$, elm);
@@ -3483,40 +3496,40 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     $flags$: compactMeta[0],
     $tagName$: compactMeta[1]
   };
-  if (BUILD20.member) {
+  if (BUILD21.member) {
     cmpMeta.$members$ = compactMeta[2];
   }
-  if (BUILD20.hostListener) {
+  if (BUILD21.hostListener) {
     cmpMeta.$listeners$ = compactMeta[3];
   }
-  if (BUILD20.watchCallback) {
+  if (BUILD21.watchCallback) {
     cmpMeta.$watchers$ = Cstr.$watchers$;
   }
-  if (BUILD20.reflect) {
+  if (BUILD21.reflect) {
     cmpMeta.$attrsToReflect$ = [];
   }
-  if (BUILD20.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+  if (BUILD21.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
     cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
   }
-  if (BUILD20.experimentalSlotFixes) {
-    if (BUILD20.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+  if (BUILD21.experimentalSlotFixes) {
+    if (BUILD21.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
       patchPseudoShadowDom(Cstr.prototype);
     }
   } else {
-    if (BUILD20.slotChildNodesFix) {
+    if (BUILD21.slotChildNodesFix) {
       patchChildSlotNodes(Cstr.prototype);
     }
-    if (BUILD20.cloneNodeFix) {
+    if (BUILD21.cloneNodeFix) {
       patchCloneNode(Cstr.prototype);
     }
-    if (BUILD20.appendChildSlotFix) {
+    if (BUILD21.appendChildSlotFix) {
       patchSlotAppendChild(Cstr.prototype);
     }
-    if (BUILD20.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+    if (BUILD21.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
       patchTextContent(Cstr.prototype);
     }
   }
-  if (BUILD20.hydrateClientSide && BUILD20.shadowDom) {
+  if (BUILD21.hydrateClientSide && BUILD21.shadowDom) {
     hydrateScopedToShadow();
   }
   const originalConnectedCallback = Cstr.prototype.connectedCallback;
@@ -3546,14 +3559,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     __attachShadow() {
       if (supportsShadow) {
         if (!this.shadowRoot) {
-          if (BUILD20.shadowDelegatesFocus) {
-            this.attachShadow({
-              mode: "open",
-              delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
-            });
-          } else {
-            this.attachShadow({ mode: "open" });
-          }
+          createShadowRoot.call(this, cmpMeta);
         } else {
           if (this.shadowRoot.mode !== "open") {
             throw new Error(
@@ -3570,7 +3576,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
 };
 var forceModeUpdate = (elm) => {
-  if (BUILD20.style && BUILD20.mode && !BUILD20.lazyLoad) {
+  if (BUILD21.style && BUILD21.mode && !BUILD21.lazyLoad) {
     const mode = computeMode(elm);
     const hostRef = getHostRef(elm);
     if (hostRef.$modeName$ !== mode) {
@@ -3593,7 +3599,7 @@ var forceModeUpdate = (elm) => {
 };
 
 // src/runtime/bootstrap-lazy.ts
-import { BUILD as BUILD21 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD22 } from "@stencil/core/internal/app-data";
 
 // src/runtime/hmr-component.ts
 var hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
@@ -3605,7 +3611,7 @@ var hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
 // src/runtime/bootstrap-lazy.ts
 var bootstrapLazy = (lazyBundles, options = {}) => {
   var _a;
-  if (BUILD21.profile && performance.mark) {
+  if (BUILD22.profile && performance.mark) {
     performance.mark("st:app:start");
   }
   installDevTools();
@@ -3625,15 +3631,15 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let isBootstrapping = true;
   Object.assign(plt, options);
   plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", win.document.baseURI).href;
-  if (BUILD21.asyncQueue) {
+  if (BUILD22.asyncQueue) {
     if (options.syncQueue) {
       plt.$flags$ |= 4 /* queueSync */;
     }
   }
-  if (BUILD21.hydrateClientSide) {
+  if (BUILD22.hydrateClientSide) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
-  if (BUILD21.hydrateClientSide && BUILD21.shadowDom) {
+  if (BUILD22.hydrateClientSide && BUILD22.shadowDom) {
     hydrateScopedToShadow();
   }
   let hasSlotRelocation = false;
@@ -3649,22 +3655,22 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
         hasSlotRelocation = true;
       }
-      if (BUILD21.member) {
+      if (BUILD22.member) {
         cmpMeta.$members$ = compactMeta[2];
       }
-      if (BUILD21.hostListener) {
+      if (BUILD22.hostListener) {
         cmpMeta.$listeners$ = compactMeta[3];
       }
-      if (BUILD21.reflect) {
+      if (BUILD22.reflect) {
         cmpMeta.$attrsToReflect$ = [];
       }
-      if (BUILD21.watchCallback) {
+      if (BUILD22.watchCallback) {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
       }
-      if (BUILD21.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+      if (BUILD22.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
       }
-      const tagName = BUILD21.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
+      const tagName = BUILD22.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
         constructor(self) {
@@ -3672,17 +3678,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           this.hasRegisteredEventListeners = false;
           self = this;
           registerHost(self, cmpMeta);
-          if (BUILD21.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+          if (BUILD22.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             if (supportsShadow) {
               if (!self.shadowRoot) {
-                if (BUILD21.shadowDelegatesFocus) {
-                  self.attachShadow({
-                    mode: "open",
-                    delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
-                  });
-                } else {
-                  self.attachShadow({ mode: "open" });
-                }
+                createShadowRoot.call(self, cmpMeta);
               } else {
                 if (self.shadowRoot.mode !== "open") {
                   throw new Error(
@@ -3690,7 +3689,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
                   );
                 }
               }
-            } else if (!BUILD21.hydrateServerSide && !("shadowRoot" in self)) {
+            } else if (!BUILD22.hydrateServerSide && !("shadowRoot" in self)) {
               self.shadowRoot = self;
             }
           }
@@ -3729,28 +3728,28 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           return getHostRef(this).$onReadyPromise$;
         }
       };
-      if (BUILD21.experimentalSlotFixes) {
-        if (BUILD21.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+      if (BUILD22.experimentalSlotFixes) {
+        if (BUILD22.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
           patchPseudoShadowDom(HostElement.prototype);
         }
       } else {
-        if (BUILD21.slotChildNodesFix) {
+        if (BUILD22.slotChildNodesFix) {
           patchChildSlotNodes(HostElement.prototype);
         }
-        if (BUILD21.cloneNodeFix) {
+        if (BUILD22.cloneNodeFix) {
           patchCloneNode(HostElement.prototype);
         }
-        if (BUILD21.appendChildSlotFix) {
+        if (BUILD22.appendChildSlotFix) {
           patchSlotAppendChild(HostElement.prototype);
         }
-        if (BUILD21.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+        if (BUILD22.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
           patchTextContent(HostElement.prototype);
         }
       }
-      if (BUILD21.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */) {
+      if (BUILD22.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */) {
         HostElement.formAssociated = true;
       }
-      if (BUILD21.hotModuleReplacement) {
+      if (BUILD22.hotModuleReplacement) {
         HostElement.prototype["s-hmr"] = function(hmrVersionId) {
           hmrStart(this, cmpMeta, hmrVersionId);
         };
@@ -3769,7 +3768,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
     if (hasSlotRelocation) {
       dataStyles.textContent += SLOT_FB_CSS;
     }
-    if (BUILD21.invisiblePrehydration && (BUILD21.hydratedClass || BUILD21.hydratedAttribute)) {
+    if (BUILD22.invisiblePrehydration && (BUILD22.hydratedClass || BUILD22.hydratedAttribute)) {
       dataStyles.textContent += cmpTags.sort() + HYDRATED_CSS;
     }
     if (dataStyles.innerHTML.length) {
@@ -3785,7 +3784,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   if (deferredConnectedCallbacks.length) {
     deferredConnectedCallbacks.map((host) => host.connectedCallback());
   } else {
-    if (BUILD21.profile) {
+    if (BUILD22.profile) {
       plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30, "timeout"));
     } else {
       plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30));
@@ -3798,10 +3797,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 var Fragment = (_, children) => children;
 
 // src/runtime/host-listener.ts
-import { BUILD as BUILD22 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD23 } from "@stencil/core/internal/app-data";
 var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-  if (BUILD22.hostListener && listeners && win.document) {
-    if (BUILD22.hostListenerTargetParent) {
+  if (BUILD23.hostListener && listeners && win.document) {
+    if (BUILD23.hostListenerTargetParent) {
       if (attachParentListeners) {
         listeners = listeners.filter(([flags]) => flags & 32 /* TargetParent */);
       } else {
@@ -3809,7 +3808,7 @@ var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) =>
       }
     }
     listeners.map(([flags, name, method]) => {
-      const target = BUILD22.hostListenerTarget ? getHostListenerTarget(win.document, elm, flags) : elm;
+      const target = BUILD23.hostListenerTarget ? getHostListenerTarget(win.document, elm, flags) : elm;
       const handler = hostListenerProxy(hostRef, method);
       const opts = hostListenerOpts(flags);
       plt.ael(target, name, handler, opts);
@@ -3820,7 +3819,7 @@ var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) =>
 var hostListenerProxy = (hostRef, methodName) => (ev) => {
   var _a;
   try {
-    if (BUILD22.lazyLoad) {
+    if (BUILD23.lazyLoad) {
       if (hostRef.$flags$ & 256 /* isListenReady */) {
         (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
       } else {
@@ -3834,16 +3833,16 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
   }
 };
 var getHostListenerTarget = (doc, elm, flags) => {
-  if (BUILD22.hostListenerTargetDocument && flags & 4 /* TargetDocument */) {
+  if (BUILD23.hostListenerTargetDocument && flags & 4 /* TargetDocument */) {
     return doc;
   }
-  if (BUILD22.hostListenerTargetWindow && flags & 8 /* TargetWindow */) {
+  if (BUILD23.hostListenerTargetWindow && flags & 8 /* TargetWindow */) {
     return win;
   }
-  if (BUILD22.hostListenerTargetBody && flags & 16 /* TargetBody */) {
+  if (BUILD23.hostListenerTargetBody && flags & 16 /* TargetBody */) {
     return doc.body;
   }
-  if (BUILD22.hostListenerTargetParent && flags & 32 /* TargetParent */ && elm.parentElement) {
+  if (BUILD23.hostListenerTargetParent && flags & 32 /* TargetParent */ && elm.parentElement) {
     return elm.parentElement;
   }
   return elm;
@@ -4022,7 +4021,6 @@ var hAsync = (nodeName, vnodeData, ...children) => {
 import { globalScripts } from "@stencil/core/internal/app-globals";
 
 // src/hydrate/platform/proxy-host-element.ts
-import { BUILD as BUILD23 } from "@stencil/core/internal/app-data";
 function proxyHostElement(elm, cstr) {
   const cmpMeta = cstr.cmpMeta;
   if (typeof elm.componentOnReady !== "function") {
@@ -4032,14 +4030,7 @@ function proxyHostElement(elm, cstr) {
     elm.forceUpdate = forceUpdate2;
   }
   if (!elm.shadowRoot && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
-    if (BUILD23.shadowDelegatesFocus) {
-      elm.attachShadow({
-        mode: "open",
-        delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
-      });
-    } else {
-      elm.attachShadow({ mode: "open" });
-    }
+    createShadowRoot.call(elm, cmpMeta);
   }
   if (cmpMeta.$members$ != null) {
     const hostRef = getHostRef(elm);