@stencil/core 4.18.3 → 4.19.0

package/internal/client/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Client Platform v4.18.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.19.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -17,7 +17,225 @@ var Build = {
 };
 
 // src/client/client-host-ref.ts
-import { BUILD as BUILD22 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD2 } from "@stencil/core/internal/app-data";
+var hostRefs = BUILD2.hotModuleReplacement ? window.__STENCIL_HOSTREFS__ || (window.__STENCIL_HOSTREFS__ = /* @__PURE__ */ new WeakMap()) : /* @__PURE__ */ new WeakMap();
+var getHostRef = (ref) => hostRefs.get(ref);
+var registerInstance = (lazyInstance, hostRef) => hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
+var registerHost = (hostElement, cmpMeta) => {
+  const hostRef = {
+    $flags$: 0,
+    $hostElement$: hostElement,
+    $cmpMeta$: cmpMeta,
+    $instanceValues$: /* @__PURE__ */ new Map()
+  };
+  if (BUILD2.isDev) {
+    hostRef.$renderCount$ = 0;
+  }
+  if (BUILD2.method && BUILD2.lazyLoad) {
+    hostRef.$onInstancePromise$ = new Promise((r) => hostRef.$onInstanceResolve$ = r);
+  }
+  if (BUILD2.asyncLoading) {
+    hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
+    hostElement["s-p"] = [];
+    hostElement["s-rc"] = [];
+  }
+  return hostRefs.set(hostElement, hostRef);
+};
+var isMemberInElement = (elm, memberName) => memberName in elm;
+
+// src/client/client-load-module.ts
+import { BUILD as BUILD4 } from "@stencil/core/internal/app-data";
+
+// src/client/client-log.ts
+import { BUILD as BUILD3 } from "@stencil/core/internal/app-data";
+var customError;
+var consoleError = (e, el) => (customError || console.error)(e, el);
+var STENCIL_DEV_MODE = BUILD3.isTesting ? ["STENCIL:"] : [
+  "%cstencil",
+  "color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px"
+];
+var consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
+var consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
+var consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m);
+var setErrorHandler = (handler) => customError = handler;
+
+// src/client/client-load-module.ts
+var cmpModules = /* @__PURE__ */ new Map();
+var MODULE_IMPORT_PREFIX = "./";
+var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
+  const exportName = cmpMeta.$tagName$.replace(/-/g, "_");
+  const bundleId = cmpMeta.$lazyBundleId$;
+  if (BUILD4.isDev && typeof bundleId !== "string") {
+    consoleDevError(
+      `Trying to lazily load component <${cmpMeta.$tagName$}> with style mode "${hostRef.$modeName$}", but it does not exist.`
+    );
+    return void 0;
+  } else if (!bundleId) {
+    return void 0;
+  }
+  const module = !BUILD4.hotModuleReplacement ? cmpModules.get(bundleId) : false;
+  if (module) {
+    return module[exportName];
+  }
+  /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+  return import(
+    /* @vite-ignore */
+    /* webpackInclude: /\.entry\.js$/ */
+    /* webpackExclude: /\.system\.entry\.js$/ */
+    /* webpackMode: "lazy" */
+    `./${bundleId}.entry.js${BUILD4.hotModuleReplacement && hmrVersionId ? "?s-hmr=" + hmrVersionId : ""}`
+  ).then((importedModule) => {
+    if (!BUILD4.hotModuleReplacement) {
+      cmpModules.set(bundleId, importedModule);
+    }
+    return importedModule[exportName];
+  }, consoleError);
+};
+
+// src/client/client-style.ts
+var styles = /* @__PURE__ */ new Map();
+var modeResolutionChain = [];
+
+// src/client/client-task-queue.ts
+import { BUILD as BUILD6 } 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 HYDRATE_ID = "s-id";
+var HYDRATED_STYLE_ID = "sty-id";
+var HYDRATE_CHILD_ID = "c-id";
+var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
+var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
+var XLINK_NS = "http://www.w3.org/1999/xlink";
+var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
+  "formAssociatedCallback",
+  "formResetCallback",
+  "formDisabledCallback",
+  "formStateRestoreCallback"
+];
+
+// src/client/client-window.ts
+import { BUILD as BUILD5 } from "@stencil/core/internal/app-data";
+var win = typeof window !== "undefined" ? window : {};
+var doc = win.document || { head: {} };
+var H = win.HTMLElement || class {
+};
+var plt = {
+  $flags$: 0,
+  $resourcesUrl$: "",
+  jmp: (h2) => h2(),
+  raf: (h2) => requestAnimationFrame(h2),
+  ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
+  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+  ce: (eventName, opts) => new CustomEvent(eventName, opts)
+};
+var setPlatformHelpers = (helpers) => {
+  Object.assign(plt, helpers);
+};
+var supportsShadow = BUILD5.shadowDom;
+var supportsListenerOptions = /* @__PURE__ */ (() => {
+  let supportsListenerOptions2 = false;
+  try {
+    doc.addEventListener(
+      "e",
+      null,
+      Object.defineProperty({}, "passive", {
+        get() {
+          supportsListenerOptions2 = true;
+        }
+      })
+    );
+  } catch (e) {
+  }
+  return supportsListenerOptions2;
+})();
+var promiseResolve = (v) => Promise.resolve(v);
+var supportsConstructableStylesheets = BUILD5.constructableCSS ? /* @__PURE__ */ (() => {
+  try {
+    new CSSStyleSheet();
+    return typeof new CSSStyleSheet().replaceSync === "function";
+  } catch (e) {
+  }
+  return false;
+})() : false;
+
+// src/client/client-task-queue.ts
+var queueCongestion = 0;
+var queuePending = false;
+var queueDomReads = [];
+var queueDomWrites = [];
+var queueDomWritesLow = [];
+var queueTask = (queue, write) => (cb) => {
+  queue.push(cb);
+  if (!queuePending) {
+    queuePending = true;
+    if (write && plt.$flags$ & 4 /* queueSync */) {
+      nextTick(flush);
+    } else {
+      plt.raf(flush);
+    }
+  }
+};
+var consume = (queue) => {
+  for (let i2 = 0; i2 < queue.length; i2++) {
+    try {
+      queue[i2](performance.now());
+    } catch (e) {
+      consoleError(e);
+    }
+  }
+  queue.length = 0;
+};
+var consumeTimeout = (queue, timeout) => {
+  let i2 = 0;
+  let ts = 0;
+  while (i2 < queue.length && (ts = performance.now()) < timeout) {
+    try {
+      queue[i2++](ts);
+    } catch (e) {
+      consoleError(e);
+    }
+  }
+  if (i2 === queue.length) {
+    queue.length = 0;
+  } else if (i2 !== 0) {
+    queue.splice(0, i2);
+  }
+};
+var flush = () => {
+  if (BUILD6.asyncQueue) {
+    queueCongestion++;
+  }
+  consume(queueDomReads);
+  if (BUILD6.asyncQueue) {
+    const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */ ? performance.now() + 14 * Math.ceil(queueCongestion * (1 / 10)) : Infinity;
+    consumeTimeout(queueDomWrites, timeout);
+    consumeTimeout(queueDomWritesLow, timeout);
+    if (queueDomWrites.length > 0) {
+      queueDomWritesLow.push(...queueDomWrites);
+      queueDomWrites.length = 0;
+    }
+    if (queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0) {
+      plt.raf(flush);
+    } else {
+      queueCongestion = 0;
+    }
+  } else {
+    consume(queueDomWrites);
+    if (queuePending = queueDomReads.length > 0) {
+      plt.raf(flush);
+    }
+  }
+};
+var nextTick = (cb) => promiseResolve().then(cb);
+var readTask = /* @__PURE__ */ queueTask(queueDomReads, false);
+var writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
+
+// src/client/index.ts
+import { BUILD as BUILD27, Env, NAMESPACE as NAMESPACE2 } from "@stencil/core/internal/app-data";
 
 // src/runtime/asset-path.ts
 var getAssetPath = (path) => {
@@ -27,7 +245,7 @@ var getAssetPath = (path) => {
 var setAssetPath = (path) => plt.$resourcesUrl$ = path;
 
 // src/runtime/bootstrap-custom-element.ts
-import { BUILD as BUILD19 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD24 } from "@stencil/core/internal/app-data";
 
 // src/utils/constants.ts
 var EMPTY_OBJ = {};
@@ -97,16 +315,16 @@ var unwrapErr = (result) => {
 };
 
 // src/runtime/connected-callback.ts
-import { BUILD as BUILD16 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD21 } from "@stencil/core/internal/app-data";
 
 // src/runtime/client-hydrate.ts
-import { BUILD as BUILD4 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD9 } from "@stencil/core/internal/app-data";
 
 // src/runtime/profile.ts
-import { BUILD as BUILD2 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD7 } from "@stencil/core/internal/app-data";
 var i = 0;
 var createTime = (fnName, tagName = "") => {
-  if (BUILD2.profile && performance.mark) {
+  if (BUILD7.profile && performance.mark) {
     const key = `st:${fnName}:${tagName}:${i++}`;
     performance.mark(key);
     return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);
@@ -117,7 +335,7 @@ var createTime = (fnName, tagName = "") => {
   }
 };
 var uniqueTime = (key, measureText) => {
-  if (BUILD2.profile && performance.mark) {
+  if (BUILD7.profile && performance.mark) {
     if (performance.getEntriesByName(key, "mark").length === 0) {
       performance.mark(key);
     }
@@ -175,7 +393,7 @@ var inspect = (ref) => {
   };
 };
 var installDevTools = () => {
-  if (BUILD2.devTools) {
+  if (BUILD7.devTools) {
     const stencil = win.stencil = win.stencil || {};
     const originalInspect = stencil.inspect;
     stencil.inspect = (ref) => {
@@ -188,26 +406,8 @@ var installDevTools = () => {
   }
 };
 
-// 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 HYDRATE_ID = "s-id";
-var HYDRATED_STYLE_ID = "sty-id";
-var HYDRATE_CHILD_ID = "c-id";
-var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
-var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
-var XLINK_NS = "http://www.w3.org/1999/xlink";
-var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
-  "formAssociatedCallback",
-  "formResetCallback",
-  "formDisabledCallback",
-  "formStateRestoreCallback"
-];
-
 // src/runtime/vdom/h.ts
-import { BUILD as BUILD3 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD8 } from "@stencil/core/internal/app-data";
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -223,7 +423,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 (BUILD3.isDev && typeof nodeName !== "function" && child.$flags$ === void 0) {
+        } else if (BUILD8.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.`);
@@ -239,28 +439,28 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
   };
   walk(children);
   if (vnodeData) {
-    if (BUILD3.isDev && nodeName === "input") {
+    if (BUILD8.isDev && nodeName === "input") {
       validateInputProperties(vnodeData);
     }
-    if (BUILD3.vdomKey && vnodeData.key) {
+    if (BUILD8.vdomKey && vnodeData.key) {
       key = vnodeData.key;
     }
-    if (BUILD3.slotRelocation && vnodeData.name) {
+    if (BUILD8.slotRelocation && vnodeData.name) {
       slotName = vnodeData.name;
     }
-    if (BUILD3.vdomClass) {
+    if (BUILD8.vdomClass) {
       const classData = vnodeData.className || vnodeData.class;
       if (classData) {
         vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" ");
       }
     }
   }
-  if (BUILD3.isDev && vNodeChildren.some(isHost)) {
+  if (BUILD8.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 (BUILD3.vdomFunctional && typeof nodeName === "function") {
+  if (BUILD8.vdomFunctional && typeof nodeName === "function") {
     return nodeName(
       vnodeData === null ? {} : vnodeData,
       vNodeChildren,
@@ -272,10 +472,10 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
   if (vNodeChildren.length > 0) {
     vnode.$children$ = vNodeChildren;
   }
-  if (BUILD3.vdomKey) {
+  if (BUILD8.vdomKey) {
     vnode.$key$ = key;
   }
-  if (BUILD3.slotRelocation) {
+  if (BUILD8.slotRelocation) {
     vnode.$name$ = slotName;
   }
   return vnode;
@@ -288,13 +488,13 @@ var newVNode = (tag, text) => {
     $elm$: null,
     $children$: null
   };
-  if (BUILD3.vdomAttribute) {
+  if (BUILD8.vdomAttribute) {
     vnode.$attrs$ = null;
   }
-  if (BUILD3.vdomKey) {
+  if (BUILD8.vdomKey) {
     vnode.$key$ = null;
   }
-  if (BUILD3.slotRelocation) {
+  if (BUILD8.slotRelocation) {
     vnode.$name$ = null;
   }
   return vnode;
@@ -352,7 +552,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const shadowRoot = hostElm.shadowRoot;
   const childRenderNodes = [];
   const slotNodes = [];
-  const shadowRootNodes = BUILD4.shadowDom && shadowRoot ? [] : null;
+  const shadowRootNodes = BUILD9.shadowDom && shadowRoot ? [] : null;
   const vnode = hostRef.$vnode$ = newVNode(tagName, null);
   if (!plt.$orgLocNodes$) {
     initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
@@ -376,7 +576,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     }
     plt.$orgLocNodes$.delete(orgLocationId);
   });
-  if (BUILD4.shadowDom && shadowRoot) {
+  if (BUILD9.shadowDom && shadowRoot) {
     shadowRootNodes.map((shadowRootNode) => {
       if (shadowRootNode) {
         shadowRoot.appendChild(shadowRootNode);
@@ -486,7 +686,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
             node["s-sn"] = "";
           }
           node["s-sr"] = true;
-          if (BUILD4.shadowDom && shadowRootNodes) {
+          if (BUILD9.shadowDom && shadowRootNodes) {
             childVNode.$elm$ = doc.createElement(childVNode.$tag$);
             if (childVNode.$name$) {
               childVNode.$elm$.setAttribute("name", childVNode.$name$);
@@ -503,9 +703,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
           }
           parentVNode.$children$[childVNode.$index$] = childVNode;
         } else if (childNodeType === CONTENT_REF_ID) {
-          if (BUILD4.shadowDom && shadowRootNodes) {
+          if (BUILD9.shadowDom && shadowRootNodes) {
             node.remove();
-          } else if (BUILD4.slotRelocation) {
+          } else if (BUILD9.slotRelocation) {
             hostElm["s-cr"] = node;
             node["s-cn"] = true;
           }
@@ -541,7 +741,7 @@ var initializeDocumentHydrate = (node, orgLocNodes) => {
 };
 
 // src/runtime/initialize-component.ts
-import { BUILD as BUILD15 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD20 } from "@stencil/core/internal/app-data";
 
 // src/runtime/mode.ts
 var computeMode = (elm) => modeResolutionChain.map((h2) => h2(elm)).find((m) => !!m);
@@ -549,22 +749,22 @@ 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";
+import { BUILD as BUILD19 } from "@stencil/core/internal/app-data";
 
 // src/runtime/set-value.ts
-import { BUILD as BUILD13 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD18 } from "@stencil/core/internal/app-data";
 
 // src/runtime/parse-property-value.ts
-import { BUILD as BUILD5 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD10 } from "@stencil/core/internal/app-data";
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
-    if (BUILD5.propBoolean && propType & 4 /* Boolean */) {
+    if (BUILD10.propBoolean && propType & 4 /* Boolean */) {
       return propValue === "false" ? false : propValue === "" || !!propValue;
     }
-    if (BUILD5.propNumber && propType & 2 /* Number */) {
+    if (BUILD10.propNumber && propType & 2 /* Number */) {
       return parseFloat(propValue);
     }
-    if (BUILD5.propString && propType & 1 /* String */) {
+    if (BUILD10.propString && propType & 1 /* String */) {
       return String(propValue);
     }
     return propValue;
@@ -573,21 +773,21 @@ var parsePropertyValue = (propValue, propType) => {
 };
 
 // src/runtime/update-component.ts
-import { BUILD as BUILD12, NAMESPACE } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD17, NAMESPACE } from "@stencil/core/internal/app-data";
 
 // src/runtime/event-emitter.ts
-import { BUILD as BUILD7 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD12 } from "@stencil/core/internal/app-data";
 
 // src/runtime/element.ts
-import { BUILD as BUILD6 } from "@stencil/core/internal/app-data";
-var getElement = (ref) => BUILD6.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
+import { BUILD as BUILD11 } from "@stencil/core/internal/app-data";
+var getElement = (ref) => BUILD11.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
 
 // src/runtime/event-emitter.ts
 var createEvent = (ref, name, flags) => {
   const elm = getElement(ref);
   return {
     emit: (detail) => {
-      if (BUILD7.isDev && !elm.isConnected) {
+      if (BUILD12.isDev && !elm.isConnected) {
         consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
       }
       return emitEvent(elm, name, {
@@ -606,7 +806,7 @@ var emitEvent = (elm, name, opts) => {
 };
 
 // src/runtime/styles.ts
-import { BUILD as BUILD8 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD13 } from "@stencil/core/internal/app-data";
 var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
 var registerStyle = (scopeId2, cssText, allowCS) => {
   let style = styles.get(scopeId2);
@@ -624,22 +824,24 @@ var registerStyle = (scopeId2, cssText, allowCS) => {
 };
 var addStyle = (styleContainerNode, cmpMeta, mode) => {
   var _a;
+  const styleContainerDocument = styleContainerNode;
+  const styleContainerShadowRoot = styleContainerNode;
   const scopeId2 = getScopeId(cmpMeta, mode);
   const style = styles.get(scopeId2);
-  if (!BUILD8.attachStyles) {
+  if (!BUILD13.attachStyles) {
     return scopeId2;
   }
   styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
   if (style) {
     if (typeof style === "string") {
-      styleContainerNode = styleContainerNode.head || styleContainerNode;
+      styleContainerNode = styleContainerDocument.head || styleContainerNode;
       let appliedStyles = rootAppliedStyles.get(styleContainerNode);
       let styleElm;
       if (!appliedStyles) {
         rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
       }
       if (!appliedStyles.has(scopeId2)) {
-        if (BUILD8.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
+        if (BUILD13.hydrateClientSide && styleContainerShadowRoot.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
           styleElm.innerHTML = style;
         } else {
           styleElm = doc.createElement("style");
@@ -648,7 +850,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           if (nonce != null) {
             styleElm.setAttribute("nonce", nonce);
           }
-          if (BUILD8.hydrateServerSide || BUILD8.hotModuleReplacement) {
+          if (BUILD13.hydrateServerSide || BUILD13.hotModuleReplacement) {
             styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
           }
           styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector("link"));
@@ -660,8 +862,8 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           appliedStyles.add(scopeId2);
         }
       }
-    } else if (BUILD8.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
-      styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+    } else if (BUILD13.constructableCSS && !styleContainerDocument.adoptedStyleSheets.includes(style)) {
+      styleContainerDocument.adoptedStyleSheets = [...styleContainerDocument.adoptedStyleSheets, style];
     }
   }
   return scopeId2;
@@ -672,45 +874,45 @@ var attachStyles = (hostRef) => {
   const flags = cmpMeta.$flags$;
   const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
   const scopeId2 = addStyle(
-    BUILD8.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+    BUILD13.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
     cmpMeta,
     hostRef.$modeName$
   );
-  if ((BUILD8.shadowDom || BUILD8.scoped) && BUILD8.cssAnnotations && flags & 10 /* needsScopedEncapsulation */) {
+  if ((BUILD13.shadowDom || BUILD13.scoped) && BUILD13.cssAnnotations && flags & 10 /* needsScopedEncapsulation */) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
-    if (BUILD8.scoped && flags & 2 /* scopedCssEncapsulation */) {
+    if (BUILD13.scoped && flags & 2 /* scopedCssEncapsulation */) {
       elm.classList.add(scopeId2 + "-s");
     }
   }
   endAttachStyles();
 };
-var getScopeId = (cmp, mode) => "sc-" + (BUILD8.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
+var getScopeId = (cmp, mode) => "sc-" + (BUILD13.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
 var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
 
 // src/runtime/vdom/vdom-render.ts
-import { BUILD as BUILD11 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD16 } from "@stencil/core/internal/app-data";
 
 // src/runtime/vdom/update-element.ts
-import { BUILD as BUILD10 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD15 } from "@stencil/core/internal/app-data";
 
 // src/runtime/vdom/set-accessor.ts
-import { BUILD as BUILD9 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD14 } 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 (BUILD9.vdomClass && memberName === "class") {
+    if (BUILD14.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 (BUILD9.vdomStyle && memberName === "style") {
-      if (BUILD9.updatable) {
+    } else if (BUILD14.vdomStyle && memberName === "style") {
+      if (BUILD14.updatable) {
         for (const prop in oldValue) {
           if (!newValue || newValue[prop] == null) {
-            if (!BUILD9.hydrateServerSide && prop.includes("-")) {
+            if (!BUILD14.hydrateServerSide && prop.includes("-")) {
               elm.style.removeProperty(prop);
             } else {
               elm.style[prop] = "";
@@ -720,19 +922,19 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       }
       for (const prop in newValue) {
         if (!oldValue || newValue[prop] !== oldValue[prop]) {
-          if (!BUILD9.hydrateServerSide && prop.includes("-")) {
+          if (!BUILD14.hydrateServerSide && prop.includes("-")) {
             elm.style.setProperty(prop, newValue[prop]);
           } else {
             elm.style[prop] = newValue[prop];
           }
         }
       }
-    } else if (BUILD9.vdomKey && memberName === "key") {
-    } else if (BUILD9.vdomRef && memberName === "ref") {
+    } else if (BUILD14.vdomKey && memberName === "key") {
+    } else if (BUILD14.vdomRef && memberName === "ref") {
       if (newValue) {
         newValue(elm);
       }
-    } else if (BUILD9.vdomListener && (BUILD9.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
+    } else if (BUILD14.vdomListener && (BUILD14.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
       if (memberName[2] === "-") {
         memberName = memberName.slice(3);
       } else if (isMemberInElement(win, ln)) {
@@ -750,7 +952,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
           plt.ael(elm, memberName, newValue, capture);
         }
       }
-    } else if (BUILD9.vdomPropOrAttr) {
+    } else if (BUILD14.vdomPropOrAttr) {
       const isComplex = isComplexType(newValue);
       if ((isProp || isComplex && newValue !== null) && !isSvg) {
         try {
@@ -768,7 +970,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
         }
       }
       let xlink = false;
-      if (BUILD9.vdomXlink) {
+      if (BUILD14.vdomXlink) {
         if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
           memberName = ln;
           xlink = true;
@@ -776,7 +978,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       }
       if (newValue == null || newValue === false) {
         if (newValue !== false || elm.getAttribute(memberName) === "") {
-          if (BUILD9.vdomXlink && xlink) {
+          if (BUILD14.vdomXlink && xlink) {
             elm.removeAttributeNS(XLINK_NS, memberName);
           } else {
             elm.removeAttribute(memberName);
@@ -784,7 +986,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
         }
       } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
         newValue = newValue === true ? "" : newValue;
-        if (BUILD9.vdomXlink && xlink) {
+        if (BUILD14.vdomXlink && xlink) {
           elm.setAttributeNS(XLINK_NS, memberName, newValue);
         } else {
           elm.setAttribute(memberName, newValue);
@@ -803,7 +1005,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 (BUILD10.updatable) {
+  if (BUILD15.updatable) {
     for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
       if (!(memberName in newVnodeAttrs)) {
         setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode2, newVnode.$flags$);
@@ -839,7 +1041,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
   let elm;
   let childNode;
   let oldVNode;
-  if (BUILD11.slotRelocation && !useNativeShadowDom) {
+  if (BUILD16.slotRelocation && !useNativeShadowDom) {
     checkSlotRelocate = true;
     if (newVNode2.$tag$ === "slot") {
       if (scopeId) {
@@ -857,35 +1059,35 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
       );
     }
   }
-  if (BUILD11.isDev && newVNode2.$elm$) {
+  if (BUILD16.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 (BUILD11.vdomText && newVNode2.$text$ !== null) {
+  if (BUILD16.vdomText && newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
-  } else if (BUILD11.slotRelocation && newVNode2.$flags$ & 1 /* isSlotReference */) {
-    elm = newVNode2.$elm$ = BUILD11.isDebug || BUILD11.hydrateServerSide ? slotReferenceDebugNode(newVNode2) : doc.createTextNode("");
+  } else if (BUILD16.slotRelocation && newVNode2.$flags$ & 1 /* isSlotReference */) {
+    elm = newVNode2.$elm$ = BUILD16.isDebug || BUILD16.hydrateServerSide ? slotReferenceDebugNode(newVNode2) : doc.createTextNode("");
   } else {
-    if (BUILD11.svg && !isSvgMode) {
+    if (BUILD16.svg && !isSvgMode) {
       isSvgMode = newVNode2.$tag$ === "svg";
     }
-    elm = newVNode2.$elm$ = BUILD11.svg ? doc.createElementNS(
+    elm = newVNode2.$elm$ = BUILD16.svg ? doc.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
-      BUILD11.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD16.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     ) : doc.createElement(
-      BUILD11.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD16.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     );
-    if (BUILD11.svg && isSvgMode && newVNode2.$tag$ === "foreignObject") {
+    if (BUILD16.svg && isSvgMode && newVNode2.$tag$ === "foreignObject") {
       isSvgMode = false;
     }
-    if (BUILD11.vdomAttribute) {
+    if (BUILD16.vdomAttribute) {
       updateElement(null, newVNode2, isSvgMode);
     }
-    if ((BUILD11.shadowDom || BUILD11.scoped) && isDef(scopeId) && elm["s-si"] !== scopeId) {
+    if ((BUILD16.shadowDom || BUILD16.scoped) && isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
-    if (BUILD11.scoped) {
+    if (BUILD16.scoped) {
       updateElementScopeIds(elm, parentElm);
     }
     if (newVNode2.$children$) {
@@ -896,7 +1098,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         }
       }
     }
-    if (BUILD11.svg) {
+    if (BUILD16.svg) {
       if (newVNode2.$tag$ === "svg") {
         isSvgMode = false;
       } else if (elm.tagName === "foreignObject") {
@@ -905,7 +1107,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
   }
   elm["s-hn"] = hostTagName;
-  if (BUILD11.slotRelocation) {
+  if (BUILD16.slotRelocation) {
     if (newVNode2.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
       elm["s-sr"] = true;
       elm["s-cr"] = contentRef;
@@ -913,7 +1115,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 (BUILD11.experimentalSlotFixes) {
+        if (BUILD16.experimentalSlotFixes) {
           relocateToHostRoot(oldParentVNode.$elm$);
         } else {
           putBackInOriginalLocation(oldParentVNode.$elm$, false);
@@ -942,7 +1144,7 @@ var relocateToHostRoot = (parentElm) => {
 var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ |= 1 /* isTmpDisconnected */;
   const oldSlotChildNodes = Array.from(parentElm.childNodes);
-  if (parentElm["s-sr"] && BUILD11.experimentalSlotFixes) {
+  if (parentElm["s-sr"] && BUILD16.experimentalSlotFixes) {
     let node = parentElm;
     while (node = node.nextSibling) {
       if (node && node["s-sn"] === parentElm["s-sn"] && node["s-sh"] === hostTagName) {
@@ -966,9 +1168,9 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ &= ~1 /* isTmpDisconnected */;
 };
 var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-  let containerElm = BUILD11.slotRelocation && parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
+  let containerElm = BUILD16.slotRelocation && parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
   let childNode;
-  if (BUILD11.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
+  if (BUILD16.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
     containerElm = containerElm.shadowRoot;
   }
   for (; startIdx <= endIdx; ++startIdx) {
@@ -976,7 +1178,7 @@ var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
       childNode = createElm(null, parentVNode, startIdx, parentElm);
       if (childNode) {
         vnodes[startIdx].$elm$ = childNode;
-        insertBefore(containerElm, childNode, BUILD11.slotRelocation ? referenceNode(before) : before);
+        insertBefore(containerElm, childNode, BUILD16.slotRelocation ? referenceNode(before) : before);
       }
     }
   }
@@ -988,7 +1190,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
       const elm = vnode.$elm$;
       nullifyVNodeRefs(vnode);
       if (elm) {
-        if (BUILD11.slotRelocation) {
+        if (BUILD16.slotRelocation) {
           checkSlotFallbackVisibility = true;
           if (elm["s-ol"]) {
             elm["s-ol"].remove();
@@ -1032,7 +1234,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldEndVnode = oldCh[--oldEndIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
-      if (BUILD11.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+      if (BUILD16.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
         putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
       }
       patch(oldStartVnode, newEndVnode, isInitialRender);
@@ -1040,7 +1242,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldStartVnode = oldCh[++oldStartIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
-      if (BUILD11.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+      if (BUILD16.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
         putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
       }
       patch(oldEndVnode, newStartVnode, isInitialRender);
@@ -1049,7 +1251,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       newStartVnode = newCh[++newStartIdx];
     } else {
       idxInOld = -1;
-      if (BUILD11.vdomKey) {
+      if (BUILD16.vdomKey) {
         for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
           if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
             idxInOld = i2;
@@ -1057,7 +1259,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
           }
         }
       }
-      if (BUILD11.vdomKey && idxInOld >= 0) {
+      if (BUILD16.vdomKey && idxInOld >= 0) {
         elmToMove = oldCh[idxInOld];
         if (elmToMove.$tag$ !== newStartVnode.$tag$) {
           node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld, parentElm);
@@ -1072,7 +1274,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         newStartVnode = newCh[++newStartIdx];
       }
       if (node) {
-        if (BUILD11.slotRelocation) {
+        if (BUILD16.slotRelocation) {
           insertBefore(parentReferenceNode(oldStartVnode.$elm$), node, referenceNode(oldStartVnode.$elm$));
         } else {
           insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
@@ -1089,16 +1291,16 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       newStartIdx,
       newEndIdx
     );
-  } else if (BUILD11.updatable && newStartIdx > newEndIdx) {
+  } else if (BUILD16.updatable && newStartIdx > newEndIdx) {
     removeVnodes(oldCh, oldStartIdx, oldEndIdx);
   }
 };
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
-    if (BUILD11.slotRelocation && leftVNode.$tag$ === "slot") {
+    if (BUILD16.slotRelocation && leftVNode.$tag$ === "slot") {
       return leftVNode.$name$ === rightVNode.$name$;
     }
-    if (BUILD11.vdomKey && !isInitialRender) {
+    if (BUILD16.vdomKey && !isInitialRender) {
       return leftVNode.$key$ === rightVNode.$key$;
     }
     return true;
@@ -1116,13 +1318,13 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   let defaultHolder;
-  if (!BUILD11.vdomText || text === null) {
-    if (BUILD11.svg) {
+  if (!BUILD16.vdomText || text === null) {
+    if (BUILD16.svg) {
       isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
     }
-    if (BUILD11.vdomAttribute || BUILD11.reflect) {
-      if (BUILD11.slot && tag === "slot" && !useNativeShadowDom) {
-        if (BUILD11.experimentalSlotFixes && oldVNode.$name$ !== newVNode2.$name$) {
+    if (BUILD16.vdomAttribute || BUILD16.reflect) {
+      if (BUILD16.slot && tag === "slot" && !useNativeShadowDom) {
+        if (BUILD16.experimentalSlotFixes && oldVNode.$name$ !== newVNode2.$name$) {
           newVNode2.$elm$["s-sn"] = newVNode2.$name$ || "";
           relocateToHostRoot(newVNode2.$elm$.parentElement);
         }
@@ -1130,22 +1332,22 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
         updateElement(oldVNode, newVNode2, isSvgMode);
       }
     }
-    if (BUILD11.updatable && oldChildren !== null && newChildren !== null) {
+    if (BUILD16.updatable && oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
     } else if (newChildren !== null) {
-      if (BUILD11.updatable && BUILD11.vdomText && oldVNode.$text$ !== null) {
+      if (BUILD16.updatable && BUILD16.vdomText && oldVNode.$text$ !== null) {
         elm.textContent = "";
       }
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
-    } else if (BUILD11.updatable && oldChildren !== null) {
+    } else if (BUILD16.updatable && oldChildren !== null) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
-    if (BUILD11.svg && isSvgMode && tag === "svg") {
+    if (BUILD16.svg && isSvgMode && tag === "svg") {
       isSvgMode = false;
     }
-  } else if (BUILD11.vdomText && BUILD11.slotRelocation && (defaultHolder = elm["s-cr"])) {
+  } else if (BUILD16.vdomText && BUILD16.slotRelocation && (defaultHolder = elm["s-cr"])) {
     defaultHolder.parentNode.textContent = text;
-  } else if (BUILD11.vdomText && oldVNode.$text$ !== text) {
+  } else if (BUILD16.vdomText && oldVNode.$text$ !== text) {
     elm.data = text;
   }
 };
@@ -1187,7 +1389,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"] && (!BUILD11.experimentalSlotFixes || !node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
+        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!BUILD16.experimentalSlotFixes || !node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
           if (isNodeLocatedInSlot(node, slotName)) {
             let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
             checkSlotFallbackVisibility = true;
@@ -1241,14 +1443,14 @@ var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
   return slotName === "";
 };
 var nullifyVNodeRefs = (vNode) => {
-  if (BUILD11.vdomRef) {
+  if (BUILD16.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 (BUILD11.scoped) {
+  if (BUILD16.scoped) {
     updateElementScopeIds(newNode, parent);
   }
   return inserted;
@@ -1286,7 +1488,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 (BUILD11.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
+  if (BUILD16.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>.
 
@@ -1300,7 +1502,7 @@ render() {
 }
   `);
   }
-  if (BUILD11.reflect && cmpMeta.$attrsToReflect$) {
+  if (BUILD16.reflect && cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
     cmpMeta.$attrsToReflect$.map(
       ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
@@ -1316,24 +1518,24 @@ render() {
   rootVnode.$tag$ = null;
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
-  rootVnode.$elm$ = oldVNode.$elm$ = BUILD11.shadowDom ? hostElm.shadowRoot || hostElm : hostElm;
-  if (BUILD11.scoped || BUILD11.shadowDom) {
+  rootVnode.$elm$ = oldVNode.$elm$ = BUILD16.shadowDom ? hostElm.shadowRoot || hostElm : hostElm;
+  if (BUILD16.scoped || BUILD16.shadowDom) {
     scopeId = hostElm["s-sc"];
   }
   useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
-  if (BUILD11.slotRelocation) {
+  if (BUILD16.slotRelocation) {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
   }
   patch(oldVNode, rootVnode, isInitialLoad);
-  if (BUILD11.slotRelocation) {
+  if (BUILD16.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 = BUILD11.isDebug || BUILD11.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : doc.createTextNode("");
+          const orgLocationNode = BUILD16.isDebug || BUILD16.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : doc.createTextNode("");
           orgLocationNode["s-nr"] = nodeToRelocate;
           insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
         }
@@ -1344,7 +1546,7 @@ render() {
         if (slotRefNode) {
           const parentNodeRef = slotRefNode.parentNode;
           let insertBeforeNode = slotRefNode.nextSibling;
-          if (!BUILD11.experimentalSlotFixes || insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */) {
+          if (!BUILD16.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;
@@ -1363,7 +1565,7 @@ render() {
           }
           if (!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode || nodeToRelocate.nextSibling !== insertBeforeNode) {
             if (nodeToRelocate !== insertBeforeNode) {
-              if (!BUILD11.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
+              if (!BUILD16.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
                 nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
               }
               insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
@@ -1389,7 +1591,7 @@ render() {
     plt.$flags$ &= ~1 /* isTmpDisconnected */;
     relocateNodes.length = 0;
   }
-  if (BUILD11.experimentalScopedSlotChanges && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+  if (BUILD16.experimentalScopedSlotChanges && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
     for (const childNode of rootVnode.$elm$.childNodes) {
       if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
         if (isInitialLoad && childNode["s-ih"] == null) {
@@ -1410,26 +1612,26 @@ var originalLocationDebugNode = (nodeToRelocate) => doc.createComment(
 
 // src/runtime/update-component.ts
 var attachToAncestor = (hostRef, ancestorComponent) => {
-  if (BUILD12.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
+  if (BUILD17.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
     ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = r));
   }
 };
 var scheduleUpdate = (hostRef, isInitialLoad) => {
-  if (BUILD12.taskQueue && BUILD12.updatable) {
+  if (BUILD17.taskQueue && BUILD17.updatable) {
     hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
   }
-  if (BUILD12.asyncLoading && hostRef.$flags$ & 4 /* isWaitingForChildren */) {
+  if (BUILD17.asyncLoading && hostRef.$flags$ & 4 /* isWaitingForChildren */) {
     hostRef.$flags$ |= 512 /* needsRerender */;
     return;
   }
   attachToAncestor(hostRef, hostRef.$ancestorComponent$);
   const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
-  return BUILD12.taskQueue ? writeTask(dispatch) : dispatch();
+  return BUILD17.taskQueue ? writeTask(dispatch) : dispatch();
 };
 var dispatchHooks = (hostRef, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
-  const instance = BUILD12.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD17.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`
@@ -1437,7 +1639,7 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   }
   let maybePromise;
   if (isInitialLoad) {
-    if (BUILD12.lazyLoad && BUILD12.hostListener) {
+    if (BUILD17.lazyLoad && BUILD17.hostListener) {
       hostRef.$flags$ |= 256 /* isListenReady */;
       if (hostRef.$queuedListeners$) {
         hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
@@ -1445,46 +1647,49 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
       }
     }
     emitLifecycleEvent(elm, "componentWillLoad");
-    if (BUILD12.cmpWillLoad) {
+    if (BUILD17.cmpWillLoad) {
       maybePromise = safeCall(instance, "componentWillLoad");
     }
   } else {
     emitLifecycleEvent(elm, "componentWillUpdate");
-    if (BUILD12.cmpWillUpdate) {
+    if (BUILD17.cmpWillUpdate) {
       maybePromise = safeCall(instance, "componentWillUpdate");
     }
   }
   emitLifecycleEvent(elm, "componentWillRender");
-  if (BUILD12.cmpWillRender) {
+  if (BUILD17.cmpWillRender) {
     maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender"));
   }
   endSchedule();
   return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
-var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
+var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn).catch((err2) => {
+  console.error(err2);
+  fn();
+}) : fn();
 var isPromisey = (maybePromise) => maybePromise instanceof Promise || maybePromise && maybePromise.then && typeof maybePromise.then === "function";
 var updateComponent = async (hostRef, instance, isInitialLoad) => {
   var _a;
   const elm = hostRef.$hostElement$;
   const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$);
   const rc = elm["s-rc"];
-  if (BUILD12.style && isInitialLoad) {
+  if (BUILD17.style && isInitialLoad) {
     attachStyles(hostRef);
   }
   const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$);
-  if (BUILD12.isDev) {
+  if (BUILD17.isDev) {
     hostRef.$flags$ |= 1024 /* devOnRender */;
   }
-  if (BUILD12.hydrateServerSide) {
+  if (BUILD17.hydrateServerSide) {
     await callRender(hostRef, instance, elm, isInitialLoad);
   } else {
     callRender(hostRef, instance, elm, isInitialLoad);
   }
-  if (BUILD12.isDev) {
+  if (BUILD17.isDev) {
     hostRef.$renderCount$ = hostRef.$renderCount$ === void 0 ? 1 : hostRef.$renderCount$ + 1;
     hostRef.$flags$ &= ~1024 /* devOnRender */;
   }
-  if (BUILD12.hydrateServerSide) {
+  if (BUILD17.hydrateServerSide) {
     try {
       serverSideConnected(elm);
       if (isInitialLoad) {
@@ -1498,13 +1703,13 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
       consoleError(e, elm);
     }
   }
-  if (BUILD12.asyncLoading && rc) {
+  if (BUILD17.asyncLoading && rc) {
     rc.map((cb) => cb());
     elm["s-rc"] = void 0;
   }
   endRender();
   endUpdate();
-  if (BUILD12.asyncLoading) {
+  if (BUILD17.asyncLoading) {
     const childrenPromises = (_a = elm["s-p"]) != null ? _a : [];
     const postUpdate = () => postUpdateComponent(hostRef);
     if (childrenPromises.length === 0) {
@@ -1520,10 +1725,10 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
 };
 var renderingRef = null;
 var callRender = (hostRef, instance, elm, isInitialLoad) => {
-  const allRenderFn = BUILD12.allRenderFn ? true : false;
-  const lazyLoad = BUILD12.lazyLoad ? true : false;
-  const taskQueue = BUILD12.taskQueue ? true : false;
-  const updatable = BUILD12.updatable ? true : false;
+  const allRenderFn = BUILD17.allRenderFn ? true : false;
+  const lazyLoad = BUILD17.lazyLoad ? true : false;
+  const taskQueue = BUILD17.taskQueue ? true : false;
+  const updatable = BUILD17.updatable ? true : false;
   try {
     renderingRef = instance;
     instance = allRenderFn ? instance.render() : instance.render && instance.render();
@@ -1533,9 +1738,9 @@ var callRender = (hostRef, instance, elm, isInitialLoad) => {
     if (updatable || lazyLoad) {
       hostRef.$flags$ |= 2 /* hasRendered */;
     }
-    if (BUILD12.hasRenderFn || BUILD12.reflect) {
-      if (BUILD12.vdomRender || BUILD12.reflect) {
-        if (BUILD12.hydrateServerSide) {
+    if (BUILD17.hasRenderFn || BUILD17.reflect) {
+      if (BUILD17.vdomRender || BUILD17.reflect) {
+        if (BUILD17.hydrateServerSide) {
           return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
         } else {
           renderVdom(hostRef, instance, isInitialLoad);
@@ -1560,57 +1765,57 @@ var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
-  const instance = BUILD12.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD17.lazyLoad ? hostRef.$lazyInstance$ : elm;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  if (BUILD12.cmpDidRender) {
-    if (BUILD12.isDev) {
+  if (BUILD17.cmpDidRender) {
+    if (BUILD17.isDev) {
       hostRef.$flags$ |= 1024 /* devOnRender */;
     }
     safeCall(instance, "componentDidRender");
-    if (BUILD12.isDev) {
+    if (BUILD17.isDev) {
       hostRef.$flags$ &= ~1024 /* devOnRender */;
     }
   }
   emitLifecycleEvent(elm, "componentDidRender");
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
-    if (BUILD12.asyncLoading && BUILD12.cssAnnotations) {
+    if (BUILD17.asyncLoading && BUILD17.cssAnnotations) {
       addHydratedFlag(elm);
     }
-    if (BUILD12.cmpDidLoad) {
-      if (BUILD12.isDev) {
+    if (BUILD17.cmpDidLoad) {
+      if (BUILD17.isDev) {
         hostRef.$flags$ |= 2048 /* devOnDidLoad */;
       }
       safeCall(instance, "componentDidLoad");
-      if (BUILD12.isDev) {
+      if (BUILD17.isDev) {
         hostRef.$flags$ &= ~2048 /* devOnDidLoad */;
       }
     }
     emitLifecycleEvent(elm, "componentDidLoad");
     endPostUpdate();
-    if (BUILD12.asyncLoading) {
+    if (BUILD17.asyncLoading) {
       hostRef.$onReadyResolve$(elm);
       if (!ancestorComponent) {
         appDidLoad(tagName);
       }
     }
   } else {
-    if (BUILD12.cmpDidUpdate) {
-      if (BUILD12.isDev) {
+    if (BUILD17.cmpDidUpdate) {
+      if (BUILD17.isDev) {
         hostRef.$flags$ |= 1024 /* devOnRender */;
       }
       safeCall(instance, "componentDidUpdate");
-      if (BUILD12.isDev) {
+      if (BUILD17.isDev) {
         hostRef.$flags$ &= ~1024 /* devOnRender */;
       }
     }
     emitLifecycleEvent(elm, "componentDidUpdate");
     endPostUpdate();
   }
-  if (BUILD12.method && BUILD12.lazyLoad) {
+  if (BUILD17.method && BUILD17.lazyLoad) {
     hostRef.$onInstanceResolve$(elm);
   }
-  if (BUILD12.asyncLoading) {
+  if (BUILD17.asyncLoading) {
     if (hostRef.$onRenderResolve$) {
       hostRef.$onRenderResolve$();
       hostRef.$onRenderResolve$ = void 0;
@@ -1622,7 +1827,7 @@ var postUpdateComponent = (hostRef) => {
   }
 };
 var forceUpdate = (ref) => {
-  if (BUILD12.updatable && (Build.isBrowser || Build.isTesting)) {
+  if (BUILD17.updatable && (Build.isBrowser || Build.isTesting)) {
     const hostRef = getHostRef(ref);
     const isConnected = hostRef.$hostElement$.isConnected;
     if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
@@ -1633,14 +1838,14 @@ var forceUpdate = (ref) => {
   return false;
 };
 var appDidLoad = (who) => {
-  if (BUILD12.cssAnnotations) {
+  if (BUILD17.cssAnnotations) {
     addHydratedFlag(doc.documentElement);
   }
-  if (BUILD12.asyncQueue) {
+  if (BUILD17.asyncQueue) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
-  if (BUILD12.profile && performance.measure) {
+  if (BUILD17.profile && performance.measure) {
     performance.measure(`[Stencil] ${NAMESPACE} initial load (by ${who})`, "st:app:start");
   }
 };
@@ -1655,7 +1860,7 @@ var safeCall = (instance, method, arg) => {
   return void 0;
 };
 var emitLifecycleEvent = (elm, lifecycleName) => {
-  if (BUILD12.lifecycleDOMEvents) {
+  if (BUILD17.lifecycleDOMEvents) {
     emitEvent(elm, "stencil_" + lifecycleName, {
       bubbles: true,
       composed: true,
@@ -1667,7 +1872,7 @@ var emitLifecycleEvent = (elm, lifecycleName) => {
 };
 var addHydratedFlag = (elm) => {
   var _a, _b;
-  return BUILD12.hydratedClass ? elm.classList.add((_a = BUILD12.hydratedSelectorName) != null ? _a : "hydrated") : BUILD12.hydratedAttribute ? elm.setAttribute((_b = BUILD12.hydratedSelectorName) != null ? _b : "hydrated", "") : void 0;
+  return BUILD17.hydratedClass ? elm.classList.add((_a = BUILD17.hydratedSelectorName) != null ? _a : "hydrated") : BUILD17.hydratedAttribute ? elm.setAttribute((_b = BUILD17.hydratedSelectorName) != null ? _b : "hydrated", "") : void 0;
 };
 var serverSideConnected = (elm) => {
   const children = elm.children;
@@ -1686,21 +1891,21 @@ var serverSideConnected = (elm) => {
 var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 var setValue = (ref, propName, newVal, cmpMeta) => {
   const hostRef = getHostRef(ref);
-  if (BUILD13.lazyLoad && !hostRef) {
+  if (BUILD18.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 = BUILD13.lazyLoad ? hostRef.$hostElement$ : ref;
+  const elm = BUILD18.lazyLoad ? hostRef.$hostElement$ : ref;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
-  const instance = BUILD13.lazyLoad ? hostRef.$lazyInstance$ : elm;
+  const instance = BUILD18.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 ((!BUILD13.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
+  if ((!BUILD18.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
-    if (BUILD13.isDev) {
+    if (BUILD18.isDev) {
       if (hostRef.$flags$ & 1024 /* devOnRender */) {
         consoleDevWarn(
           `The state/prop "${propName}" changed during rendering. This can potentially lead to infinite-loops and other bugs.`,
@@ -1723,8 +1928,8 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
         );
       }
     }
-    if (!BUILD13.lazyLoad || instance) {
-      if (BUILD13.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+    if (!BUILD18.lazyLoad || instance) {
+      if (BUILD18.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
         const watchMethods = cmpMeta.$watchers$[propName];
         if (watchMethods) {
           watchMethods.map((watchMethodName) => {
@@ -1736,8 +1941,8 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
           });
         }
       }
-      if (BUILD13.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
-        if (BUILD13.cmpShouldUpdate && instance.componentShouldUpdate) {
+      if (BUILD18.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+        if (BUILD18.cmpShouldUpdate && instance.componentShouldUpdate) {
           if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
             return;
           }
@@ -1750,15 +1955,15 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 
 // src/runtime/proxy-component.ts
 var proxyComponent = (Cstr, cmpMeta, flags) => {
-  var _a;
+  var _a, _b;
   const prototype = Cstr.prototype;
-  if (BUILD14.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
+  if (BUILD19.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
     FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach(
       (cbName) => Object.defineProperty(prototype, cbName, {
         value(...args) {
           const hostRef = getHostRef(this);
-          const elm = BUILD14.lazyLoad ? hostRef.$hostElement$ : this;
-          const instance = BUILD14.lazyLoad ? hostRef.$lazyInstance$ : elm;
+          const elm = BUILD19.lazyLoad ? hostRef.$hostElement$ : this;
+          const instance = BUILD19.lazyLoad ? hostRef.$lazyInstance$ : elm;
           if (!instance) {
             hostRef.$onReadyPromise$.then((instance2) => {
               const cb = instance2[cbName];
@@ -1772,19 +1977,19 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
       })
     );
   }
-  if (BUILD14.member && cmpMeta.$members$) {
-    if (BUILD14.watchCallback && Cstr.watchers) {
+  if (BUILD19.member && cmpMeta.$members$ || BUILD19.watchCallback && (cmpMeta.$watchers$ || Cstr.watchers)) {
+    if (BUILD19.watchCallback && Cstr.watchers && !cmpMeta.$watchers$) {
       cmpMeta.$watchers$ = Cstr.watchers;
     }
-    const members = Object.entries(cmpMeta.$members$);
+    const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
-      if ((BUILD14.prop || BUILD14.state) && (memberFlags & 31 /* Prop */ || (!BUILD14.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
+      if ((BUILD19.prop || BUILD19.state) && (memberFlags & 31 /* Prop */ || (!BUILD19.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
         Object.defineProperty(prototype, memberName, {
           get() {
             return getValue(this, memberName);
           },
           set(newValue) {
-            if (BUILD14.isDev) {
+            if (BUILD19.isDev) {
               const ref = getHostRef(this);
               if (
                 // we are proxying the instance (not element)
@@ -1804,7 +2009,7 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
           configurable: true,
           enumerable: true
         });
-      } else if (BUILD14.lazyLoad && BUILD14.method && flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
+      } else if (BUILD19.lazyLoad && BUILD19.method && flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
         Object.defineProperty(prototype, memberName, {
           value(...args) {
             var _a2;
@@ -1817,7 +2022,7 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
         });
       }
     });
-    if (BUILD14.observeAttribute && (!BUILD14.lazyLoad || flags & 1 /* isElementConstructor */)) {
+    if (BUILD19.observeAttribute && (!BUILD19.lazyLoad || flags & 1 /* isElementConstructor */)) {
       const attrNameToPropName = /* @__PURE__ */ new Map();
       prototype.attributeChangedCallback = function(attrName, oldValue, newValue) {
         plt.jmp(() => {
@@ -1832,8 +2037,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 = BUILD14.lazyLoad ? hostRef.$hostElement$ : this;
-              const instance = BUILD14.lazyLoad ? hostRef.$lazyInstance$ : elm;
+              const elm = BUILD19.lazyLoad ? hostRef.$hostElement$ : this;
+              const instance = BUILD19.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) {
@@ -1848,12 +2053,12 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
       };
       Cstr.observedAttributes = Array.from(
         /* @__PURE__ */ new Set([
-          ...Object.keys((_a = cmpMeta.$watchers$) != null ? _a : {}),
+          ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
             var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
-            if (BUILD14.reflect && m[0] & 512 /* ReflectAttr */) {
+            if (BUILD19.reflect && m[0] & 512 /* ReflectAttr */) {
               (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
             }
             return attrName;
@@ -1871,7 +2076,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
     hostRef.$flags$ |= 32 /* hasInitializedComponent */;
     const bundleId = cmpMeta.$lazyBundleId$;
-    if ((BUILD15.lazyLoad || BUILD15.hydrateClientSide) && bundleId) {
+    if ((BUILD20.lazyLoad || BUILD20.hydrateClientSide) && bundleId) {
       const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
       if (CstrImport && "then" in CstrImport) {
         const endLoad = uniqueTime(
@@ -1886,15 +2091,15 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       if (!Cstr) {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
-      if (BUILD15.member && !Cstr.isProxied) {
-        if (BUILD15.watchCallback) {
+      if (BUILD20.member && !Cstr.isProxied) {
+        if (BUILD20.watchCallback) {
           cmpMeta.$watchers$ = Cstr.watchers;
         }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
       const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
-      if (BUILD15.member) {
+      if (BUILD20.member) {
         hostRef.$flags$ |= 8 /* isConstructingInstance */;
       }
       try {
@@ -1902,10 +2107,10 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       } catch (e) {
         consoleError(e);
       }
-      if (BUILD15.member) {
+      if (BUILD20.member) {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
-      if (BUILD15.watchCallback) {
+      if (BUILD20.watchCallback) {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
@@ -1915,22 +2120,24 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       const cmpTag = elm.localName;
       customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
     }
-    if (BUILD15.style && Cstr && Cstr.style) {
-      let style = Cstr.style;
-      if (BUILD15.mode && typeof style !== "string") {
+    if (BUILD20.style && Cstr && Cstr.style) {
+      let style;
+      if (typeof Cstr.style === "string") {
+        style = Cstr.style;
+      } else if (BUILD20.mode && typeof Cstr.style !== "string") {
         hostRef.$modeName$ = computeMode(elm);
         if (hostRef.$modeName$) {
-          style = style[hostRef.$modeName$];
+          style = Cstr.style[hostRef.$modeName$];
         }
-        if (BUILD15.hydrateServerSide && hostRef.$modeName$) {
+        if (BUILD20.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 (!BUILD15.hydrateServerSide && BUILD15.shadowDom && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
-        BUILD15.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
+        if (!BUILD20.hydrateServerSide && BUILD20.shadowDom && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+        BUILD20.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
           style = await import("./shadow-css.js").then((m) => m.scopeCss(style, scopeId2, false));
         }
         registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
@@ -1940,14 +2147,14 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
   const ancestorComponent = hostRef.$ancestorComponent$;
   const schedule = () => scheduleUpdate(hostRef, true);
-  if (BUILD15.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) {
+  if (BUILD20.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) {
     ancestorComponent["s-rc"].push(schedule);
   } else {
     schedule();
   }
 };
 var fireConnectedCallback = (instance) => {
-  if (BUILD15.lazyLoad && BUILD15.connectedCallback) {
+  if (BUILD20.lazyLoad && BUILD20.connectedCallback) {
     safeCall(instance, "connectedCallback");
   }
 };
@@ -1958,38 +2165,38 @@ var connectedCallback = (elm) => {
     const hostRef = getHostRef(elm);
     const cmpMeta = hostRef.$cmpMeta$;
     const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
-    if (BUILD16.hostListenerTargetParent) {
+    if (BUILD21.hostListenerTargetParent) {
       addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
     }
     if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
       hostRef.$flags$ |= 1 /* hasConnected */;
       let hostId;
-      if (BUILD16.hydrateClientSide) {
+      if (BUILD21.hydrateClientSide) {
         hostId = elm.getAttribute(HYDRATE_ID);
         if (hostId) {
-          if (BUILD16.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            const scopeId2 = BUILD16.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(elm.shadowRoot, cmpMeta);
+          if (BUILD21.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            const scopeId2 = BUILD21.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(elm.shadowRoot, cmpMeta);
             elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
           }
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
       }
-      if (BUILD16.slotRelocation && !hostId) {
-        if (BUILD16.hydrateServerSide || (BUILD16.slot || BUILD16.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+      if (BUILD21.slotRelocation && !hostId) {
+        if (BUILD21.hydrateServerSide || (BUILD21.slot || BUILD21.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
           setContentReference(elm);
         }
       }
-      if (BUILD16.asyncLoading) {
+      if (BUILD21.asyncLoading) {
         let ancestorComponent = elm;
         while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
-          if (BUILD16.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
+          if (BUILD21.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
             attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
             break;
           }
         }
       }
-      if (BUILD16.prop && !BUILD16.hydrateServerSide && cmpMeta.$members$) {
+      if (BUILD21.prop && !BUILD21.hydrateServerSide && cmpMeta.$members$) {
         Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
           if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
             const value = elm[memberName];
@@ -1998,7 +2205,7 @@ var connectedCallback = (elm) => {
           }
         });
       }
-      if (BUILD16.initializeNextTick) {
+      if (BUILD21.initializeNextTick) {
         nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
       } else {
         initializeComponent(elm, hostRef, cmpMeta);
@@ -2016,32 +2223,32 @@ var connectedCallback = (elm) => {
 };
 var setContentReference = (elm) => {
   const contentRefElm = elm["s-cr"] = doc.createComment(
-    BUILD16.isDebug ? `content-ref (host=${elm.localName})` : ""
+    BUILD21.isDebug ? `content-ref (host=${elm.localName})` : ""
   );
   contentRefElm["s-cn"] = true;
   insertBefore(elm, contentRefElm, elm.firstChild);
 };
 
 // src/runtime/disconnected-callback.ts
-import { BUILD as BUILD17 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD22 } from "@stencil/core/internal/app-data";
 var disconnectInstance = (instance) => {
-  if (BUILD17.lazyLoad && BUILD17.disconnectedCallback) {
+  if (BUILD22.lazyLoad && BUILD22.disconnectedCallback) {
     safeCall(instance, "disconnectedCallback");
   }
-  if (BUILD17.cmpDidUnload) {
+  if (BUILD22.cmpDidUnload) {
     safeCall(instance, "componentDidUnload");
   }
 };
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
-    if (BUILD17.hostListener) {
+    if (BUILD22.hostListener) {
       if (hostRef.$rmListeners$) {
         hostRef.$rmListeners$.map((rmListener) => rmListener());
         hostRef.$rmListeners$ = void 0;
       }
     }
-    if (!BUILD17.lazyLoad) {
+    if (!BUILD22.lazyLoad) {
       disconnectInstance(elm);
     } else if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
       disconnectInstance(hostRef.$lazyInstance$);
@@ -2052,7 +2259,7 @@ var disconnectedCallback = async (elm) => {
 };
 
 // src/runtime/dom-extras.ts
-import { BUILD as BUILD18 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD23 } from "@stencil/core/internal/app-data";
 var patchPseudoShadowDom = (hostElementPrototype, descriptorPrototype) => {
   patchCloneNode(hostElementPrototype);
   patchSlotAppendChild(hostElementPrototype);
@@ -2069,9 +2276,9 @@ var patchCloneNode = (HostElementPrototype) => {
   const orgCloneNode = HostElementPrototype.cloneNode;
   HostElementPrototype.cloneNode = function(deep) {
     const srcNode = this;
-    const isShadowDom = BUILD18.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
+    const isShadowDom = BUILD23.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
     const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
-    if (BUILD18.slot && !isShadowDom && deep) {
+    if (BUILD23.slot && !isShadowDom && deep) {
       let i2 = 0;
       let slotted, nonStencilNode;
       const stencilPrivates = [
@@ -2095,7 +2302,7 @@ var patchCloneNode = (HostElementPrototype) => {
         slotted = srcNode.childNodes[i2]["s-nr"];
         nonStencilNode = stencilPrivates.every((privateField) => !srcNode.childNodes[i2][privateField]);
         if (slotted) {
-          if (BUILD18.appendChildSlotFix && clonedNode.__appendChild) {
+          if (BUILD23.appendChildSlotFix && clonedNode.__appendChild) {
             clonedNode.__appendChild(slotted.cloneNode(true));
           } else {
             clonedNode.appendChild(slotted.cloneNode(true));
@@ -2221,7 +2428,7 @@ var patchSlotInsertAdjacentElement = (HostElementPrototype) => {
 var patchTextContent = (hostElementPrototype) => {
   const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, "textContent");
   Object.defineProperty(hostElementPrototype, "__textContent", descriptor);
-  if (BUILD18.experimentalScopedSlotChanges) {
+  if (BUILD23.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
@@ -2373,36 +2580,36 @@ var proxyCustomElement = (Cstr, compactMeta) => {
     $flags$: compactMeta[0],
     $tagName$: compactMeta[1]
   };
-  if (BUILD19.member) {
+  if (BUILD24.member) {
     cmpMeta.$members$ = compactMeta[2];
   }
-  if (BUILD19.hostListener) {
+  if (BUILD24.hostListener) {
     cmpMeta.$listeners$ = compactMeta[3];
   }
-  if (BUILD19.watchCallback) {
+  if (BUILD24.watchCallback) {
     cmpMeta.$watchers$ = Cstr.$watchers$;
   }
-  if (BUILD19.reflect) {
+  if (BUILD24.reflect) {
     cmpMeta.$attrsToReflect$ = [];
   }
-  if (BUILD19.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+  if (BUILD24.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
     cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
   }
-  if (BUILD19.experimentalSlotFixes) {
-    if (BUILD19.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+  if (BUILD24.experimentalSlotFixes) {
+    if (BUILD24.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
       patchPseudoShadowDom(Cstr.prototype, cmpMeta);
     }
   } else {
-    if (BUILD19.slotChildNodesFix) {
+    if (BUILD24.slotChildNodesFix) {
       patchChildSlotNodes(Cstr.prototype, cmpMeta);
     }
-    if (BUILD19.cloneNodeFix) {
+    if (BUILD24.cloneNodeFix) {
       patchCloneNode(Cstr.prototype);
     }
-    if (BUILD19.appendChildSlotFix) {
+    if (BUILD24.appendChildSlotFix) {
       patchSlotAppendChild(Cstr.prototype);
     }
-    if (BUILD19.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+    if (BUILD24.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
       patchTextContent(Cstr.prototype);
     }
   }
@@ -2413,26 +2620,36 @@ var proxyCustomElement = (Cstr, compactMeta) => {
       registerHost(this, cmpMeta);
     },
     connectedCallback() {
+      const hostRef = getHostRef(this);
+      addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
       connectedCallback(this);
-      if (BUILD19.connectedCallback && originalConnectedCallback) {
+      if (BUILD24.connectedCallback && originalConnectedCallback) {
         originalConnectedCallback.call(this);
       }
     },
     disconnectedCallback() {
       disconnectedCallback(this);
-      if (BUILD19.disconnectedCallback && originalDisconnectedCallback) {
+      if (BUILD24.disconnectedCallback && originalDisconnectedCallback) {
         originalDisconnectedCallback.call(this);
       }
     },
     __attachShadow() {
       if (supportsShadow) {
-        if (BUILD19.shadowDelegatesFocus) {
-          this.attachShadow({
-            mode: "open",
-            delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
-          });
+        if (!this.shadowRoot) {
+          if (BUILD24.shadowDelegatesFocus) {
+            this.attachShadow({
+              mode: "open",
+              delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
+            });
+          } else {
+            this.attachShadow({ mode: "open" });
+          }
         } else {
-          this.attachShadow({ mode: "open" });
+          if (this.shadowRoot.mode !== "open") {
+            throw new Error(
+              `Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`
+            );
+          }
         }
       } else {
         this.shadowRoot = this;
@@ -2443,7 +2660,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
   return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
 };
 var forceModeUpdate = (elm) => {
-  if (BUILD19.style && BUILD19.mode && !BUILD19.lazyLoad) {
+  if (BUILD24.style && BUILD24.mode && !BUILD24.lazyLoad) {
     const mode = computeMode(elm);
     const hostRef = getHostRef(elm);
     if (hostRef.$modeName$ !== mode) {
@@ -2466,7 +2683,7 @@ var forceModeUpdate = (elm) => {
 };
 
 // src/runtime/bootstrap-lazy.ts
-import { BUILD as BUILD20 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD25 } from "@stencil/core/internal/app-data";
 
 // src/runtime/hmr-component.ts
 var hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
@@ -2478,7 +2695,7 @@ var hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
 // src/runtime/bootstrap-lazy.ts
 var bootstrapLazy = (lazyBundles, options = {}) => {
   var _a;
-  if (BUILD20.profile && performance.mark) {
+  if (BUILD25.profile && performance.mark) {
     performance.mark("st:app:start");
   }
   installDevTools();
@@ -2496,15 +2713,15 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let i2 = 0;
   Object.assign(plt, options);
   plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", doc.baseURI).href;
-  if (BUILD20.asyncQueue) {
+  if (BUILD25.asyncQueue) {
     if (options.syncQueue) {
       plt.$flags$ |= 4 /* queueSync */;
     }
   }
-  if (BUILD20.hydrateClientSide) {
+  if (BUILD25.hydrateClientSide) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
-  if (BUILD20.hydrateClientSide && BUILD20.shadowDom) {
+  if (BUILD25.hydrateClientSide && BUILD25.shadowDom) {
     for (; i2 < styles2.length; i2++) {
       registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
     }
@@ -2522,44 +2739,58 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
         hasSlotRelocation = true;
       }
-      if (BUILD20.member) {
+      if (BUILD25.member) {
         cmpMeta.$members$ = compactMeta[2];
       }
-      if (BUILD20.hostListener) {
+      if (BUILD25.hostListener) {
         cmpMeta.$listeners$ = compactMeta[3];
       }
-      if (BUILD20.reflect) {
+      if (BUILD25.reflect) {
         cmpMeta.$attrsToReflect$ = [];
       }
-      if (BUILD20.watchCallback) {
+      if (BUILD25.watchCallback) {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
       }
-      if (BUILD20.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+      if (BUILD25.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
       }
-      const tagName = BUILD20.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
+      const tagName = BUILD25.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
         constructor(self) {
           super(self);
+          this.hasRegisteredEventListeners = false;
           self = this;
           registerHost(self, cmpMeta);
-          if (BUILD20.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+          if (BUILD25.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             if (supportsShadow) {
-              if (BUILD20.shadowDelegatesFocus) {
-                self.attachShadow({
-                  mode: "open",
-                  delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
-                });
+              if (!self.shadowRoot) {
+                if (BUILD25.shadowDelegatesFocus) {
+                  self.attachShadow({
+                    mode: "open",
+                    delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
+                  });
+                } else {
+                  self.attachShadow({ mode: "open" });
+                }
               } else {
-                self.attachShadow({ mode: "open" });
+                if (self.shadowRoot.mode !== "open") {
+                  throw new Error(
+                    `Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${self.shadowRoot.mode} but Stencil only supports open shadow roots.`
+                  );
+                }
               }
-            } else if (!BUILD20.hydrateServerSide && !("shadowRoot" in self)) {
+            } else if (!BUILD25.hydrateServerSide && !("shadowRoot" in self)) {
               self.shadowRoot = self;
             }
           }
         }
         connectedCallback() {
+          const hostRef = getHostRef(this);
+          if (!this.hasRegisteredEventListeners) {
+            this.hasRegisteredEventListeners = true;
+            addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
+          }
           if (appLoadFallback) {
             clearTimeout(appLoadFallback);
             appLoadFallback = null;
@@ -2577,28 +2808,28 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           return getHostRef(this).$onReadyPromise$;
         }
       };
-      if (BUILD20.experimentalSlotFixes) {
-        if (BUILD20.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+      if (BUILD25.experimentalSlotFixes) {
+        if (BUILD25.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
           patchPseudoShadowDom(HostElement.prototype, cmpMeta);
         }
       } else {
-        if (BUILD20.slotChildNodesFix) {
+        if (BUILD25.slotChildNodesFix) {
           patchChildSlotNodes(HostElement.prototype, cmpMeta);
         }
-        if (BUILD20.cloneNodeFix) {
+        if (BUILD25.cloneNodeFix) {
           patchCloneNode(HostElement.prototype);
         }
-        if (BUILD20.appendChildSlotFix) {
+        if (BUILD25.appendChildSlotFix) {
           patchSlotAppendChild(HostElement.prototype);
         }
-        if (BUILD20.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+        if (BUILD25.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
           patchTextContent(HostElement.prototype);
         }
       }
-      if (BUILD20.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */) {
+      if (BUILD25.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */) {
         HostElement.formAssociated = true;
       }
-      if (BUILD20.hotModuleReplacement) {
+      if (BUILD25.hotModuleReplacement) {
         HostElement.prototype["s-hmr"] = function(hmrVersionId) {
           hmrStart(this, cmpMeta, hmrVersionId);
         };
@@ -2617,8 +2848,8 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
     if (hasSlotRelocation) {
       dataStyles.textContent += SLOT_FB_CSS;
     }
-    if (BUILD20.invisiblePrehydration && (BUILD20.hydratedClass || BUILD20.hydratedAttribute)) {
-      dataStyles.textContent += cmpTags + HYDRATED_CSS;
+    if (BUILD25.invisiblePrehydration && (BUILD25.hydratedClass || BUILD25.hydratedAttribute)) {
+      dataStyles.textContent += cmpTags.sort() + HYDRATED_CSS;
     }
     if (dataStyles.innerHTML.length) {
       dataStyles.setAttribute("data-styles", "");
@@ -2633,7 +2864,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   if (deferredConnectedCallbacks.length) {
     deferredConnectedCallbacks.map((host) => host.connectedCallback());
   } else {
-    if (BUILD20.profile) {
+    if (BUILD25.profile) {
       plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30, "timeout"));
     } else {
       plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30));
@@ -2646,10 +2877,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 var Fragment = (_, children) => children;
 
 // src/runtime/host-listener.ts
-import { BUILD as BUILD21 } from "@stencil/core/internal/app-data";
+import { BUILD as BUILD26 } from "@stencil/core/internal/app-data";
 var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-  if (BUILD21.hostListener && listeners) {
-    if (BUILD21.hostListenerTargetParent) {
+  if (BUILD26.hostListener && listeners) {
+    if (BUILD26.hostListenerTargetParent) {
       if (attachParentListeners) {
         listeners = listeners.filter(([flags]) => flags & 32 /* TargetParent */);
       } else {
@@ -2657,7 +2888,7 @@ var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) =>
       }
     }
     listeners.map(([flags, name, method]) => {
-      const target = BUILD21.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
+      const target = BUILD26.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
       const handler = hostListenerProxy(hostRef, method);
       const opts = hostListenerOpts(flags);
       plt.ael(target, name, handler, opts);
@@ -2668,7 +2899,7 @@ var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) =>
 var hostListenerProxy = (hostRef, methodName) => (ev) => {
   var _a;
   try {
-    if (BUILD21.lazyLoad) {
+    if (BUILD26.lazyLoad) {
       if (hostRef.$flags$ & 256 /* isListenReady */) {
         (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
       } else {
@@ -2682,10 +2913,10 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
   }
 };
 var getHostListenerTarget = (elm, flags) => {
-  if (BUILD21.hostListenerTargetDocument && flags & 4 /* TargetDocument */) return doc;
-  if (BUILD21.hostListenerTargetWindow && flags & 8 /* TargetWindow */) return win;
-  if (BUILD21.hostListenerTargetBody && flags & 16 /* TargetBody */) return doc.body;
-  if (BUILD21.hostListenerTargetParent && flags & 32 /* TargetParent */ && elm.parentElement)
+  if (BUILD26.hostListenerTargetDocument && flags & 4 /* TargetDocument */) return doc;
+  if (BUILD26.hostListenerTargetWindow && flags & 8 /* TargetWindow */) return win;
+  if (BUILD26.hostListenerTargetBody && flags & 16 /* TargetBody */) return doc.body;
+  if (BUILD26.hostListenerTargetParent && flags & 32 /* TargetParent */ && elm.parentElement)
     return elm.parentElement;
   return elm;
 };
@@ -2752,6 +2983,7 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
   }
 };
 var parseVNodeAnnotations = (doc2, node, docData, orgLocationNodes) => {
+  var _a;
   if (node == null) {
     return;
   }
@@ -2759,7 +2991,8 @@ var parseVNodeAnnotations = (doc2, node, docData, orgLocationNodes) => {
     orgLocationNodes.push(node);
   }
   if (node.nodeType === 1 /* ElementNode */) {
-    node.childNodes.forEach((childNode) => {
+    const childNodes = [...Array.from(node.childNodes), ...Array.from(((_a = node.shadowRoot) == null ? void 0 : _a.childNodes) || [])];
+    childNodes.forEach((childNode) => {
       const hostRef = getHostRef(childNode);
       if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) {
         const cmpData = {
@@ -2835,212 +3068,6 @@ var insertChildVNodeAnnotations = (doc2, vnodeChild, cmpData, hostId, depth, ind
     });
   }
 };
-
-// src/client/client-host-ref.ts
-var hostRefs = BUILD22.hotModuleReplacement ? window.__STENCIL_HOSTREFS__ || (window.__STENCIL_HOSTREFS__ = /* @__PURE__ */ new WeakMap()) : /* @__PURE__ */ new WeakMap();
-var getHostRef = (ref) => hostRefs.get(ref);
-var registerInstance = (lazyInstance, hostRef) => hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
-var registerHost = (hostElement, cmpMeta) => {
-  const hostRef = {
-    $flags$: 0,
-    $hostElement$: hostElement,
-    $cmpMeta$: cmpMeta,
-    $instanceValues$: /* @__PURE__ */ new Map()
-  };
-  if (BUILD22.isDev) {
-    hostRef.$renderCount$ = 0;
-  }
-  if (BUILD22.method && BUILD22.lazyLoad) {
-    hostRef.$onInstancePromise$ = new Promise((r) => hostRef.$onInstanceResolve$ = r);
-  }
-  if (BUILD22.asyncLoading) {
-    hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
-    hostElement["s-p"] = [];
-    hostElement["s-rc"] = [];
-  }
-  addHostEventListeners(hostElement, hostRef, cmpMeta.$listeners$, false);
-  return hostRefs.set(hostElement, hostRef);
-};
-var isMemberInElement = (elm, memberName) => memberName in elm;
-
-// src/client/client-load-module.ts
-import { BUILD as BUILD24 } from "@stencil/core/internal/app-data";
-
-// src/client/client-log.ts
-import { BUILD as BUILD23 } from "@stencil/core/internal/app-data";
-var customError;
-var consoleError = (e, el) => (customError || console.error)(e, el);
-var STENCIL_DEV_MODE = BUILD23.isTesting ? ["STENCIL:"] : [
-  "%cstencil",
-  "color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px"
-];
-var consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
-var consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
-var consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m);
-var setErrorHandler = (handler) => customError = handler;
-
-// src/client/client-load-module.ts
-var cmpModules = /* @__PURE__ */ new Map();
-var MODULE_IMPORT_PREFIX = "./";
-var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
-  const exportName = cmpMeta.$tagName$.replace(/-/g, "_");
-  const bundleId = cmpMeta.$lazyBundleId$;
-  if (BUILD24.isDev && typeof bundleId !== "string") {
-    consoleDevError(
-      `Trying to lazily load component <${cmpMeta.$tagName$}> with style mode "${hostRef.$modeName$}", but it does not exist.`
-    );
-    return void 0;
-  } else if (!bundleId) {
-    return void 0;
-  }
-  const module = !BUILD24.hotModuleReplacement ? cmpModules.get(bundleId) : false;
-  if (module) {
-    return module[exportName];
-  }
-  /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-  return import(
-    /* @vite-ignore */
-    /* webpackInclude: /\.entry\.js$/ */
-    /* webpackExclude: /\.system\.entry\.js$/ */
-    /* webpackMode: "lazy" */
-    `./${bundleId}.entry.js${BUILD24.hotModuleReplacement && hmrVersionId ? "?s-hmr=" + hmrVersionId : ""}`
-  ).then((importedModule) => {
-    if (!BUILD24.hotModuleReplacement) {
-      cmpModules.set(bundleId, importedModule);
-    }
-    return importedModule[exportName];
-  }, consoleError);
-};
-
-// src/client/client-style.ts
-var styles = /* @__PURE__ */ new Map();
-var modeResolutionChain = [];
-
-// src/client/client-task-queue.ts
-import { BUILD as BUILD26 } from "@stencil/core/internal/app-data";
-
-// src/client/client-window.ts
-import { BUILD as BUILD25 } from "@stencil/core/internal/app-data";
-var win = typeof window !== "undefined" ? window : {};
-var doc = win.document || { head: {} };
-var H = win.HTMLElement || class {
-};
-var plt = {
-  $flags$: 0,
-  $resourcesUrl$: "",
-  jmp: (h2) => h2(),
-  raf: (h2) => requestAnimationFrame(h2),
-  ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
-  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
-  ce: (eventName, opts) => new CustomEvent(eventName, opts)
-};
-var setPlatformHelpers = (helpers) => {
-  Object.assign(plt, helpers);
-};
-var supportsShadow = (
-  // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
-  BUILD25.shadowDomShim && BUILD25.shadowDom ? /* @__PURE__ */ (() => (doc.head.attachShadow + "").indexOf("[native") > -1)() : true
-);
-var supportsListenerOptions = /* @__PURE__ */ (() => {
-  let supportsListenerOptions2 = false;
-  try {
-    doc.addEventListener(
-      "e",
-      null,
-      Object.defineProperty({}, "passive", {
-        get() {
-          supportsListenerOptions2 = true;
-        }
-      })
-    );
-  } catch (e) {
-  }
-  return supportsListenerOptions2;
-})();
-var promiseResolve = (v) => Promise.resolve(v);
-var supportsConstructableStylesheets = BUILD25.constructableCSS ? /* @__PURE__ */ (() => {
-  try {
-    new CSSStyleSheet();
-    return typeof new CSSStyleSheet().replaceSync === "function";
-  } catch (e) {
-  }
-  return false;
-})() : false;
-
-// src/client/client-task-queue.ts
-var queueCongestion = 0;
-var queuePending = false;
-var queueDomReads = [];
-var queueDomWrites = [];
-var queueDomWritesLow = [];
-var queueTask = (queue, write) => (cb) => {
-  queue.push(cb);
-  if (!queuePending) {
-    queuePending = true;
-    if (write && plt.$flags$ & 4 /* queueSync */) {
-      nextTick(flush);
-    } else {
-      plt.raf(flush);
-    }
-  }
-};
-var consume = (queue) => {
-  for (let i2 = 0; i2 < queue.length; i2++) {
-    try {
-      queue[i2](performance.now());
-    } catch (e) {
-      consoleError(e);
-    }
-  }
-  queue.length = 0;
-};
-var consumeTimeout = (queue, timeout) => {
-  let i2 = 0;
-  let ts = 0;
-  while (i2 < queue.length && (ts = performance.now()) < timeout) {
-    try {
-      queue[i2++](ts);
-    } catch (e) {
-      consoleError(e);
-    }
-  }
-  if (i2 === queue.length) {
-    queue.length = 0;
-  } else if (i2 !== 0) {
-    queue.splice(0, i2);
-  }
-};
-var flush = () => {
-  if (BUILD26.asyncQueue) {
-    queueCongestion++;
-  }
-  consume(queueDomReads);
-  if (BUILD26.asyncQueue) {
-    const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */ ? performance.now() + 14 * Math.ceil(queueCongestion * (1 / 10)) : Infinity;
-    consumeTimeout(queueDomWrites, timeout);
-    consumeTimeout(queueDomWritesLow, timeout);
-    if (queueDomWrites.length > 0) {
-      queueDomWritesLow.push(...queueDomWrites);
-      queueDomWrites.length = 0;
-    }
-    if (queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0) {
-      plt.raf(flush);
-    } else {
-      queueCongestion = 0;
-    }
-  } else {
-    consume(queueDomWrites);
-    if (queuePending = queueDomReads.length > 0) {
-      plt.raf(flush);
-    }
-  }
-};
-var nextTick = (cb) => promiseResolve().then(cb);
-var readTask = /* @__PURE__ */ queueTask(queueDomReads, false);
-var writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
-
-// src/client/index.ts
-import { BUILD as BUILD27, Env, NAMESPACE as NAMESPACE2 } from "@stencil/core/internal/app-data";
 export {
   BUILD27 as BUILD,
   Build,