@rindo/core 4.18.3 → 4.19.0

package/internal/client/index.js

@@ -1,5 +1,5 @@
 /*
- Rindo Client Platform v4.18.3 | MIT Licensed | https://rindojs.web.app
+ Rindo Client Platform v4.19.0 | MIT Licensed | https://rindojs.web.app
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -17,7 +17,226 @@ var Build = {
 };
 
 // src/client/client-host-ref.ts
-import { BUILD as BUILD22 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD2 } from "@rindo/core/internal/app-data";
+var hostRefs = BUILD2.hotModuleReplacement ? window.__RINDO_HOSTREFS__ || (window.__RINDO_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 "@rindo/core/internal/app-data";
+
+// src/client/client-log.ts
+import { BUILD as BUILD3 } from "@rindo/core/internal/app-data";
+var customError;
+var consoleError = (e, el) => (customError || console.error)(e, el);
+var RINDO_DEV_MODE = BUILD3.isTesting ? ["RINDO:"] : [
+  "%crindo",
+  "color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px"
+];
+var consoleDevError = (...m) => console.error(...RINDO_DEV_MODE, ...m);
+var consoleDevWarn = (...m) => console.warn(...RINDO_DEV_MODE, ...m);
+var consoleDevInfo = (...m) => console.info(...RINDO_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];
+  }
+  /*!__RINDO_STATIC_IMPORT_SWITCH__*/
+  return import(
+    /* @wite-ignore */
+    /* @lahm-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 "@rindo/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 "@rindo/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 "@rindo/core/internal/app-data";
 
 // src/runtime/asset-path.ts
 var getAssetPath = (path) => {
@@ -27,7 +246,7 @@ var getAssetPath = (path) => {
 var setAssetPath = (path) => plt.$resourcesUrl$ = path;
 
 // src/runtime/bootstrap-custom-element.ts
-import { BUILD as BUILD19 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD24 } from "@rindo/core/internal/app-data";
 
 // src/utils/constants.ts
 var EMPTY_OBJ = {};
@@ -97,16 +316,16 @@ var unwrapErr = (result) => {
 };
 
 // src/runtime/connected-callback.ts
-import { BUILD as BUILD16 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD21 } from "@rindo/core/internal/app-data";
 
 // src/runtime/client-hydrate.ts
-import { BUILD as BUILD4 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD9 } from "@rindo/core/internal/app-data";
 
 // src/runtime/profile.ts
-import { BUILD as BUILD2 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD7 } from "@rindo/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(`[Rindo] ${fnName}() <${tagName}>`, key);
@@ -117,7 +336,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 +394,7 @@ var inspect = (ref) => {
   };
 };
 var installDevTools = () => {
-  if (BUILD2.devTools) {
+  if (BUILD7.devTools) {
     const rindo = win.rindo = win.rindo || {};
     const originalInspect = rindo.inspect;
     rindo.inspect = (ref) => {
@@ -188,26 +407,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 "@rindo/core/internal/app-data";
+import { BUILD as BUILD8 } from "@rindo/core/internal/app-data";
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -223,7 +424,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 +440,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 +473,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 +489,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 +553,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 +577,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 +687,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 +704,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 +742,7 @@ var initializeDocumentHydrate = (node, orgLocNodes) => {
 };
 
 // src/runtime/initialize-component.ts
-import { BUILD as BUILD15 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD20 } from "@rindo/core/internal/app-data";
 
 // src/runtime/mode.ts
 var computeMode = (elm) => modeResolutionChain.map((h2) => h2(elm)).find((m) => !!m);
@@ -549,22 +750,22 @@ var setMode = (handler) => modeResolutionChain.push(handler);
 var getMode = (ref) => getHostRef(ref).$modeName$;
 
 // src/runtime/proxy-component.ts
-import { BUILD as BUILD14 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD19 } from "@rindo/core/internal/app-data";
 
 // src/runtime/set-value.ts
-import { BUILD as BUILD13 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD18 } from "@rindo/core/internal/app-data";
 
 // src/runtime/parse-property-value.ts
-import { BUILD as BUILD5 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD10 } from "@rindo/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 +774,21 @@ var parsePropertyValue = (propValue, propType) => {
 };
 
 // src/runtime/update-component.ts
-import { BUILD as BUILD12, NAMESPACE } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD17, NAMESPACE } from "@rindo/core/internal/app-data";
 
 // src/runtime/event-emitter.ts
-import { BUILD as BUILD7 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD12 } from "@rindo/core/internal/app-data";
 
 // src/runtime/element.ts
-import { BUILD as BUILD6 } from "@rindo/core/internal/app-data";
-var getElement = (ref) => BUILD6.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
+import { BUILD as BUILD11 } from "@rindo/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 +807,7 @@ var emitEvent = (elm, name, opts) => {
 };
 
 // src/runtime/styles.ts
-import { BUILD as BUILD8 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD13 } from "@rindo/core/internal/app-data";
 var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
 var registerStyle = (scopeId2, cssText, allowCS) => {
   let style = styles.get(scopeId2);
@@ -624,22 +825,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 +851,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 +863,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 +875,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 "@rindo/core/internal/app-data";
+import { BUILD as BUILD16 } from "@rindo/core/internal/app-data";
 
 // src/runtime/vdom/update-element.ts
-import { BUILD as BUILD10 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD15 } from "@rindo/core/internal/app-data";
 
 // src/runtime/vdom/set-accessor.ts
-import { BUILD as BUILD9 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD14 } from "@rindo/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 +923,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 +953,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 +971,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 +979,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 +987,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 +1006,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 +1042,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 +1060,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://rindojs.web.app/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 +1099,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 +1108,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 +1116,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 +1145,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 +1169,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 +1179,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 +1191,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 +1235,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 +1243,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 +1252,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 +1260,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 +1275,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 +1292,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 +1319,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 +1333,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 +1390,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 +1444,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 +1489,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 +1503,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 +1519,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 +1547,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 +1566,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 +1592,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 +1613,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 Rindo runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://rindojs.web.app/docs/custom-elements#externalruntime`
@@ -1437,7 +1640,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 +1648,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 +1704,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 +1726,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 +1739,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 +1766,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 +1828,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 +1839,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(`[Rindo] ${NAMESPACE} initial load (by ${who})`, "st:app:start");
   }
 };
@@ -1655,7 +1861,7 @@ var safeCall = (instance, method, arg) => {
   return void 0;
 };
 var emitLifecycleEvent = (elm, lifecycleName) => {
-  if (BUILD12.lifecycleDOMEvents) {
+  if (BUILD17.lifecycleDOMEvents) {
     emitEvent(elm, "rindo_" + lifecycleName, {
       bubbles: true,
       composed: true,
@@ -1667,7 +1873,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 +1892,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 Rindo runtime. This usually happens when integrating a 3rd party Rindo component with another Rindo component or application.`
     );
   }
-  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 +1929,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 +1942,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 +1956,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 +1978,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 +2010,7 @@ More information: https://rindojs.web.app/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 +2023,7 @@ More information: https://rindojs.web.app/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 +2038,8 @@ More information: https://rindojs.web.app/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 +2054,12 @@ More information: https://rindojs.web.app/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 +2077,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 +2092,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 +2108,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 +2121,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(RINDO-854): Remove code related to legacy shadowDomShim field
-        BUILD15.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
+        if (!BUILD20.hydrateServerSide && BUILD20.shadowDom && // TODO(RINDO-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 +2148,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 +2166,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(RINDO-854): Remove code related to legacy shadowDomShim field
+      if (BUILD21.slotRelocation && !hostId) {
+        if (BUILD21.hydrateServerSide || (BUILD21.slot || BUILD21.shadowDom) && // TODO(RINDO-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 +2206,7 @@ var connectedCallback = (elm) => {
           }
         });
       }
-      if (BUILD16.initializeNextTick) {
+      if (BUILD21.initializeNextTick) {
         nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
       } else {
         initializeComponent(elm, hostRef, cmpMeta);
@@ -2016,32 +2224,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 "@rindo/core/internal/app-data";
+import { BUILD as BUILD22 } from "@rindo/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 +2260,7 @@ var disconnectedCallback = async (elm) => {
 };
 
 // src/runtime/dom-extras.ts
-import { BUILD as BUILD18 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD23 } from "@rindo/core/internal/app-data";
 var patchPseudoShadowDom = (hostElementPrototype, descriptorPrototype) => {
   patchCloneNode(hostElementPrototype);
   patchSlotAppendChild(hostElementPrototype);
@@ -2069,9 +2277,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, nonRindoNode;
       const rindoPrivates = [
@@ -2095,7 +2303,7 @@ var patchCloneNode = (HostElementPrototype) => {
         slotted = srcNode.childNodes[i2]["s-nr"];
         nonRindoNode = rindoPrivates.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 +2429,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 +2581,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 +2621,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 Rindo only supports open shadow roots.`
+            );
+          }
         }
       } else {
         this.shadowRoot = this;
@@ -2443,7 +2661,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 +2684,7 @@ var forceModeUpdate = (elm) => {
 };
 
 // src/runtime/bootstrap-lazy.ts
-import { BUILD as BUILD20 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD25 } from "@rindo/core/internal/app-data";
 
 // src/runtime/hmr-component.ts
 var hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
@@ -2478,7 +2696,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 +2714,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 +2740,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 {
         // RindoLazyHost
         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 Rindo 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 +2809,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 +2849,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 +2865,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 +2878,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 var Fragment = (_, children) => children;
 
 // src/runtime/host-listener.ts
-import { BUILD as BUILD21 } from "@rindo/core/internal/app-data";
+import { BUILD as BUILD26 } from "@rindo/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 +2889,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 +2900,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 +2914,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 +2984,7 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
   }
 };
 var parseVNodeAnnotations = (doc2, node, docData, orgLocationNodes) => {
+  var _a;
   if (node == null) {
     return;
   }
@@ -2759,7 +2992,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,213 +3069,6 @@ var insertChildVNodeAnnotations = (doc2, vnodeChild, cmpData, hostId, depth, ind
     });
   }
 };
-
-// src/client/client-host-ref.ts
-var hostRefs = BUILD22.hotModuleReplacement ? window.__RINDO_HOSTREFS__ || (window.__RINDO_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 "@rindo/core/internal/app-data";
-
-// src/client/client-log.ts
-import { BUILD as BUILD23 } from "@rindo/core/internal/app-data";
-var customError;
-var consoleError = (e, el) => (customError || console.error)(e, el);
-var RINDO_DEV_MODE = BUILD23.isTesting ? ["RINDO:"] : [
-  "%crindo",
-  "color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px"
-];
-var consoleDevError = (...m) => console.error(...RINDO_DEV_MODE, ...m);
-var consoleDevWarn = (...m) => console.warn(...RINDO_DEV_MODE, ...m);
-var consoleDevInfo = (...m) => console.info(...RINDO_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];
-  }
-  /*!__RINDO_STATIC_IMPORT_SWITCH__*/
-  return import(
-    /* @wite-ignore */
-    /* @lahm-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 "@rindo/core/internal/app-data";
-
-// src/client/client-window.ts
-import { BUILD as BUILD25 } from "@rindo/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(RINDO-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 "@rindo/core/internal/app-data";
 export {
   BUILD27 as BUILD,
   Build,