@stencil/core 5.0.0-alpha.8 → 5.0.0-beta.0

package/dist/runtime/client/lazy.js

@@ -1,5 +1,5 @@
-import { BUILD as BUILD$1, Env, NAMESPACE } from "@stencil/core/runtime/app-data";
-import { globalStyles } from "@stencil/core/runtime/app-globals";
+import { BUILD as BUILD$1, Env, NAMESPACE } from "@stencil/core/app-data";
+import { globalStyles } from "@stencil/core/app-globals";
 import { effect, effect as effect$1, signal } from "@preact/signals-core";
 //#region src/app-data/lazy.ts
 const BUILD = {
@@ -144,8 +144,20 @@ const HOST_FLAGS = {
 	isWatchReady: 128,
 	isListenReady: 256,
 	needsRerender: 512,
-	devOnRender: 1024,
-	devOnDidLoad: 2048
+	/**
+	* Set once this component's real (lazy-loaded) `connectedCallback` has fired for
+	* the first time. Lets a descendant skip creating/awaiting a connect-promise for
+	* an ancestor that's already connected. See {@link HostRef.$onFirstConnectResolve$}.
+	*/
+	hasFiredConnected: 1024,
+	/**
+	* Set when a lazy component's dynamic `import()` fails to resolve a
+	* constructor. Distinct from `hasInitializedComponent` being unset, which
+	* is true while an initialization attempt is merely queued/in-flight.
+	*/
+	hasFailedLoad: 2048,
+	devOnRender: 4096,
+	devOnDidLoad: 8192
 };
 const CF_scopedCssEncapsulation = 2;
 /**
@@ -230,7 +242,17 @@ const CMP_FLAGS = {
 	* e.g. `encapsulation: { type: 'none', patches: ['all'] }`
 	* Equivalent to the global `experimentalSlotFixes` config option.
 	*/
-	patchAll: 32768
+	patchAll: 32768,
+	/**
+	* Determines if `clonable` is enabled for a component that uses the shadow DOM.
+	* e.g. `encapsulation: { type: 'shadow', clonable: true }` is set on the `@Component()` decorator
+	*/
+	shadowClonable: 65536,
+	/**
+	* Determines if `serializable` is enabled for a component that uses the shadow DOM.
+	* e.g. `encapsulation: { type: 'shadow', serializable: true }` is set on the `@Component()` decorator
+	*/
+	shadowSerializable: 1 << 17
 };
 /**
 * Namespaces
@@ -377,8 +399,13 @@ const registerHost = (hostElement, cmpMeta) => {
 	if (BUILD.asyncLoading) {
 		hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
 		hostElement["s-rp"] = hostRef.$onReadyPromise$;
+		if (!BUILD.lazyLoad) {
+			hostRef.$onFirstConnectPromise$ = new Promise((r) => hostRef.$onFirstConnectResolve$ = r);
+			hostElement["s-fc"] = hostRef.$onFirstConnectPromise$;
+		}
 		if (!hostElement["s-p"]) hostElement["s-p"] = [];
 		if (!hostElement["s-rc"]) hostElement["s-rc"] = [];
+		if (!hostElement["s-pc"]) hostElement["s-pc"] = [];
 	}
 	if (BUILD.lazyLoad) hostRef.$fetchedCbList$ = [];
 	const ref = hostRef;
@@ -398,7 +425,12 @@ const consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m);
 const setErrorHandler = (handler) => customError = handler;
 //#endregion
 //#region src/client/client-load-module.ts
-const cmpModules = /* @__PURE__ */ new Map();
+const cmpModules = /*@__PURE__*/ new Map();
+/**
+* Tracks how many times a dynamic `import()` for a given lazy bundle has failed.
+* Used to cache bust the retry attempt in connected-callback.ts
+*/
+const failedLoadAttempts = /*@__PURE__*/ new Map();
 /**
 * We need to separate out this prefix so that Esbuild doesn't try to resolve
 * the below, but instead retains a dynamic `import()` statement in the
@@ -429,13 +461,21 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 	} else if (!bundleId) return;
 	const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
 	if (module) return module[exportName];
+	const retryCount = failedLoadAttempts.get(bundleId) ?? 0;
+	const cacheBustParams = [retryCount > 0 ? `s-retry=${retryCount}` : "", BUILD.hotModuleReplacement && hmrVersionId ? `s-hmr=${hmrVersionId}` : ""].filter(Boolean).join("&");
 	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-	const entryFile = `${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? "?s-hmr=" + hmrVersionId : ""}`;
+	const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
 	const onLoad = (importedModule) => {
-		if (!BUILD.hotModuleReplacement) cmpModules.set(bundleId, importedModule);
+		if (!BUILD.hotModuleReplacement) {
+			failedLoadAttempts.delete(bundleId);
+			cmpModules.set(bundleId, importedModule);
+		}
 		return importedModule[exportName];
 	};
-	const onError = (e) => consoleError(e, hostRef.$hostElement$);
+	const onError = (e) => {
+		failedLoadAttempts.set(bundleId, retryCount + 1);
+		consoleError(e, hostRef.$hostElement$);
+	};
 	if (lazyLoadBasePath) return import(
 		/* @vite-ignore */
 		/* webpackInclude: /\.entry\.js$/ */
@@ -453,7 +493,7 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 };
 //#endregion
 //#region src/client/client-style.ts
-const styles = /* @__PURE__ */ new Map();
+const styles = /*@__PURE__*/ new Map();
 const modeResolutionChain = [];
 const setScopedSsr = (_opts) => {};
 const needsScopedSSR = () => false;
@@ -508,12 +548,6 @@ const HYDRATE_ID = "s-id";
 const HYDRATED_STYLE_ID = "sty-id";
 const HYDRATE_CHILD_ID = "c-id";
 const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
-const STENCIL_DOC_DATA = "_stencilDocData";
-const DEFAULT_DOC_DATA = {
-	hostIds: 0,
-	rootLevelIds: 0,
-	staticComponents: /* @__PURE__ */ new Set()
-};
 /**
 * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
 *
@@ -522,6 +556,10 @@ const DEFAULT_DOC_DATA = {
 */
 const SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 const XLINK_NS = "http://www.w3.org/1999/xlink";
+/**
+* Minimum delay, in milliseconds, before retrying a failed lazy component load.
+*/
+const LAZY_LOAD_RETRY_INTERVAL_MS = 1e3;
 const FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
 	"formAssociatedCallback",
 	"formResetCallback",
@@ -544,7 +582,7 @@ const plt = {
 const setPlatformHelpers = (helpers) => {
 	Object.assign(plt, helpers);
 };
-const supportsListenerOptions = /* @__PURE__ */ (() => {
+const supportsListenerOptions = /*@__PURE__*/ (() => {
 	let supported = false;
 	try {
 		win.document?.addEventListener("e", null, Object.defineProperty({}, "passive", { get() {
@@ -554,14 +592,14 @@ const supportsListenerOptions = /* @__PURE__ */ (() => {
 	return supported;
 })();
 const promiseResolve = (v) => Promise.resolve(v);
-const supportsConstructableStylesheets = BUILD.constructableCSS ? /* @__PURE__ */ (() => {
+const supportsConstructableStylesheets = BUILD.constructableCSS ? /*@__PURE__*/ (() => {
 	try {
 		if (!win.document.adoptedStyleSheets) return false;
 		return typeof new CSSStyleSheet().replaceSync === "function";
 	} catch {}
 	return false;
 })() : false;
-const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? /* @__PURE__ */ (() => !!win.document && Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, "length").writable)() : false;
+const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? /*@__PURE__*/ (() => !!win.document && Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, "length").writable)() : false;
 //#endregion
 //#region src/client/client-task-queue.ts
 let queueCongestion = 0;
@@ -569,12 +607,13 @@ let queuePending = false;
 const queueDomReads = [];
 const queueDomWrites = [];
 const queueDomWritesLow = [];
+const scheduleFlush = () => win.document?.hidden ? nextTick(flush) : plt.raf(flush);
 const queueTask = (queue, write) => (cb) => {
 	queue.push(cb);
 	if (!queuePending) {
 		queuePending = true;
 		if (write && plt.$flags$ & PLATFORM_FLAGS.queueSync) nextTick(flush);
-		else plt.raf(flush);
+		else scheduleFlush();
 	}
 };
 const consume = (queue) => {
@@ -607,16 +646,16 @@ const flush = () => {
 			queueDomWritesLow.push(...queueDomWrites);
 			queueDomWrites.length = 0;
 		}
-		if (queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0) plt.raf(flush);
+		if (queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0) scheduleFlush();
 		else queueCongestion = 0;
 	} else {
 		consume(queueDomWrites);
-		if (queuePending = queueDomReads.length > 0) plt.raf(flush);
+		if (queuePending = queueDomReads.length > 0) scheduleFlush();
 	}
 };
 const nextTick = (cb) => promiseResolve().then(cb);
-const readTask = /* @__PURE__ */ queueTask(queueDomReads, false);
-const writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
+const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
+const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 //#endregion
 //#region src/runtime/asset-path.ts
 const getAssetPath = (path) => {
@@ -653,12 +692,15 @@ function createShadowRoot(cmpMeta) {
 	if (BUILD.shadowSlotAssignmentManual) {
 		if (!!(cmpMeta.$flags$ & CMP_FLAGS.shadowSlotAssignmentManual)) opts.slotAssignment = "manual";
 	}
+	if (BUILD.shadowClonable) opts.clonable = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowClonable);
+	if (BUILD.shadowSerializable) opts.serializable = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowSerializable);
 	const shadowRoot = this.attachShadow(opts);
 	if (BUILD.shadowModeClosed && isClosed) this.__shadowRoot = shadowRoot;
 	if (globalStyleSheet === void 0) globalStyleSheet = createStyleSheetIfNeededAndSupported(globalStyles) ?? null;
-	if (globalStyleSheet) if (supportsMutableAdoptedStyleSheets) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
-	else shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
-	else if (globalStyles && !supportsConstructableStylesheets) {
+	if (globalStyleSheet) {
+		if (supportsMutableAdoptedStyleSheets) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
+		else shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
+	} else if (globalStyles && !supportsConstructableStylesheets) {
 		const styleElm = document.createElement("style");
 		styleElm.innerHTML = globalStyles;
 		if (BUILD.hotModuleReplacement) styleElm.setAttribute(HYDRATED_STYLE_ID, GLOBAL_STYLE_ID);
@@ -683,8 +725,10 @@ function createShadowRoot(cmpMeta) {
 const updateFallbackSlotVisibility = (elm) => {
 	const childNodes = internalCall(elm, "childNodes");
 	if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
-		if (slotNode.nodeType === NODE_TYPE.ElementNode && slotNode.tagName === "SLOT-FB") if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) slotNode.hidden = true;
-		else slotNode.hidden = false;
+		if (slotNode.nodeType === NODE_TYPE.ElementNode && slotNode.tagName === "SLOT-FB") {
+			if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) slotNode.hidden = true;
+			else slotNode.hidden = false;
+		}
 	});
 	let i = 0;
 	for (i = 0; i < childNodes.length; i++) {
@@ -727,7 +771,7 @@ function getHostSlotNodes(childNodes, hostName, slotName) {
 			slottedNodes.push(childNode);
 			if (typeof slotName !== "undefined") return slottedNodes;
 		}
-		slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
+		slottedNodes = [...slottedNodes, ...getHostSlotNodes(internalCall(childNode, "childNodes"), hostName, slotName)];
 	}
 	return slottedNodes;
 }
@@ -758,7 +802,7 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
 		if (nodeToRelocate.getAttribute("slot") === slotName) return true;
 		return false;
 	}
-	if (nodeToRelocate["s-sn"] === slotName) return true;
+	if (typeof nodeToRelocate["s-sa"] === "string") return nodeToRelocate["s-sa"] === slotName;
 	return slotName === "";
 };
 /**
@@ -807,8 +851,10 @@ function patchSlotNode(node) {
 	const assignedFactory = (elementsOnly) => function(opts) {
 		const toReturn = [];
 		const slotName = this["s-sn"];
-		if (opts?.flatten) if (BUILD.isDev) console.error("Flattening is not supported for Stencil non-shadow slots. You can use `.childNodes` for nested slot fallback content.");
-		else console.error("Flattening not supported for Stencil non-shadow slots");
+		if (opts?.flatten) {
+			if (BUILD.isDev) console.error("Flattening is not supported for Stencil non-shadow slots. You can use `.childNodes` for nested slot fallback content.");
+			else console.error("Flattening not supported for Stencil non-shadow slots");
+		}
 		const parent = this["s-cr"].parentElement;
 		(parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes)).forEach((n) => {
 			if (slotName === getSlotName(n)) toReturn.push(n);
@@ -899,8 +945,10 @@ const patchCloneNode = (HostElementPrototype) => {
 			for (; i < childNodes.length; i++) {
 				slotted = childNodes[i]["s-nr"];
 				nonStencilNode = stencilPrivates.every((privateField) => !childNodes[i][privateField]);
-				if (slotted) if (clonedNode.__appendChild) clonedNode.__appendChild(slotted.cloneNode(true));
-				else clonedNode.appendChild(slotted.cloneNode(true));
+				if (slotted) {
+					if (clonedNode.__appendChild) clonedNode.__appendChild(slotted.cloneNode(true));
+					else clonedNode.appendChild(slotted.cloneNode(true));
+				}
 				if (nonStencilNode) clonedNode.appendChild(childNodes[i].cloneNode(true));
 			}
 		}
@@ -1103,11 +1151,11 @@ const patchChildSlotNodes = (elm) => {
 	} });
 	patchHostOriginalAccessor("firstChild", elm);
 	Object.defineProperty(elm, "firstChild", { get() {
-		return this.childNodes[0];
+		return this.childNodes[0] || null;
 	} });
 	patchHostOriginalAccessor("lastChild", elm);
 	Object.defineProperty(elm, "lastChild", { get() {
-		return this.childNodes[this.childNodes.length - 1];
+		return this.childNodes[this.childNodes.length - 1] || null;
 	} });
 	patchHostOriginalAccessor("childNodes", elm);
 	Object.defineProperty(elm, "childNodes", { get() {
@@ -1153,7 +1201,7 @@ const patchNextSibling = (node) => {
 	Object.defineProperty(node, "nextSibling", { get: function() {
 		const parentNodes = this["s-ol"]?.parentNode.childNodes;
 		const index = parentNodes?.indexOf(this);
-		if (parentNodes && index > -1) return parentNodes[index + 1];
+		if (parentNodes && index > -1) return parentNodes[index + 1] || null;
 		return this.__nextSibling;
 	} });
 };
@@ -1168,7 +1216,7 @@ const patchNextElementSibling = (element) => {
 	Object.defineProperty(element, "nextElementSibling", { get: function() {
 		const parentEles = this["s-ol"]?.parentNode.children;
 		const index = parentEles?.indexOf(this);
-		if (parentEles && index > -1) return parentEles[index + 1];
+		if (parentEles && index > -1) return parentEles[index + 1] || null;
 		return this.__nextElementSibling;
 	} });
 };
@@ -1183,7 +1231,7 @@ const patchPreviousSibling = (node) => {
 	Object.defineProperty(node, "previousSibling", { get: function() {
 		const parentNodes = this["s-ol"]?.parentNode.childNodes;
 		const index = parentNodes?.indexOf(this);
-		if (parentNodes && index > -1) return parentNodes[index - 1];
+		if (parentNodes && index > -1) return parentNodes[index - 1] || null;
 		return this.__previousSibling;
 	} });
 };
@@ -1198,7 +1246,7 @@ const patchPreviousElementSibling = (element) => {
 	Object.defineProperty(element, "previousElementSibling", { get: function() {
 		const parentNodes = this["s-ol"]?.parentNode.children;
 		const index = parentNodes?.indexOf(this);
-		if (parentNodes && index > -1) return parentNodes[index - 1];
+		if (parentNodes && index > -1) return parentNodes[index - 1] || null;
 		return this.__previousElementSibling;
 	} });
 };
@@ -1373,7 +1421,7 @@ function queryNonceMetaTagContent(doc) {
 }
 //#endregion
 //#region src/runtime/styles.ts
-const rootAppliedStyles = /* @__PURE__ */ new WeakMap();
+const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
 /**
 * Get or initialize the set of applied style scope IDs for a container element.
 *
@@ -1397,9 +1445,10 @@ const getAppliedStyles = (container) => {
 * @param prepend if true, add to beginning; if false, add to end
 */
 const adoptStylesheet = (container, sheet, prepend = false) => {
-	if (supportsMutableAdoptedStyleSheets) if (prepend) container.adoptedStyleSheets.unshift(sheet);
-	else container.adoptedStyleSheets.push(sheet);
-	else if (prepend) container.adoptedStyleSheets = [sheet, ...container.adoptedStyleSheets];
+	if (supportsMutableAdoptedStyleSheets) {
+		if (prepend) container.adoptedStyleSheets.unshift(sheet);
+		else container.adoptedStyleSheets.push(sheet);
+	} else if (prepend) container.adoptedStyleSheets = [sheet, ...container.adoptedStyleSheets];
 	else container.adoptedStyleSheets = [...container.adoptedStyleSheets, sheet];
 };
 /**
@@ -1412,7 +1461,7 @@ const adoptStylesheet = (container, sheet, prepend = false) => {
 * @returns a new CSSStyleSheet for the correct window
 */
 const createStylesheetForWindow = (container, cssText) => {
-	const sheet = new (container.defaultView ?? container.ownerDocument?.defaultView ?? win).CSSStyleSheet();
+	const sheet = new (container.defaultView ?? (container.ownerDocument?.defaultView) ?? win).CSSStyleSheet();
 	sheet.replaceSync(cssText);
 	return sheet;
 };
@@ -1483,41 +1532,46 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
 				/**
 				* attach styles at the end of the head tag if we render scoped components
 				*/
-				if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) if (styleContainerNode.nodeName === "HEAD") {
-					/**
-					* if the page contains preconnect links, we want to insert the styles
-					* after the last preconnect link to ensure the styles are preloaded
-					*/
-					const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
-					const referenceNode = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
-					styleContainerNode.insertBefore(styleElm, referenceNode?.parentNode === styleContainerNode ? referenceNode : null);
-				} else if ("host" in styleContainerNode) if (supportsConstructableStylesheets) {
-					const stylesheet = createStylesheetForWindow(styleContainerNode, style);
-					adoptStylesheet(styleContainerNode, stylesheet, true);
-				} else {
-					/**
-					* If a scoped component is used within a shadow root and constructable stylesheets are
-					* not supported, we want to insert the styles at the beginning of the shadow root node.
-					*
-					* However, if there is already a style node in the shadow root, we just append
-					* the styles to the existing node.
-					*
-					* Note: order of how styles are applied is important. The new style node
-					* should be inserted before the existing style node.
-					*
-					* During HMR, create separate style elements for scoped components so they can be
-					* updated independently without affecting other components' styles.
-					*/
-					const existingStyleContainer = styleContainerNode.querySelector("style");
-					if (existingStyleContainer && !BUILD.hotModuleReplacement) existingStyleContainer.textContent = style + existingStyleContainer.textContent;
-					else styleContainerNode.prepend(styleElm);
+				if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
+					if (styleContainerNode.nodeName === "HEAD") {
+						/**
+						* if the page contains preconnect links, we want to insert the styles
+						* after the last preconnect link to ensure the styles are preloaded
+						*/
+						const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
+						const referenceNode = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
+						styleContainerNode.insertBefore(styleElm, referenceNode?.parentNode === styleContainerNode ? referenceNode : null);
+					} else if ("host" in styleContainerNode) {
+						if (supportsConstructableStylesheets) {
+							const stylesheet = createStylesheetForWindow(styleContainerNode, style);
+							adoptStylesheet(styleContainerNode, stylesheet, true);
+						} else {
+							/**
+							* If a scoped component is used within a shadow root and constructable stylesheets are
+							* not supported, we want to insert the styles at the beginning of the shadow root node.
+							*
+							* However, if there is already a style node in the shadow root, we just append
+							* the styles to the existing node.
+							*
+							* Note: order of how styles are applied is important. The new style node
+							* should be inserted before the existing style node.
+							*
+							* During HMR, create separate style elements for scoped components so they can be
+							* updated independently without affecting other components' styles.
+							*/
+							const existingStyleContainer = styleContainerNode.querySelector("style");
+							if (existingStyleContainer && !BUILD.hotModuleReplacement) existingStyleContainer.textContent = style + existingStyleContainer.textContent;
+							else styleContainerNode.prepend(styleElm);
+						}
+					} else styleContainerNode.append(styleElm);
 				}
-				else styleContainerNode.append(styleElm);
 				/**
 				* attach styles at the beginning of a shadow root node if we render shadow components
 				*/
-				if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) if (isClosedShadowSSR) styleContainerNode.prepend(styleElm);
-				else styleContainerNode.insertBefore(styleElm, null);
+				if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) {
+					if (isClosedShadowSSR) styleContainerNode.prepend(styleElm);
+					else styleContainerNode.insertBefore(styleElm, null);
+				}
 				if (appliedStyles) appliedStyles.add(scopeId);
 			}
 		} else if (BUILD.constructableCSS) {
@@ -1609,7 +1663,12 @@ const hydrateScopedToShadow = () => {
 	if (!win.document) return;
 	const styleElements = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
 	let i = 0;
-	for (; i < styleElements.length; i++) registerStyle(styleElements[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styleElements[i].innerHTML), true);
+	for (; i < styleElements.length; i++) {
+		const scopeId = styleElements[i].getAttribute(HYDRATED_STYLE_ID);
+		const existing = styles.get(scopeId);
+		const allowCS = existing !== void 0 ? existing instanceof CSSStyleSheet : true;
+		registerStyle(scopeId, convertScopedToShadow(styleElements[i].innerHTML), allowCS);
+	}
 };
 //#endregion
 //#region src/utils/helpers.ts
@@ -1741,11 +1800,15 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		}
 	} else if (BUILD.vdomStyle && memberName === "style") {
 		if (BUILD.updatable) {
-			for (const prop in oldValue) if (!newValue || newValue[prop] == null) if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.removeProperty(prop);
-			else elm.style[prop] = "";
+			for (const prop in oldValue) if (!newValue || newValue[prop] == null) {
+				if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.removeProperty(prop);
+				else elm.style[prop] = "";
+			}
+		}
+		for (const prop in newValue) if (!oldValue || newValue[prop] !== oldValue[prop]) {
+			if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.setProperty(prop, newValue[prop]);
+			else elm.style[prop] = newValue[prop];
 		}
-		for (const prop in newValue) if (!oldValue || newValue[prop] !== oldValue[prop]) if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.setProperty(prop, newValue[prop]);
-		else elm.style[prop] = newValue[prop];
 	} else if (BUILD.vdomKey && memberName === "key") {} else if (BUILD.vdomRef && memberName === "ref") {
 		if (newValue) queueRefAttachment(newValue, elm);
 	} else if (BUILD.vdomListener && (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
@@ -1754,11 +1817,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		else memberName = ln[2] + memberName.slice(3);
 		if (oldValue || newValue) {
 			const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
-			memberName = memberName.replace(/* @__PURE__ */ new RegExp(CAPTURE_EVENT_SUFFIX + "$"), "");
+			memberName = memberName.replace(/*@__PURE__*/ new RegExp(CAPTURE_EVENT_SUFFIX + "$"), "");
 			if (oldValue) plt.rel(elm, memberName, oldValue, capture);
 			if (newValue) plt.ael(elm, memberName, newValue, capture);
 		}
-	} else if (BUILD.vdomPropOrAttr && memberName[0] === "a" && memberName.startsWith("attr:")) {
+	} else if (BUILD.vdomPropOrAttrPrefix && memberName[0] === "a" && memberName.startsWith("attr:")) {
 		const propName = memberName.slice(5);
 		let attrName;
 		if (BUILD.member) {
@@ -1773,7 +1836,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 			if (newValue !== false || elm.getAttribute(attrName) === "") elm.removeAttribute(attrName);
 		} else elm.setAttribute(attrName, newValue === true ? "" : newValue);
 		return;
-	} else if (BUILD.vdomPropOrAttr && memberName[0] === "p" && memberName.startsWith("prop:")) {
+	} else if (BUILD.vdomPropOrAttrPrefix && memberName[0] === "p" && memberName.startsWith("prop:")) {
 		const propName = memberName.slice(5);
 		try {
 			elm[propName] = newValue;
@@ -1793,8 +1856,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 			if (!elm.tagName.includes("-")) {
 				const n = newValue == null ? "" : newValue;
 				if (memberName === "list") isProp = false;
-				else if (oldValue == null || elm[memberName] !== n) if (typeof elm.__lookupSetter__(memberName) === "function") elm[memberName] = n;
-				else elm.setAttribute(memberName, n);
+				else if (oldValue == null || elm[memberName] !== n) {
+					if (typeof elm.__lookupSetter__(memberName) === "function") elm[memberName] = n;
+					else elm.setAttribute(memberName, n);
+				}
 			} else if (elm[memberName] !== newValue) elm[memberName] = newValue;
 		} catch {}
 		/**
@@ -1812,8 +1877,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 			}
 		}
 		if (newValue == null || newValue === false) {
-			if (newValue !== false || elm.getAttribute(memberName) === "") if (BUILD.vdomXlink && xlink) elm.removeAttributeNS(XLINK_NS, memberName);
-			else elm.removeAttribute(memberName);
+			if (newValue !== false || elm.getAttribute(memberName) === "" || flags & VNODE_FLAGS.isHost && !isEnumeratedAttribute(memberName)) {
+				if (BUILD.vdomXlink && xlink) elm.removeAttributeNS(XLINK_NS, memberName);
+				else elm.removeAttribute(memberName);
+			}
 		} else if ((!isProp || flags & VNODE_FLAGS.isHost || isSvg) && !isComplex && elm.nodeType === NODE_TYPE.ElementNode) {
 			newValue = newValue === true ? "" : newValue;
 			if (BUILD.vdomXlink && xlink) elm.setAttributeNS(XLINK_NS, memberName, newValue);
@@ -1821,6 +1888,18 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		}
 	}
 };
+/**
+* Attribute names that are enumerated (tri-state true/false/unset) rather than
+* plain boolean-presence attributes. An explicit `"false"` string on one of
+* these is semantically different from the attribute being absent, so a
+* reflected `false` value must not clear a pre-existing literal value.
+*/
+const ENUMERATED_ATTRIBUTES = /*@__PURE__*/ new Set([
+	"draggable",
+	"contenteditable",
+	"spellcheck"
+]);
+const isEnumeratedAttribute = (attrName) => ENUMERATED_ATTRIBUTES.has(attrName) || attrName.startsWith("aria-");
 const parseClassListRegex = /\s/;
 /**
 * Parsed a string of classnames into an array
@@ -1944,6 +2023,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 		}
 	} else if (BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
 		elm = newVNode.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
+		if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
 		if (BUILD.vdomAttribute) updateElement(null, newVNode, isSvgMode);
 	} else {
 		if (BUILD.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
@@ -2219,8 +2299,10 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
 			node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
 			newStartVnode = newCh[++newStartIdx];
 		}
-		if (node) if (BUILD.slotRelocation) insertBefore(referenceNode(oldStartVnode.$elm$).parentNode, node, referenceNode(oldStartVnode.$elm$));
-		else insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
+		if (node) {
+			if (BUILD.slotRelocation) insertBefore(referenceNode(oldStartVnode.$elm$).parentNode, node, referenceNode(oldStartVnode.$elm$));
+			else insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
+		}
 	}
 	if (oldStartIdx > oldEndIdx) addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
 	else if (BUILD.updatable && newStartIdx > newEndIdx) removeVnodes(oldCh, oldStartIdx, oldEndIdx);
@@ -2307,6 +2389,30 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
 */
 const relocateNodes = [];
 /**
+* When a forwarded `<slot>` gets relocated, drag along any content already forwarded through it,
+* to wherever it just landed (or nowhere, to be hidden, if it didn't match anything).
+*
+* Runs as its own pass after {@link markSlotContentForRelocation} rather than inside it, so that
+* function's matching order - which hydration's node/comment ordering depends on - is untouched.
+*/
+const carryContentWithRelocatedSlotRefs = () => {
+	for (const relocateData of relocateNodes.slice()) {
+		const marker = relocateData.$nodeToRelocate$;
+		if (!marker["s-sr"]) continue;
+		const carriedSiblings = getSlotChildSiblings(marker, marker["s-sn"] || "", false);
+		for (const carriedSibling of carriedSiblings) {
+			if (!carriedSibling["s-ol"]) continue;
+			let siblingRelocateData = relocateNodes.find((r) => r.$nodeToRelocate$ === carriedSibling);
+			if (!siblingRelocateData) {
+				siblingRelocateData = { $nodeToRelocate$: carriedSibling };
+				relocateNodes.push(siblingRelocateData);
+			}
+			siblingRelocateData.$slotRefNode$ = relocateData.$slotRefNode$;
+			if (relocateData.$slotRefNode$) carriedSibling["s-sh"] = relocateData.$slotRefNode$["s-hn"];
+		}
+	}
+};
+/**
 * Mark the contents of a slot for relocation via adding references to them to
 * the {@link relocateNodes} data structure. The actual work of relocating them
 * will then be handled in {@link renderVdom}.
@@ -2411,7 +2517,7 @@ const insertBefore = (parent, newNode, reference, isInitialLoad) => {
 			return newNode;
 		}
 	}
-	if (parent.__insertBefore) return parent.__insertBefore(newNode, reference);
+	if (BUILD.slotRelocation && parent?.__insertBefore) return parent.__insertBefore(newNode, reference);
 	else return parent?.insertBefore(newNode, reference);
 };
 /**
@@ -2505,6 +2611,7 @@ render() {
 		plt.$flags$ |= PLATFORM_FLAGS.isTmpDisconnected;
 		if (checkSlotRelocate) {
 			markSlotContentForRelocation(rootVnode.$elm$);
+			carryContentWithRelocatedSlotRefs();
 			for (const relocateData of relocateNodes) {
 				const nodeToRelocate = relocateData.$nodeToRelocate$;
 				if (!nodeToRelocate["s-ol"] && win.document) {
@@ -2564,7 +2671,7 @@ render() {
 	}
 	if (BUILD.slotRelocation && !useNativeShadowDom && !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && hostElm["s-cr"]) {
 		const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
-		for (const childNode of children) if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
+		for (const childNode of children) if (childNode["s-hn"] !== hostTagName && childNode["s-sh"] !== hostTagName) {
 			if (isInitialLoad && childNode["s-ih"] == null) childNode["s-ih"] = childNode.hidden ?? false;
 			if (childNode.nodeType === NODE_TYPE.ElementNode) childNode.hidden = true;
 			else if (childNode.nodeType === NODE_TYPE.TextNode && !!childNode.nodeValue.trim()) {
@@ -2582,16 +2689,58 @@ const slotReferenceDebugNode = (slotVNode) => win.document?.createComment(`<slot
 const originalLocationDebugNode = (nodeToRelocate) => win.document?.createComment(`org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate["s-hn"]})` : `[${nodeToRelocate.textContent}]`));
 //#endregion
 //#region src/runtime/update-component.ts
+/**
+* Get a promise that resolves once `hostRef`'s real `connectedCallback` has fired for the first time.
+*
+* @param hostRef the component's host reference
+* @returns a promise that resolves once the component's real `connectedCallback` has fired
+*/
+const ensureFirstConnectPromise = (hostRef) => {
+	if (!hostRef.$onFirstConnectPromise$) hostRef.$onFirstConnectPromise$ = new Promise((r) => hostRef.$onFirstConnectResolve$ = r);
+	return hostRef.$onFirstConnectPromise$;
+};
+/**
+* Resolve `hostRef`'s first-connect promise and flag it connected. Called once this
+* component's real `connectedCallback` fires, plus from error/disconnect cleanup so a
+* component that never connects can't hang an ancestor or descendant forever.
+*
+* @param hostRef the component's host reference
+*/
+const markFirstConnected = (hostRef) => {
+	hostRef.$flags$ |= HOST_FLAGS.hasFiredConnected;
+	hostRef.$onFirstConnectResolve$?.();
+	hostRef.$onFirstConnectResolve$ = void 0;
+};
+/**
+* Wait for `ancestorElm` to be defined and its real `connectedCallback` to have completed.
+* Shared by the lazy ({@link initializeComponent}) and standalone (`bootstrap-standalone.ts`)
+* `connectedCallback` paths so a component never connects before its nearest Stencil
+* ancestor, regardless of load order. Both call sites already check `BUILD.asyncLoading` and
+* that an ancestor exists before calling this. Lazy's proxy classes are always pre-defined,
+* so the `whenDefined` wait is a no-op there - it only does real work for standalone's
+* autoloader, where the ancestor tag may not be defined yet.
+*
+* @param ancestorElm the nearest Stencil ancestor element
+*/
+const awaitAncestorConnected = async (ancestorElm) => {
+	let ancestorHostRef = getHostRef(ancestorElm);
+	if (!BUILD.lazyLoad && !ancestorHostRef) {
+		await getRegistry().whenDefined(ancestorElm.tagName.toLowerCase());
+		ancestorHostRef = getHostRef(ancestorElm);
+	}
+	if (ancestorHostRef && !(ancestorHostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) await ensureFirstConnectPromise(ancestorHostRef);
+};
 const attachToAncestor = (hostRef, ancestorComponent) => {
 	if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
 		const index = ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = () => {
 			ancestorComponent["s-p"].splice(index - 1, 1);
 			r();
 		}));
+		if (ancestorComponent["s-pc"]) ancestorComponent["s-pc"].push(ensureFirstConnectPromise(hostRef));
 	}
 };
 const scheduleUpdate = (hostRef, isInitialLoad) => {
-	if (BUILD.taskQueue && BUILD.updatable) hostRef.$flags$ |= HOST_FLAGS.isQueuedForUpdate;
+	if (BUILD.updatable) hostRef.$flags$ |= HOST_FLAGS.isQueuedForUpdate;
 	if (BUILD.asyncLoading && hostRef.$flags$ & HOST_FLAGS.isWaitingForChildren) {
 		hostRef.$flags$ |= HOST_FLAGS.needsRerender;
 		return;
@@ -2599,6 +2748,8 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
 	attachToAncestor(hostRef, hostRef.$ancestorComponent$);
 	const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
 	if (isInitialLoad) {
+		const pendingConnects = BUILD.asyncLoading ? hostRef.$hostElement$["s-pc"] : void 0;
+		if (pendingConnects && pendingConnects.length > 0) return Promise.all(pendingConnects).then(dispatch).catch(dispatch);
 		queueMicrotask(() => {
 			dispatch();
 		});
@@ -2638,10 +2789,6 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
 	let maybePromise;
 	if (isInitialLoad) {
 		if (BUILD.lazyLoad) {
-			if (BUILD.slotRelocation && hostRef.$deferredConnectedCallback$) {
-				hostRef.$deferredConnectedCallback$ = false;
-				safeCall(instance, "connectedCallback", void 0, elm);
-			}
 			if (BUILD.hostListener) {
 				hostRef.$flags$ |= HOST_FLAGS.isListenReady;
 				if (hostRef.$queuedListeners$) {
@@ -2654,6 +2801,14 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
 		if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillLoad");
 		maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
 	} else {
+		if (BUILD.updatable && hostRef.$queuedPropChanges$) {
+			const changes = hostRef.$queuedPropChanges$;
+			hostRef.$queuedPropChanges$ = void 0;
+			if (safeCall(instance, "componentShouldUpdate", changes, elm) === false) {
+				hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
+				return;
+			}
+		}
 		if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillUpdate");
 		maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
 	}
@@ -2768,7 +2923,6 @@ let renderingRef = null;
 const callRender = (hostRef, instance, elm, isInitialLoad) => {
 	const allRenderFn = !!BUILD.allRenderFn;
 	const lazyLoad = !!BUILD.lazyLoad;
-	const taskQueue = !!BUILD.taskQueue;
 	const updatable = !!BUILD.updatable;
 	try {
 		renderingRef = instance;
@@ -2777,14 +2931,17 @@ const callRender = (hostRef, instance, elm, isInitialLoad) => {
 		* method, so we can call the method immediately. If not, check before calling it.
 		*/
 		instance = allRenderFn ? instance.render() : instance.render && instance.render();
-		if (updatable && taskQueue) hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
+		if (updatable) hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
 		if (updatable || lazyLoad) hostRef.$flags$ |= HOST_FLAGS.hasRendered;
-		if (BUILD.hasRenderFn || BUILD.reflect) if (BUILD.vdomRender || BUILD.reflect) if (BUILD.hydrateServerSide) return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
-		else renderVdom(hostRef, instance, isInitialLoad);
-		else {
-			const shadowRoot = elm.shadowRoot;
-			if (hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.shadowDomEncapsulation) shadowRoot.textContent = instance;
-			else elm.textContent = instance;
+		if (BUILD.hasRenderFn || BUILD.reflect) {
+			if (BUILD.vdomRender || BUILD.reflect) {
+				if (BUILD.hydrateServerSide) return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
+				else renderVdom(hostRef, instance, isInitialLoad);
+			} else {
+				const shadowRoot = elm.shadowRoot;
+				if (hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.shadowDomEncapsulation) shadowRoot.textContent = instance;
+				else elm.textContent = instance;
+			}
 		}
 	} catch (e) {
 		consoleError(e, hostRef.$hostElement$);
@@ -2924,17 +3081,19 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
 	const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
 	for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) {
 		if (!(memberFlags & MEMBER_FLAGS.PropLike)) continue;
-		const sig = signal(hostRef.$instanceValues$.get(memberName));
+		const initialVal = hostRef.$instanceValues$.get(memberName);
+		const sig = signal(initialVal);
 		hostRef.$signalValues$.set(memberName, sig);
 		let prevScheduleVal = sig.peek();
 		disposers.push(effect(() => {
 			const newVal = sig.value;
 			if (hostRef.$flags$ & HOST_FLAGS.hasRendered) {
 				if (instance?.componentShouldUpdate) {
-					if (instance.componentShouldUpdate(newVal, prevScheduleVal, memberName) === false && !(hostRef.$flags$ & HOST_FLAGS.isQueuedForUpdate)) {
-						prevScheduleVal = newVal;
-						return;
-					}
+					const changes = hostRef.$queuedPropChanges$ ||= {};
+					changes[memberName] = {
+						newVal,
+						oldVal: changes[memberName]?.oldVal ?? prevScheduleVal
+					};
 				}
 				if (!(hostRef.$flags$ & HOST_FLAGS.isQueuedForUpdate)) scheduleUpdate(hostRef, false);
 			}
@@ -2969,7 +3128,8 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
 			consoleError(e, elm);
 		}
 	}));
-	elm[STENCIL_SIGNALS_SYMBOL] = new Map([...hostRef.$signalValues$].filter(([k]) => (cmpMeta.$members$?.[k]?.[0] ?? 0) & MEMBER_FLAGS.Prop));
+	const publicSignals = new Map([...hostRef.$signalValues$].filter(([k]) => (cmpMeta.$members$?.[k]?.[0] ?? 0) & MEMBER_FLAGS.Prop));
+	elm[STENCIL_SIGNALS_SYMBOL] = publicSignals;
 	hostRef.$signalCleanup$ = () => {
 		disposers.forEach((d) => d());
 		elm[STENCIL_SIGNALS_SYMBOL] = void 0;
@@ -3018,24 +3178,30 @@ const h = (nodeName, vnodeData, ...children) => {
 		for (let i = 0; i < c.length; i++) {
 			child = c[i];
 			if (Array.isArray(child)) walk(child);
-			else if (child != null && typeof child !== "boolean") if (BUILD.vdomSignals && isSignalLike(child)) {
-				const sigVNode = newVNode(null, String(child.peek()));
-				sigVNode.$signal$ = child;
-				vNodeChildren.push(sigVNode);
-				lastSimple = false;
-			} else {
-				if (simple = typeof nodeName !== "function" && !isComplexType(child)) child = String(child);
-				else if (BUILD.isDev && typeof nodeName !== "function" && child.$flags$ === void 0) consoleDevError(`vNode passed as children has unexpected type.
-Make sure it's using the correct h() function.
-Empty objects can also be the cause, look for JSX comments that became objects.`);
-				if (simple && lastSimple) vNodeChildren[vNodeChildren.length - 1].$text$ += child;
-				else vNodeChildren.push(simple ? newVNode(null, child) : child);
-				lastSimple = simple;
+			else if (child != null && typeof child !== "boolean") {
+				if (BUILD.vdomSignals && isSignalLike(child)) {
+					const sigVNode = newVNode(null, String(child.peek()));
+					sigVNode.$signal$ = child;
+					vNodeChildren.push(sigVNode);
+					lastSimple = false;
+				} else {
+					if (simple = typeof nodeName !== "function" && !isComplexType(child)) child = String(child);
+					else if (typeof nodeName !== "function" && child.$flags$ === void 0) {
+						if (BUILD.isDev) 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.`);
+						else consoleError("Invalid vNode child");
+						continue;
+					}
+					if (simple && lastSimple) vNodeChildren[vNodeChildren.length - 1].$text$ += child;
+					else vNodeChildren.push(simple ? newVNode(null, child) : child);
+					lastSimple = simple;
+				}
 			}
 		}
 	};
 	walk(children);
-	if (vnodeData) {
+	if (vnodeData && typeof vnodeData === "object") {
 		if (BUILD.isDev && nodeName === "input") validateInputProperties(vnodeData);
 		if (BUILD.vdomKey && vnodeData.key) key = vnodeData.key;
 		if (BUILD.slotRelocation && vnodeData.name) slotName = vnodeData.name;
@@ -3136,7 +3302,7 @@ const convertToPrivate = (node) => {
 /**
 * Validates the ordering of attributes on an input element
 *
-* @param inputElm the element to validate
+* @param inputElm the vnode data (JSX props) for the element to validate
 */
 const validateInputProperties = (inputElm) => {
 	const props = Object.keys(inputElm);
@@ -4015,14 +4181,15 @@ const parsePropertyValue = (propValue, propType, isFormAssociated) => {
 		/**
 		* ensure this value is of the correct prop type
 		*/
-		if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean)
- /**
-		* For form-associated components, according to HTML spec, the presence of any boolean attribute
-		* (regardless of its value, even "false") should make the property true.
-		* For non-form-associated components, we maintain the legacy behavior where "false" becomes false.
-		*/
-		if (BUILD.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
-		else return propValue === "false" ? false : propValue === "" || !!propValue;
+		if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean) {
+			/**
+			* For form-associated components, according to HTML spec, the presence of any boolean attribute
+			* (regardless of its value, even "false") should make the property true.
+			* For non-form-associated components, we maintain the legacy behavior where "false" becomes false.
+			*/
+			if (BUILD.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
+			else return propValue === "false" ? false : propValue === "" || !!propValue;
+		}
 		/**
 		* force it to be a number
 		*/
@@ -4110,7 +4277,11 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 		}
 		if (BUILD.updatable && flags & HOST_FLAGS.hasRendered) {
 			if (instance.componentShouldUpdate) {
-				if (instance.componentShouldUpdate(newVal, oldVal, propName) === false && !(flags & HOST_FLAGS.isQueuedForUpdate)) return;
+				const changes = hostRef.$queuedPropChanges$ ||= {};
+				changes[propName] = {
+					newVal,
+					oldVal: changes[propName]?.oldVal ?? oldVal
+				};
 			}
 			if (!(flags & HOST_FLAGS.isQueuedForUpdate)) scheduleUpdate(hostRef, false);
 		}
@@ -4244,11 +4415,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						};
 						for (const deserializer of cmpMeta.$deserializers$[propName]) {
 							const [[methodName]] = Object.entries(deserializer);
-							if (BUILD.lazyLoad) if (hostRef.$lazyInstance$) setVal(methodName, hostRef.$lazyInstance$);
-							else hostRef.$fetchedCbList$.push(() => {
-								setVal(methodName, hostRef.$lazyInstance$);
-							});
-							else setVal(methodName, this);
+							if (BUILD.lazyLoad) {
+								if (hostRef.$lazyInstance$) setVal(methodName, hostRef.$lazyInstance$);
+								else hostRef.$fetchedCbList$.push(() => {
+									setVal(methodName, hostRef.$lazyInstance$);
+								});
+							} else setVal(methodName, this);
 						}
 						return;
 					} else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && this[propName] == newValue) return;
@@ -4272,7 +4444,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
 				});
 			};
-			Cstr.observedAttributes = Array.from(new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
+			Cstr.observedAttributes = Array.from(/* @__PURE__ */ new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
 				const attrName = m[1] || propName;
 				attrNameToPropName.set(attrName, propName);
 				if (BUILD.reflect && m[0] & MEMBER_FLAGS.ReflectAttr) cmpMeta.$attrsToReflect$?.push([propName, attrName]);
@@ -4299,6 +4471,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 	try {
 		if ((hostRef.$flags$ & HOST_FLAGS.hasInitializedComponent) === 0) {
 			hostRef.$flags$ |= HOST_FLAGS.hasInitializedComponent;
+			hostRef.$flags$ &= ~HOST_FLAGS.hasFailedLoad;
 			const bundleId = cmpMeta.$lazyBundleId$;
 			if (BUILD.lazyLoad && bundleId) {
 				const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
@@ -4307,7 +4480,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 					Cstr = await CstrImport;
 					endLoad();
 				} else Cstr = CstrImport;
-				if (!Cstr) throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
+				if (!Cstr) {
+					hostRef.$flags$ &= ~HOST_FLAGS.hasInitializedComponent;
+					hostRef.$loadRetryCount$ = (hostRef.$loadRetryCount$ ?? 0) + 1;
+					if (hostRef.$loadRetryCount$ < 3) hostRef.$flags$ |= HOST_FLAGS.hasFailedLoad;
+					throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
+				}
 				if (BUILD.member && !Cstr.isProxied) {
 					if (BUILD.propChangeCallback) {
 						cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
@@ -4326,8 +4504,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 				}
 				if (BUILD.member) hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
 				endNewInstance();
-				if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) fireConnectedCallback(hostRef.$lazyInstance$, elm);
-				else hostRef.$deferredConnectedCallback$ = true;
+				if (BUILD.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$);
+				if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) {
+					fireConnectedCallback(hostRef.$lazyInstance$, elm);
+					if (BUILD.asyncLoading) markFirstConnected(hostRef);
+				} else queueMicrotask(() => {
+					fireConnectedCallback(hostRef.$lazyInstance$, elm);
+					if (BUILD.asyncLoading) markFirstConnected(hostRef);
+				});
 			} else Cstr = elm.constructor;
 			if (BUILD.style && Cstr && Cstr.style) {
 				/**
@@ -4386,7 +4570,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 			hostRef.$onRenderResolve$();
 			hostRef.$onRenderResolve$ = void 0;
 		}
-		if (BUILD.asyncLoading && hostRef.$onReadyResolve$) hostRef.$onReadyResolve$(elm);
+		if (BUILD.asyncLoading) markFirstConnected(hostRef);
+		if (BUILD.asyncLoading && hostRef.$onReadyResolve$ && !(hostRef.$flags$ & HOST_FLAGS.hasFailedLoad)) hostRef.$onReadyResolve$(elm);
 	}
 };
 const fireConnectedCallback = (instance, elm) => {
@@ -4449,6 +4634,7 @@ const connectedCallback = (elm) => {
 		} else {
 			addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
 			if (hostRef?.$lazyInstance$) fireConnectedCallback(hostRef.$lazyInstance$, elm);
+			else if (hostRef.$flags$ & HOST_FLAGS.hasFailedLoad) setTimeout(() => initializeComponent(elm, hostRef, cmpMeta), LAZY_LOAD_RETRY_INTERVAL_MS);
 			else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$, elm));
 		}
 		endConnected();
@@ -4478,6 +4664,7 @@ const disconnectedCallback = async (elm) => {
 			hostRef.$signalCleanup$();
 			hostRef.$signalCleanup$ = void 0;
 		}
+		if (BUILD.asyncLoading && hostRef && !(hostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) markFirstConnected(hostRef);
 		if (!BUILD.lazyLoad) disconnectInstance(elm);
 		else if (hostRef?.$lazyInstance$) disconnectInstance(hostRef.$lazyInstance$, elm);
 		else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$, elm));
@@ -4525,7 +4712,6 @@ const hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
 };
 const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
 	const modulePath = hostElement.constructor.__stencil_module__;
-	console.log(`[Stencil HMR] hmrStandalone <${cmpMeta.$tagName$}> modulePath:`, modulePath);
 	if (!modulePath) {
 		console.warn(`[Stencil HMR] No __stencil_module__ on <${cmpMeta.$tagName$}> constructor - was this built with devMode?`);
 		return;
@@ -4538,18 +4724,39 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
 		const NewClass = Object.values(newModule).find((v) => typeof v === "function" && v.is === cmpMeta.$tagName$) ?? newModule.default;
 		if (!NewClass) return;
 		const ctor = customElements.get(cmpMeta.$tagName$);
-		if (ctor) for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
-			if (key === "constructor") continue;
-			Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
+		if (ctor) {
+			for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
+				if (key === "constructor") continue;
+				Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
+			}
+			const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
+			if (styleDesc) {
+				Object.defineProperty(ctor, "style", styleDesc);
+				const newStyle = NewClass.style;
+				if (newStyle) {
+					const scopeId = getScopeId(cmpMeta);
+					const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
+					console.log("[stencil-hmr] registerStyle", {
+						tag: cmpMeta.$tagName$,
+						scopeId,
+						isShadow,
+						cssLen: newStyle.length
+					});
+					registerStyle(scopeId, newStyle, isShadow);
+				}
+			}
 		}
+		const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
 		document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
-			if (BUILD.hostListener) {
-				const hostRef = getHostRef(el);
-				if (hostRef?.$rmListeners$) {
-					hostRef.$rmListeners$.map((rmListener) => rmListener());
-					hostRef.$rmListeners$ = void 0;
-					addHostEventListeners(el, hostRef, cmpMeta.$listeners$);
-				}
+			const hostRef = getHostRef(el);
+			if (BUILD.hostListener && hostRef?.$rmListeners$) {
+				hostRef.$rmListeners$.map((rmListener) => rmListener());
+				hostRef.$rmListeners$ = void 0;
+				addHostEventListeners(el, hostRef, cmpMeta.$listeners$);
+			}
+			if (!isShadow && hostRef) {
+				console.log("[stencil-hmr] calling attachStyles for", cmpMeta.$tagName$);
+				attachStyles(hostRef);
 			}
 			forceUpdate(el);
 		});
@@ -4560,7 +4767,9 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
 //#endregion
 //#region src/runtime/bootstrap-standalone.ts
 const defineCustomElement = (Cstr, compactMeta) => {
-	customElements.define(transformTag(compactMeta[1]), proxyCustomElement(Cstr, compactMeta));
+	const tag = transformTag(compactMeta[1]);
+	const proxied = proxyCustomElement(Cstr, compactMeta);
+	if (!customElements.get(tag)) customElements.define(tag, proxied);
 };
 const proxyCustomElement = (Cstr, compactMeta) => {
 	if (BUILD.profile && performance.mark && performance.getEntriesByName("st:app:start", "mark").length === 0) performance.mark("st:app:start");
@@ -4581,18 +4790,20 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 			hmrStart(this, cmpMeta, hmrVersionId);
 		};
 		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD.slotCloneNode || BUILD.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(Cstr.prototype);
-		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(Cstr.prototype);
-		else {
-			if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(Cstr.prototype);
-			if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
-				patchSlotAppendChild(Cstr.prototype);
-				patchSlotAppend(Cstr.prototype);
-				patchSlotPrepend(Cstr.prototype);
-				patchSlotInsertAdjacentHTML(Cstr.prototype);
-				patchInsertBefore(Cstr.prototype);
-				patchSlotRemoveChild(Cstr.prototype);
+		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) {
+			if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(Cstr.prototype);
+			else {
+				if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(Cstr.prototype);
+				if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
+					patchSlotAppendChild(Cstr.prototype);
+					patchSlotAppend(Cstr.prototype);
+					patchSlotPrepend(Cstr.prototype);
+					patchSlotInsertAdjacentHTML(Cstr.prototype);
+					patchInsertBefore(Cstr.prototype);
+					patchSlotRemoveChild(Cstr.prototype);
+				}
+				if (BUILD.slotTextContent) patchTextContent(Cstr.prototype);
 			}
-			if (BUILD.slotTextContent) patchTextContent(Cstr.prototype);
 		}
 		if (BUILD.hydrateClientSide && BUILD.shadowDom) hydrateScopedToShadow();
 		const originalConnectedCallback = Cstr.prototype.connectedCallback;
@@ -4605,19 +4816,26 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 			componentOnReady() {
 				return getHostRef(this)?.$onReadyPromise$;
 			},
-			connectedCallback() {
-				if (!this.__hasHostListenerAttached) {
-					const hostRef = getHostRef(this);
+			async connectedCallback() {
+				const isFirstConnect = !this.__hasHostListenerAttached;
+				let hostRef;
+				if (isFirstConnect) {
+					hostRef = getHostRef(this);
 					if (!hostRef) return;
 					addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
 					this.__hasHostListenerAttached = true;
 				}
 				connectedCallback(this);
-				if (originalConnectedCallback) originalConnectedCallback.call(this);
+				if (BUILD.asyncLoading && hostRef && hostRef.$ancestorComponent$) {
+					await awaitAncestorConnected(hostRef.$ancestorComponent$);
+					if (!this.isConnected) return;
+				}
+				if (originalConnectedCallback && (plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) originalConnectedCallback.call(this);
+				if (BUILD.asyncLoading && hostRef) markFirstConnected(hostRef);
 			},
 			disconnectedCallback() {
 				disconnectedCallback(this);
-				if (originalDisconnectedCallback) originalDisconnectedCallback.call(this);
+				if (originalDisconnectedCallback && (plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) originalDisconnectedCallback.call(this);
 			},
 			__attachShadow() {
 				const isClosed = BUILD.shadowModeClosed && !!(cmpMeta.$flags$ & CMP_FLAGS.shadowModeClosed);
@@ -4671,8 +4889,8 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 	const exclude = options.exclude || [];
 	const _reg = options.registry ?? getRegistry();
 	const head = win.document.head;
-	const metaCharset = /* @__PURE__ */ head.querySelector("meta[charset]");
-	const dataStyles = /* @__PURE__ */ win.document.createElement("style");
+	const metaCharset = /*@__PURE__*/ head.querySelector("meta[charset]");
+	const dataStyles = /*@__PURE__*/ win.document.createElement("style");
 	const deferredConnectedCallbacks = [];
 	let appLoadFallback;
 	let isBootstrapping = true;
@@ -4740,8 +4958,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 					*
 					* Also remove the reference from `deferredConnectedCallbacks` array
 					* otherwise removed instances won't get garbage collected.
+					*
+					* Use `nextTick` (microtask) rather than `plt.raf` since
+					* `requestAnimationFrame` callbacks do not fire while `document.hidden`
 					*/
-					plt.raf(() => {
+					nextTick(() => {
 						const hostRef = getHostRef(this);
 						if (!hostRef) return;
 						const i = deferredConnectedCallbacks.findIndex((host) => host === this);
@@ -4754,18 +4975,20 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 				}
 			};
 			if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD.slotCloneNode || BUILD.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(HostElement.prototype);
-			if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(HostElement.prototype);
-			else {
-				if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(HostElement.prototype);
-				if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
-					patchSlotAppendChild(HostElement.prototype);
-					patchSlotAppend(HostElement.prototype);
-					patchSlotPrepend(HostElement.prototype);
-					patchSlotInsertAdjacentHTML(HostElement.prototype);
-					patchInsertBefore(HostElement.prototype);
-					patchSlotRemoveChild(HostElement.prototype);
+			if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) {
+				if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(HostElement.prototype);
+				else {
+					if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(HostElement.prototype);
+					if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
+						patchSlotAppendChild(HostElement.prototype);
+						patchSlotAppend(HostElement.prototype);
+						patchSlotPrepend(HostElement.prototype);
+						patchSlotInsertAdjacentHTML(HostElement.prototype);
+						patchInsertBefore(HostElement.prototype);
+						patchSlotRemoveChild(HostElement.prototype);
+					}
+					if (BUILD.slotTextContent) patchTextContent(HostElement.prototype);
 				}
-				if (BUILD.slotTextContent) patchTextContent(HostElement.prototype);
 			}
 			if (BUILD.formAssociated && cmpMeta.$flags$ & CMP_FLAGS.formAssociated) HostElement.formAssociated = true;
 			if (BUILD.hotModuleReplacement) HostElement.prototype["s-hmr"] = function(hmrVersionId) {
@@ -4811,9 +5034,10 @@ const addHostEventListeners = (elm, hostRef, listeners) => {
 };
 const hostListenerProxy = (hostRef, methodName) => (ev) => {
 	try {
-		if (BUILD.lazyLoad) if (hostRef.$flags$ & HOST_FLAGS.isListenReady) hostRef.$lazyInstance$?.[methodName](ev);
-		else (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
-		else hostRef.$hostElement$[methodName](ev);
+		if (BUILD.lazyLoad) {
+			if (hostRef.$flags$ & HOST_FLAGS.isListenReady) hostRef.$lazyInstance$?.[methodName](ev);
+			else (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+		} else hostRef.$hostElement$[methodName](ev);
 	} catch (e) {
 		consoleError(e, hostRef.$hostElement$);
 	}
@@ -4847,6 +5071,73 @@ const setNonce = (nonce) => plt.$nonce$ = nonce;
 //#region src/runtime/platform-options.ts
 const setPlatformOptions = (opts) => Object.assign(plt, opts);
 //#endregion
+//#region src/runtime/reactive-controller.ts
+const ReactiveControllerHost = (Base) => class ReactiveControllerHostMixin extends Base {
+	controllers = /* @__PURE__ */ new Set();
+	#connected = false;
+	#updateCompleteResolvers = [];
+	addController(controller) {
+		this.controllers.add(controller);
+		if (this.#connected) controller.hostConnected?.();
+	}
+	removeController(controller) {
+		this.controllers.delete(controller);
+	}
+	requestUpdate() {
+		forceUpdate(this);
+	}
+	get updateComplete() {
+		return new Promise((resolve) => this.#updateCompleteResolvers.push(resolve));
+	}
+	connectedCallback() {
+		super.connectedCallback?.();
+		this.#connected = true;
+		const el = getElement(this);
+		if (el && el !== this) {
+			el.addController = (controller) => this.addController(controller);
+			el.removeController = (controller) => this.removeController(controller);
+			el.requestUpdate = () => this.requestUpdate();
+			Object.defineProperty(el, "updateComplete", {
+				configurable: true,
+				get: () => this.updateComplete
+			});
+		}
+		this.controllers.forEach((c) => c.hostConnected?.());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback?.();
+		this.#connected = false;
+		this.controllers.forEach((c) => c.hostDisconnected?.());
+	}
+	async componentWillLoad() {
+		await super.componentWillLoad?.();
+		await Promise.all([...this.controllers].map((c) => c.hostWillLoad?.()));
+	}
+	componentDidLoad() {
+		super.componentDidLoad?.();
+		this.controllers.forEach((c) => c.hostDidLoad?.());
+	}
+	async componentWillRender() {
+		await super.componentWillRender?.();
+		await Promise.all([...this.controllers].map((c) => c.hostWillRender?.()));
+	}
+	componentDidRender() {
+		super.componentDidRender?.();
+		this.controllers.forEach((c) => c.hostDidRender?.());
+		const resolvers = this.#updateCompleteResolvers;
+		this.#updateCompleteResolvers = [];
+		resolvers.forEach((resolve) => resolve(true));
+	}
+	async componentWillUpdate() {
+		await super.componentWillUpdate?.();
+		await Promise.all([...this.controllers].map((c) => c.hostWillUpdate?.()));
+	}
+	componentDidUpdate() {
+		super.componentDidUpdate?.();
+		this.controllers.forEach((c) => c.hostDidUpdate?.());
+	}
+};
+//#endregion
 //#region src/runtime/render.ts
 /**
 * A WeakMap to persist HostRef objects across multiple render() calls to the
@@ -4933,159 +5224,4 @@ function hasKeys(obj) {
 	return false;
 }
 //#endregion
-//#region src/runtime/vdom/vdom-annotations.ts
-/**
-* Updates the DOM generated on the server with annotations such as node attributes and
-* comment nodes to facilitate future client-side hydration. These annotations are used for things
-* like moving elements back to their original hosts if using Shadow DOM on the client, and for quickly
-* reconstructing the vNode representations of the DOM.
-*
-* @param doc The DOM generated by the server.
-* @param staticComponents Any components that should be considered static and do not need client-side hydration.
-*/
-const insertVdomAnnotations = (doc, staticComponents) => {
-	if (doc != null) {
-		/**
-		* Initiated `docData` object from the document if it exists to ensure we
-		* maintain the same `docData` object across multiple hydration hydration runs.
-		*/
-		const docData = "_stencilDocData" in doc ? doc[STENCIL_DOC_DATA] : { ...DEFAULT_DOC_DATA };
-		docData.staticComponents = new Set(staticComponents);
-		const orgLocationNodes = [];
-		parseVNodeAnnotations(doc, doc.body, docData, orgLocationNodes);
-		orgLocationNodes.forEach((orgLocationNode) => {
-			if (orgLocationNode != null && orgLocationNode["s-nr"]) {
-				const nodeRef = orgLocationNode["s-nr"];
-				let hostId = nodeRef["s-host-id"];
-				let nodeId = nodeRef["s-node-id"];
-				let childId = `${hostId}.${nodeId}`;
-				if (hostId == null) {
-					hostId = 0;
-					docData.rootLevelIds++;
-					nodeId = docData.rootLevelIds;
-					childId = `${hostId}.${nodeId}`;
-					if (nodeRef.nodeType === NODE_TYPE.ElementNode) {
-						nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);
-						if (typeof nodeRef["s-sn"] === "string" && !nodeRef.getAttribute("slot")) nodeRef.setAttribute("s-sn", nodeRef["s-sn"]);
-					} else if (nodeRef.nodeType === NODE_TYPE.TextNode) {
-						if (hostId === 0) {
-							if (nodeRef.nodeValue?.trim() === "") {
-								orgLocationNode.remove();
-								return;
-							}
-						}
-						const commentBeforeTextNode = doc.createComment(childId);
-						commentBeforeTextNode.nodeValue = `t.${childId}`;
-						insertBefore(nodeRef.parentNode, commentBeforeTextNode, nodeRef);
-					} else if (nodeRef.nodeType === NODE_TYPE.CommentNode) {
-						const commentBeforeTextNode = doc.createComment(childId);
-						commentBeforeTextNode.nodeValue = `c.${childId}`;
-						nodeRef.parentNode.insertBefore(commentBeforeTextNode, nodeRef);
-					}
-				}
-				let orgLocationNodeId = `o.${childId}`;
-				const orgLocationParentNode = orgLocationNode.parentElement;
-				if (orgLocationParentNode) {
-					if (orgLocationParentNode["s-en"] === "") orgLocationNodeId += `.`;
-					else if (orgLocationParentNode["s-en"] === "c") orgLocationNodeId += `.c`;
-				}
-				orgLocationNode.nodeValue = orgLocationNodeId;
-			}
-		});
-	}
-};
-/**
-* Recursively parses a node generated by the server and its children to set host and child id
-* attributes read during client-side hydration. This function also tracks whether each node is
-* an original location reference node meaning that a node has been moved via slot relocation.
-*
-* @param doc The DOM generated by the server.
-* @param node The node to parse.
-* @param docData An object containing metadata about the document.
-* @param orgLocationNodes An array of nodes that have been moved via slot relocation.
-*/
-const parseVNodeAnnotations = (doc, node, docData, orgLocationNodes) => {
-	if (node == null) return;
-	if (node["s-nr"] != null) orgLocationNodes.push(node);
-	if (node.nodeType === NODE_TYPE.ElementNode) [...Array.from(node.childNodes), ...Array.from(node.shadowRoot?.childNodes || [])].forEach((childNode) => {
-		const hostRef = getHostRef(childNode);
-		if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) insertVNodeAnnotations(doc, childNode, hostRef.$vnode$, docData, { nodeIds: 0 });
-		parseVNodeAnnotations(doc, childNode, docData, orgLocationNodes);
-	});
-};
-/**
-* Insert attribute annotations on an element for its host ID and, potentially, its child ID.
-* Also makes calls to insert annotations on the element's children, keeping track of the depth of
-* the component tree.
-*
-* @param doc The DOM generated by the server.
-* @param hostElm The element to insert annotations for.
-* @param vnode The vNode representation of the element.
-* @param docData An object containing metadata about the document.
-* @param cmpData An object containing metadata about the component.
-*/
-const insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => {
-	if (vnode != null) {
-		const hostId = ++docData.hostIds;
-		hostElm.setAttribute(HYDRATE_ID, hostId);
-		if (hostElm["s-cr"] != null) hostElm["s-cr"].nodeValue = `r.${hostId}`;
-		if (vnode.$children$ != null) {
-			const depth = 0;
-			vnode.$children$.forEach((vnodeChild, index) => {
-				insertChildVNodeAnnotations(doc, vnodeChild, cmpData, hostId, depth, index);
-			});
-		}
-		if (hostElm && vnode && vnode.$elm$ && !hostElm.hasAttribute("c-id")) {
-			const parent = hostElm.parentElement;
-			if (parent && parent.childNodes) {
-				const parentChildNodes = Array.from(parent.childNodes);
-				const comment = parentChildNodes.find((node) => node.nodeType === NODE_TYPE.CommentNode && node["s-sr"]);
-				if (comment) {
-					const index = parentChildNodes.indexOf(hostElm) - 1;
-					vnode.$elm$.setAttribute(HYDRATE_CHILD_ID, `${comment["s-host-id"]}.${comment["s-node-id"]}.0.${index}`);
-				}
-			}
-		}
-	}
-};
-/**
-* Recursively analyzes the type of a child vNode and inserts annotations on the vNodes's element based on its type.
-* Element nodes receive a child ID attribute, text nodes have a comment with the child ID inserted before them,
-* and comment nodes representing a slot have their node value set to a slot node ID containing the child ID.
-*
-* @param doc The DOM generated by the server.
-* @param vnodeChild The vNode to insert annotations for.
-* @param cmpData An object containing metadata about the component.
-* @param hostId The host ID of this element's parent.
-* @param depth How deep this element sits in the component tree relative to its parent.
-* @param index The index of this element in its parent's children array.
-*/
-const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, index) => {
-	const childElm = vnodeChild.$elm$;
-	if (childElm == null) return;
-	const nodeId = cmpData.nodeIds++;
-	const childId = `${hostId}.${nodeId}.${depth}.${index}`;
-	childElm["s-host-id"] = hostId;
-	childElm["s-node-id"] = nodeId;
-	if (childElm.nodeType === NODE_TYPE.ElementNode) {
-		childElm.setAttribute(HYDRATE_CHILD_ID, childId);
-		if (typeof childElm["s-sn"] === "string" && !childElm.getAttribute("slot")) childElm.setAttribute("s-sn", childElm["s-sn"]);
-	} else if (childElm.nodeType === NODE_TYPE.TextNode) {
-		const parentNode = childElm.parentNode;
-		const nodeName = parentNode?.nodeName;
-		if (nodeName !== "STYLE" && nodeName !== "SCRIPT") {
-			const textNodeId = `t.${childId}`;
-			insertBefore(parentNode, doc.createComment(textNodeId), childElm);
-		}
-	} else if (childElm.nodeType === NODE_TYPE.CommentNode) {
-		if (childElm["s-sr"]) childElm.nodeValue = `s.${childId}.${childElm["s-sn"] || ""}`;
-	}
-	if (vnodeChild.$children$ != null) {
-		const childDepth = depth + 1;
-		vnodeChild.$children$.forEach((vnode, childIndex) => {
-			insertChildVNodeAnnotations(doc, vnode, cmpData, hostId, childDepth, childIndex);
-		});
-	}
-};
-//#endregion
-export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, renderVdom, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };
+export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, ReactiveControllerHost, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };