@stencil/core 5.0.0-alpha.9 → 5.0.0-beta.1

package/dist/runtime/index.js

@@ -50,8 +50,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;
 /**
@@ -136,7 +148,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
@@ -270,8 +292,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;
@@ -286,7 +313,12 @@ const consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
 const consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
 //#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
@@ -313,13 +345,21 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 	} else if (!bundleId) return;
 	const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
 	if (module) return module[exportName];
-	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-	const entryFile = `${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? "?s-hmr=" + hmrVersionId : ""}`;
+	const retryCount = failedLoadAttempts.get(bundleId) ?? 0;
+	const cacheBustParams = [retryCount > 0 ? `s-retry=${retryCount}` : "", BUILD.hotModuleReplacement && hmrVersionId ? `s-hmr=${hmrVersionId}` : ""].filter(Boolean).join("&");
 	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$);
+	};
+	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+	const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
 	return import(
 		/* @vite-ignore */
 		/* webpackInclude: /\.entry\.js$/ */
@@ -330,7 +370,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 needsScopedSSR = () => false;
 //#endregion
@@ -392,6 +432,10 @@ const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 */
 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",
@@ -411,7 +455,7 @@ const plt = {
 	rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
 	ce: (eventName, opts) => new CustomEvent(eventName, opts)
 };
-const supportsListenerOptions = /* @__PURE__ */ (() => {
+const supportsListenerOptions = /*@__PURE__*/ (() => {
 	let supported = false;
 	try {
 		win.document?.addEventListener("e", null, Object.defineProperty({}, "passive", { get() {
@@ -421,14 +465,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;
@@ -436,12 +480,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) => {
@@ -474,15 +519,15 @@ 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 writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
+const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 //#endregion
 //#region src/runtime/asset-path.ts
 const getAssetPath = (path) => {
@@ -518,11 +563,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("") ?? null;
-	if (globalStyleSheet) if (supportsMutableAdoptedStyleSheets) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
-	else shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
+	if (globalStyleSheet) {
+		if (supportsMutableAdoptedStyleSheets) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
+		else shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
+	}
 }
 //#endregion
 //#region src/runtime/slot-polyfill-utils.ts
@@ -542,8 +591,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++) {
@@ -586,7 +637,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;
 }
@@ -617,7 +668,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 === "";
 };
 /**
@@ -666,8 +717,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);
@@ -758,8 +811,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));
 			}
 		}
@@ -962,11 +1017,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() {
@@ -1012,7 +1067,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;
 	} });
 };
@@ -1027,7 +1082,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;
 	} });
 };
@@ -1042,7 +1097,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;
 	} });
 };
@@ -1057,7 +1112,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;
 	} });
 };
@@ -1232,7 +1287,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.
 *
@@ -1256,9 +1311,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];
 };
 /**
@@ -1271,7 +1327,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;
 };
@@ -1342,41 +1398,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) {
@@ -1468,7 +1529,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
@@ -1600,11 +1666,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") {
@@ -1613,11 +1683,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) {
@@ -1632,7 +1702,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;
@@ -1652,8 +1722,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 {}
 		/**
@@ -1671,8 +1743,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);
@@ -1680,6 +1754,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
@@ -1803,6 +1889,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";
@@ -2078,8 +2165,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);
@@ -2166,6 +2255,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}.
@@ -2270,7 +2383,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);
 };
 /**
@@ -2364,6 +2477,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) {
@@ -2423,7 +2537,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()) {
@@ -2441,16 +2555,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;
@@ -2458,6 +2614,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();
 		});
@@ -2497,10 +2655,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$) {
@@ -2513,6 +2667,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);
 	}
@@ -2627,7 +2789,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;
@@ -2636,14 +2797,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$);
@@ -2783,17 +2947,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);
 			}
@@ -2828,7 +2994,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;
@@ -2877,24 +3044,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;
@@ -2995,7 +3168,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);
@@ -3412,12 +3585,13 @@ const restoreSafeSelector = (placeholders, content) => {
 const _polyfillHost = "-shadowcsshost";
 const _polyfillSlotted = "-shadowcssslotted";
 const _polyfillHostContext = "-shadowcsscontext";
+const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
 let _cssColonHostRe;
 let _cssColonHostContextRe;
 let _cssColonSlottedRe;
-const getCssColonHostRe = () => _cssColonHostRe ??= /* @__PURE__ */ new RegExp("(-shadowcsshost)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonHostContextRe = () => _cssColonHostContextRe ??= /* @__PURE__ */ new RegExp("(-shadowcsscontext)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonSlottedRe = () => _cssColonSlottedRe ??= /* @__PURE__ */ new RegExp("(-shadowcssslotted)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
+const getCssColonHostRe = () => _cssColonHostRe ??= new RegExp("(-shadowcsshost" + _parenSuffix, "gim");
+const getCssColonHostContextRe = () => _cssColonHostContextRe ??= new RegExp("(-shadowcsscontext" + _parenSuffix, "gim");
+const getCssColonSlottedRe = () => _cssColonSlottedRe ??= new RegExp("(-shadowcssslotted" + _parenSuffix, "gim");
 const _polyfillHostNoCombinator = "-shadowcsshost-no-combinator";
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
@@ -3874,14 +4048,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
 		*/
@@ -3969,7 +4144,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);
 		}
@@ -3978,6 +4157,14 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 //#endregion
 //#region src/runtime/proxy-component.ts
 /**
+* Serialize a prop value the way `setAccessor()` does when it reflects it, so the runtime can
+* recognize an `attributeChangedCallback` it triggered itself.
+*
+* @param propValue the current value of a reflected prop
+* @returns the string the attribute would hold, or `null` if the attribute would be removed
+*/
+const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
+/**
 * Attach a series of runtime constructs to a compiled Stencil component
 * constructor, including getters and setters for the `@Prop` and `@State`
 * decorators, callbacks for when attributes change, and so on.
@@ -4103,11 +4290,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;
@@ -4124,14 +4312,16 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						return;
 					}
 					const propFlags = members.find(([m]) => m === propName);
-					const isBooleanTarget = propFlags && propFlags[1][0] & MEMBER_FLAGS.Boolean;
+					const propMemberFlags = propFlags ? propFlags[1][0] : 0;
+					const isBooleanTarget = propMemberFlags & MEMBER_FLAGS.Boolean;
+					if (BUILD.reflect && propMemberFlags & MEMBER_FLAGS.ReflectAttr && propMemberFlags & MEMBER_FLAGS.Any && !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) return;
 					const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
 					if (isBooleanTarget) newValue = !(newValue === null || newValue === "false");
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
 					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]);
@@ -4158,6 +4348,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);
@@ -4166,7 +4357,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);
@@ -4185,8 +4381,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) {
 				/**
@@ -4245,7 +4447,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) => {
@@ -4308,6 +4511,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();
@@ -4337,6 +4541,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));
@@ -4384,7 +4589,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;
@@ -4397,18 +4601,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);
 		});
@@ -4419,7 +4644,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");
@@ -4440,18 +4667,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;
@@ -4464,19 +4693,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);
@@ -4530,8 +4766,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;
@@ -4599,8 +4835,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);
@@ -4613,18 +4852,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) {
@@ -4670,9 +4911,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$);
 	}
@@ -4688,6 +4930,86 @@ const hostListenerOpts = (flags) => supportsListenerOptions ? {
 	capture: (flags & LISTENER_FLAGS.Capture) !== 0
 } : (flags & LISTENER_FLAGS.Capture) !== 0;
 //#endregion
+//#region src/runtime/inject-side-effect-style.ts
+const styleSheets = /* @__PURE__ */ new Map();
+const knownRoots = /* @__PURE__ */ new Set();
+const adoptedRoots = /* @__PURE__ */ new WeakMap();
+const knownFontFaces = /* @__PURE__ */ new Set();
+const adopt = (root, sheet) => {
+	let roots = adoptedRoots.get(sheet);
+	if (!roots) {
+		roots = /* @__PURE__ */ new WeakSet();
+		adoptedRoots.set(sheet, roots);
+	}
+	if (!roots.has(root)) {
+		roots.add(root);
+		root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+	}
+};
+/**
+* Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+* (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+* paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+* hold disconnected roots forever.
+* @param root the root to register
+*/
+function registerSideEffectStyleTarget(root) {
+	knownRoots.add(root);
+	for (const sheet of styleSheets.values()) adopt(root, sheet);
+}
+/**
+* Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+* @param root the root to unregister
+*/
+function unregisterSideEffectStyleTarget(root) {
+	knownRoots.delete(root);
+}
+const FONT_FACE_RE = /@font-face\s*\{[^{}]*\}/g;
+/**
+* Splits `@font-face` rules out of a CSS text - exported standalone (from private
+* module state - usually 3rd party node_modules) exported for testing
+* @param cssText the CSS text to split
+* @returns the font-face rules joined together (`null` if there were none) and the remaining CSS
+*/
+function splitFontFaces(cssText) {
+	const fontFaces = cssText.match(FONT_FACE_RE);
+	if (!fontFaces) return {
+		fontFaceText: null,
+		rest: cssText
+	};
+	return {
+		fontFaceText: fontFaces.join("\n"),
+		rest: cssText.replace(FONT_FACE_RE, "")
+	};
+}
+/**
+* Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+* encapsulation instead of always reaching for the top-level document. Not meant to be called
+* directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+* (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+*
+* `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+* (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+* @param cssText the CSS text to apply
+*/
+function injectSideEffectStyle(cssText) {
+	const { fontFaceText, rest } = splitFontFaces(cssText);
+	if (fontFaceText && !knownFontFaces.has(fontFaceText)) {
+		knownFontFaces.add(fontFaceText);
+		const fontFaceSheet = new CSSStyleSheet();
+		fontFaceSheet.replaceSync(fontFaceText);
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceSheet];
+	}
+	if (!rest.trim()) return;
+	let sheet = styleSheets.get(rest);
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(rest);
+		styleSheets.set(rest, sheet);
+	}
+	for (const root of knownRoots) adopt(root, sheet);
+}
+//#endregion
 //#region src/runtime/mixin.ts
 const baseClass = BUILD.lazyLoad ? class {} : globalThis.HTMLElement || class {};
 function Mixin(...mixins) {
@@ -4706,6 +5028,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
@@ -4792,4 +5181,4 @@ function hasKeys(obj) {
 	return false;
 }
 //#endregion
-export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, jsx, jsxDEV, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, setAssetPath, setMode, setNonce, setPlatformOptions, setRegistry, setTagTransformer, setValue, transformTag };
+export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, ReactiveControllerHost, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, injectSideEffectStyle, jsx, jsxDEV, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, registerSideEffectStyleTarget, render, setAssetPath, setMode, setNonce, setPlatformOptions, setRegistry, setTagTransformer, setValue, transformTag, unregisterSideEffectStyleTarget };