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

package/dist/runtime/server/index.mjs

@@ -1,5 +1,5 @@
-import { BUILD, BUILD as BUILD$1, Env, NAMESPACE, NAMESPACE as NAMESPACE$1 } from "@stencil/core/runtime/app-data";
-import { globalScripts, globalStyles } from "@stencil/core/runtime/app-globals";
+import { BUILD, BUILD as BUILD$1, Env, NAMESPACE, NAMESPACE as NAMESPACE$1 } from "@stencil/core/app-data";
+import { globalScripts, globalStyles } from "@stencil/core/app-globals";
 import { effect, effect as effect$1, signal } from "@preact/signals-core";
 const MEMBER_FLAGS = {
 	String: 1,
@@ -43,8 +43,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;
 /**
@@ -129,7 +141,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
@@ -295,6 +317,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",
@@ -314,6 +340,8 @@ function createShadowRoot(cmpMeta) {
 	if (BUILD$1.shadowSlotAssignmentManual) {
 		if (!!(cmpMeta.$flags$ & CMP_FLAGS.shadowSlotAssignmentManual)) opts.slotAssignment = "manual";
 	}
+	if (BUILD$1.shadowClonable) opts.clonable = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowClonable);
+	if (BUILD$1.shadowSerializable) opts.serializable = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowSerializable);
 	const shadowRoot = this.attachShadow(opts);
 	if (BUILD$1.shadowModeClosed && isClosed) this.__shadowRoot = shadowRoot;
 	if (globalStyleSheet === void 0) globalStyleSheet = null;
@@ -343,8 +371,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++) {
@@ -387,7 +417,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;
 }
@@ -418,7 +448,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 === "";
 };
 /**
@@ -467,8 +497,10 @@ function patchSlotNode(node) {
 	const assignedFactory = (elementsOnly) => function(opts) {
 		const toReturn = [];
 		const slotName = this["s-sn"];
-		if (opts?.flatten) if (BUILD$1.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$1.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);
@@ -559,8 +591,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));
 			}
 		}
@@ -763,11 +797,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() {
@@ -813,7 +847,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;
 	} });
 };
@@ -828,7 +862,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;
 	} });
 };
@@ -843,7 +877,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;
 	} });
 };
@@ -858,7 +892,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;
 	} });
 };
@@ -1033,7 +1067,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.
 *
@@ -1123,37 +1157,41 @@ 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 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$1.hotModuleReplacement) existingStyleContainer.textContent = style + existingStyleContainer.textContent;
-					else styleContainerNode.prepend(styleElm);
-				} else styleContainerNode.append(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 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$1.hotModuleReplacement) existingStyleContainer.textContent = style + existingStyleContainer.textContent;
+						else styleContainerNode.prepend(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$1.constructableCSS) {
@@ -1245,7 +1283,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
@@ -1371,11 +1414,15 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		}
 	} else if (BUILD$1.vdomStyle && memberName === "style") {
 		if (BUILD$1.updatable) {
-			for (const prop in oldValue) if (!newValue || newValue[prop] == null) if (!BUILD$1.hydrateServerSide && prop.includes("-")) elm.style.removeProperty(prop);
-			else elm.style[prop] = "";
+			for (const prop in oldValue) if (!newValue || newValue[prop] == null) {
+				if (!BUILD$1.hydrateServerSide && prop.includes("-")) elm.style.removeProperty(prop);
+				else elm.style[prop] = "";
+			}
+		}
+		for (const prop in newValue) if (!oldValue || newValue[prop] !== oldValue[prop]) {
+			if (!BUILD$1.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$1.hydrateServerSide && prop.includes("-")) elm.style.setProperty(prop, newValue[prop]);
-		else elm.style[prop] = newValue[prop];
 	} else if (BUILD$1.vdomKey && memberName === "key") {} else if (BUILD$1.vdomRef && memberName === "ref") {
 		if (newValue) queueRefAttachment(newValue, elm);
 	} else if (BUILD$1.vdomListener && (BUILD$1.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
@@ -1384,11 +1431,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$1.vdomPropOrAttr && memberName[0] === "a" && memberName.startsWith("attr:")) {
+	} else if (BUILD$1.vdomPropOrAttrPrefix && memberName[0] === "a" && memberName.startsWith("attr:")) {
 		const propName = memberName.slice(5);
 		let attrName;
 		if (BUILD$1.member) {
@@ -1403,7 +1450,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$1.vdomPropOrAttr && memberName[0] === "p" && memberName.startsWith("prop:")) {
+	} else if (BUILD$1.vdomPropOrAttrPrefix && memberName[0] === "p" && memberName.startsWith("prop:")) {
 		const propName = memberName.slice(5);
 		try {
 			elm[propName] = newValue;
@@ -1423,8 +1470,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 {}
 		/**
@@ -1442,8 +1491,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 			}
 		}
 		if (newValue == null || newValue === false) {
-			if (newValue !== false || elm.getAttribute(memberName) === "") if (BUILD$1.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$1.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$1.vdomXlink && xlink) elm.setAttributeNS(XLINK_NS, memberName, newValue);
@@ -1451,6 +1502,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
@@ -1574,6 +1637,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 		}
 	} else if (BUILD$1.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
 		elm = newVNode.$elm$ = BUILD$1.isDebug || BUILD$1.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
+		if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
 		if (BUILD$1.vdomAttribute) updateElement(null, newVNode, isSvgMode);
 	} else {
 		if (BUILD$1.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
@@ -1849,8 +1913,10 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
 			node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
 			newStartVnode = newCh[++newStartIdx];
 		}
-		if (node) if (BUILD$1.slotRelocation) insertBefore(referenceNode(oldStartVnode.$elm$).parentNode, node, referenceNode(oldStartVnode.$elm$));
-		else insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
+		if (node) {
+			if (BUILD$1.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$1.updatable && newStartIdx > newEndIdx) removeVnodes(oldCh, oldStartIdx, oldEndIdx);
@@ -1937,6 +2003,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}.
@@ -2041,7 +2131,7 @@ const insertBefore = (parent, newNode, reference, isInitialLoad) => {
 			return newNode;
 		}
 	}
-	if (parent.__insertBefore) return parent.__insertBefore(newNode, reference);
+	if (BUILD$1.slotRelocation && parent?.__insertBefore) return parent.__insertBefore(newNode, reference);
 	else return parent?.insertBefore(newNode, reference);
 };
 /**
@@ -2135,6 +2225,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) {
@@ -2194,7 +2285,7 @@ render() {
 	}
 	if (BUILD$1.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()) {
@@ -2212,16 +2303,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$1.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$1.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$1.taskQueue && BUILD$1.updatable) hostRef.$flags$ |= HOST_FLAGS.isQueuedForUpdate;
+	if (BUILD$1.updatable) hostRef.$flags$ |= HOST_FLAGS.isQueuedForUpdate;
 	if (BUILD$1.asyncLoading && hostRef.$flags$ & HOST_FLAGS.isWaitingForChildren) {
 		hostRef.$flags$ |= HOST_FLAGS.needsRerender;
 		return;
@@ -2229,6 +2362,8 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
 	attachToAncestor(hostRef, hostRef.$ancestorComponent$);
 	const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
 	if (isInitialLoad) {
+		const pendingConnects = BUILD$1.asyncLoading ? hostRef.$hostElement$["s-pc"] : void 0;
+		if (pendingConnects && pendingConnects.length > 0) return Promise.all(pendingConnects).then(dispatch).catch(dispatch);
 		queueMicrotask(() => {
 			dispatch();
 		});
@@ -2268,10 +2403,6 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
 	let maybePromise;
 	if (isInitialLoad) {
 		if (BUILD$1.lazyLoad) {
-			if (BUILD$1.slotRelocation && hostRef.$deferredConnectedCallback$) {
-				hostRef.$deferredConnectedCallback$ = false;
-				safeCall(instance, "connectedCallback", void 0, elm);
-			}
 			if (BUILD$1.hostListener) {
 				hostRef.$flags$ |= HOST_FLAGS.isListenReady;
 				if (hostRef.$queuedListeners$) {
@@ -2284,6 +2415,14 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
 		if (BUILD$1.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillLoad");
 		maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
 	} else {
+		if (BUILD$1.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$1.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillUpdate");
 		maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
 	}
@@ -2398,7 +2537,6 @@ let renderingRef = null;
 const callRender = (hostRef, instance, elm, isInitialLoad) => {
 	const allRenderFn = !!BUILD$1.allRenderFn;
 	const lazyLoad = !!BUILD$1.lazyLoad;
-	const taskQueue = !!BUILD$1.taskQueue;
 	const updatable = !!BUILD$1.updatable;
 	try {
 		renderingRef = instance;
@@ -2407,14 +2545,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$1.hasRenderFn || BUILD$1.reflect) if (BUILD$1.vdomRender || BUILD$1.reflect) if (BUILD$1.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$1.hasRenderFn || BUILD$1.reflect) {
+			if (BUILD$1.vdomRender || BUILD$1.reflect) {
+				if (BUILD$1.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$);
@@ -2554,17 +2695,19 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
 	const instance = BUILD$1.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);
 			}
@@ -2599,7 +2742,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;
@@ -2648,22 +2792,28 @@ 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$1.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$1.isDev && typeof nodeName !== "function" && child.$flags$ === void 0);
-				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$1.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$1.isDev);
+						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$1.isDev && nodeName === "input") validateInputProperties(vnodeData);
 		if (BUILD$1.vdomKey && vnodeData.key) key = vnodeData.key;
 		if (BUILD$1.slotRelocation && vnodeData.name) slotName = vnodeData.name;
@@ -2762,7 +2912,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);
@@ -3641,14 +3791,15 @@ const parsePropertyValue = (propValue, propType, isFormAssociated) => {
 		/**
 		* ensure this value is of the correct prop type
 		*/
-		if (BUILD$1.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$1.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
-		else return propValue === "false" ? false : propValue === "" || !!propValue;
+		if (BUILD$1.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$1.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
+			else return propValue === "false" ? false : propValue === "" || !!propValue;
+		}
 		/**
 		* force it to be a number
 		*/
@@ -3736,7 +3887,11 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 		}
 		if (BUILD$1.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);
 		}
@@ -3870,11 +4025,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						};
 						for (const deserializer of cmpMeta.$deserializers$[propName]) {
 							const [[methodName]] = Object.entries(deserializer);
-							if (BUILD$1.lazyLoad) if (hostRef.$lazyInstance$) setVal(methodName, hostRef.$lazyInstance$);
-							else hostRef.$fetchedCbList$.push(() => {
-								setVal(methodName, hostRef.$lazyInstance$);
-							});
-							else setVal(methodName, this);
+							if (BUILD$1.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;
@@ -3898,7 +4054,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$1.reflect && m[0] & MEMBER_FLAGS.ReflectAttr) cmpMeta.$attrsToReflect$?.push([propName, attrName]);
@@ -3925,6 +4081,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$1.lazyLoad && bundleId) {
 				const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
@@ -3933,7 +4090,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$1.member && !Cstr.isProxied) {
 					if (BUILD$1.propChangeCallback) {
 						cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
@@ -3952,8 +4114,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 				}
 				if (BUILD$1.member) hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
 				endNewInstance();
-				if (!(BUILD$1.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) fireConnectedCallback(hostRef.$lazyInstance$, elm);
-				else hostRef.$deferredConnectedCallback$ = true;
+				if (BUILD$1.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$);
+				if (!(BUILD$1.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) {
+					fireConnectedCallback(hostRef.$lazyInstance$, elm);
+					if (BUILD$1.asyncLoading) markFirstConnected(hostRef);
+				} else queueMicrotask(() => {
+					fireConnectedCallback(hostRef.$lazyInstance$, elm);
+					if (BUILD$1.asyncLoading) markFirstConnected(hostRef);
+				});
 			} else Cstr = elm.constructor;
 			if (BUILD$1.style && Cstr && Cstr.style) {
 				/**
@@ -4012,7 +4180,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 			hostRef.$onRenderResolve$();
 			hostRef.$onRenderResolve$ = void 0;
 		}
-		if (BUILD$1.asyncLoading && hostRef.$onReadyResolve$) hostRef.$onReadyResolve$(elm);
+		if (BUILD$1.asyncLoading) markFirstConnected(hostRef);
+		if (BUILD$1.asyncLoading && hostRef.$onReadyResolve$ && !(hostRef.$flags$ & HOST_FLAGS.hasFailedLoad)) hostRef.$onReadyResolve$(elm);
 	}
 };
 const fireConnectedCallback = (instance, elm) => {
@@ -4075,6 +4244,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();
@@ -4104,6 +4274,7 @@ const disconnectedCallback = async (elm) => {
 			hostRef.$signalCleanup$();
 			hostRef.$signalCleanup$ = void 0;
 		}
+		if (BUILD$1.asyncLoading && hostRef && !(hostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) markFirstConnected(hostRef);
 		if (!BUILD$1.lazyLoad) disconnectInstance(elm);
 		else if (hostRef?.$lazyInstance$) disconnectInstance(hostRef.$lazyInstance$, elm);
 		else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$, elm));
@@ -4151,7 +4322,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;
@@ -4164,18 +4334,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$1.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$1.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);
 		});
@@ -4186,7 +4377,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$1.profile && performance.mark && performance.getEntriesByName("st:app:start", "mark").length === 0) performance.mark("st:app:start");
@@ -4207,18 +4400,20 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 			hmrStart(this, cmpMeta, hmrVersionId);
 		};
 		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD$1.slotCloneNode || BUILD$1.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(Cstr.prototype);
-		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD$1.lightDomPatches || BUILD$1.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(Cstr.prototype);
-		else {
-			if (BUILD$1.slotChildNodes || BUILD$1.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(Cstr.prototype);
-			if (BUILD$1.slotDomMutations || BUILD$1.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$1.lightDomPatches || BUILD$1.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(Cstr.prototype);
+			else {
+				if (BUILD$1.slotChildNodes || BUILD$1.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(Cstr.prototype);
+				if (BUILD$1.slotDomMutations || BUILD$1.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$1.slotTextContent) patchTextContent(Cstr.prototype);
 			}
-			if (BUILD$1.slotTextContent) patchTextContent(Cstr.prototype);
 		}
 		if (BUILD$1.hydrateClientSide && BUILD$1.shadowDom) hydrateScopedToShadow();
 		const originalConnectedCallback = Cstr.prototype.connectedCallback;
@@ -4231,19 +4426,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$1.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$1.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$1.shadowModeClosed && !!(cmpMeta.$flags$ & CMP_FLAGS.shadowModeClosed);
@@ -4297,8 +4499,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;
@@ -4366,8 +4568,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);
@@ -4380,18 +4585,20 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 				}
 			};
 			if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD$1.slotCloneNode || BUILD$1.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(HostElement.prototype);
-			if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD$1.lightDomPatches || BUILD$1.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(HostElement.prototype);
-			else {
-				if (BUILD$1.slotChildNodes || BUILD$1.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(HostElement.prototype);
-				if (BUILD$1.slotDomMutations || BUILD$1.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$1.lightDomPatches || BUILD$1.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(HostElement.prototype);
+				else {
+					if (BUILD$1.slotChildNodes || BUILD$1.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(HostElement.prototype);
+					if (BUILD$1.slotDomMutations || BUILD$1.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$1.slotTextContent) patchTextContent(HostElement.prototype);
 				}
-				if (BUILD$1.slotTextContent) patchTextContent(HostElement.prototype);
 			}
 			if (BUILD$1.formAssociated && cmpMeta.$flags$ & CMP_FLAGS.formAssociated) HostElement.formAssociated = true;
 			if (BUILD$1.hotModuleReplacement) HostElement.prototype["s-hmr"] = function(hmrVersionId) {
@@ -4437,9 +4644,10 @@ const addHostEventListeners = (elm, hostRef, listeners) => {
 };
 const hostListenerProxy = (hostRef, methodName) => (ev) => {
 	try {
-		if (BUILD$1.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$1.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$);
 	}
@@ -4503,6 +4711,20 @@ function hasKeys(obj) {
 	return false;
 }
 //#endregion
+//#region src/server/platform/h-async.ts
+const hAsync = (nodeName, vnodeData, ...children) => {
+	if (Array.isArray(children) && children.length > 0) {
+		const flatChildren = children.flat(Infinity);
+		if (flatChildren.some((child) => child instanceof Promise)) return Promise.all(flatChildren).then((resolvedChildren) => {
+			return h(nodeName, vnodeData, ...resolvedChildren);
+		}).catch((err) => {
+			return h(nodeName, vnodeData);
+		});
+		return h(nodeName, vnodeData, ...flatChildren);
+	}
+	return h(nodeName, vnodeData);
+};
+//#endregion
 //#region src/runtime/vdom/vdom-annotations.ts
 /**
 * Updates the DOM generated on the server with annotations such as node attributes and
@@ -4645,7 +4867,8 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
 		const nodeName = parentNode?.nodeName;
 		if (nodeName !== "STYLE" && nodeName !== "SCRIPT") {
 			const textNodeId = `t.${childId}`;
-			insertBefore(parentNode, doc.createComment(textNodeId), childElm);
+			const commentBeforeTextNode = doc.createComment(textNodeId);
+			insertBefore(parentNode, commentBeforeTextNode, childElm);
 		}
 	} else if (childElm.nodeType === NODE_TYPE.CommentNode) {
 		if (childElm["s-sr"]) childElm.nodeValue = `s.${childId}.${childElm["s-sn"] || ""}`;
@@ -4658,20 +4881,6 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
 	}
 };
 //#endregion
-//#region src/server/platform/h-async.ts
-const hAsync = (nodeName, vnodeData, ...children) => {
-	if (Array.isArray(children) && children.length > 0) {
-		const flatChildren = children.flat(Infinity);
-		if (flatChildren.some((child) => child instanceof Promise)) return Promise.all(flatChildren).then((resolvedChildren) => {
-			return h(nodeName, vnodeData, ...resolvedChildren);
-		}).catch((err) => {
-			return h(nodeName, vnodeData);
-		});
-		return h(nodeName, vnodeData, ...flatChildren);
-	}
-	return h(nodeName, vnodeData);
-};
-//#endregion
 //#region src/server/platform/proxy-host-element.ts
 function proxyHostElement(elm, cstr) {
 	const cmpMeta = cstr.cmpMeta;
@@ -4694,22 +4903,19 @@ function proxyHostElement(elm, cstr) {
 				const propValue = elm[memberName];
 				let attrPropVal;
 				const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(cstr.prototype, memberName) || {};
-				if (attrValue != null) if (cmpMeta.$deserializers$?.[memberName]) for (const deserializer of cmpMeta.$deserializers$[memberName]) {
-					const [[methodName]] = Object.entries(deserializer);
-					attrPropVal = cstr.prototype[methodName](attrValue, memberName);
+				if (attrValue != null) {
+					if (cmpMeta.$deserializers$?.[memberName]) for (const deserializer of cmpMeta.$deserializers$[memberName]) {
+						const [[methodName]] = Object.entries(deserializer);
+						attrPropVal = cstr.prototype[methodName](attrValue, memberName);
+					}
+					else attrPropVal = parsePropertyValue(attrValue, memberFlags, !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
 				}
-				else attrPropVal = parsePropertyValue(attrValue, memberFlags, !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
 				if (propValue !== void 0) {
 					attrPropVal = propValue;
 					delete elm[memberName];
 				}
-				if (attrPropVal !== void 0) {
-					if (origSetter) {
-						origSetter.apply(elm, [attrPropVal]);
-						attrPropVal = origGetter ? origGetter.apply(elm) : attrPropVal;
-					}
-					hostRef?.$instanceValues$?.set(memberName, attrPropVal);
-				}
+				const userSetter = !cstr.isProxied ? origSetter : void 0;
+				if (attrPropVal !== void 0 && !userSetter) hostRef?.$instanceValues$?.set(memberName, attrPropVal);
 				const getterSetterDescriptor = {
 					get: function() {
 						return getValue(this, memberName);
@@ -4723,8 +4929,26 @@ function proxyHostElement(elm, cstr) {
 				Object.defineProperty(elm, memberName, getterSetterDescriptor);
 				Object.defineProperty(elm, metaAttributeName, getterSetterDescriptor);
 				hostRef.$fetchedCbList$.push(() => {
-					if (!hostRef?.$instanceValues$?.has(memberName)) setValue(elm, memberName, attrPropVal !== void 0 ? attrPropVal : hostRef.$lazyInstance$[memberName], cmpMeta);
-					Object.defineProperty(hostRef.$lazyInstance$, memberName, getterSetterDescriptor);
+					if (userSetter && attrPropVal !== void 0) {
+						userSetter.apply(hostRef.$lazyInstance$, [attrPropVal]);
+						const processedValue = origGetter ? origGetter.apply(hostRef.$lazyInstance$) : attrPropVal;
+						setValue(elm, memberName, processedValue, cmpMeta);
+					} else if (!hostRef?.$instanceValues$?.has(memberName)) setValue(elm, memberName, attrPropVal !== void 0 ? attrPropVal : hostRef.$lazyInstance$[memberName], cmpMeta);
+					if (userSetter) Object.defineProperty(hostRef.$lazyInstance$, memberName, {
+						get: origGetter ? function() {
+							return origGetter.call(this);
+						} : function() {
+							return getValue(this, memberName);
+						},
+						set: function(newValue) {
+							userSetter.call(this, newValue);
+							newValue = origGetter ? origGetter.call(this) : newValue;
+							setValue(elm, memberName, newValue, cmpMeta);
+						},
+						configurable: true,
+						enumerable: true
+					});
+					else Object.defineProperty(hostRef.$lazyInstance$, memberName, getterSetterDescriptor);
 				});
 			} else if (memberFlags & MEMBER_FLAGS.Method) Object.defineProperty(elm, memberName, { value(...args) {
 				const ref = getHostRef(this);
@@ -4904,7 +5128,7 @@ function shouldHydrate(elm) {
 	if (parentNode == null) return true;
 	return shouldHydrate(parentNode);
 }
-const NO_HYDRATE_TAGS = new Set([
+const NO_HYDRATE_TAGS = /* @__PURE__ */ new Set([
 	"CODE",
 	"HEAD",
 	"IFRAME",
@@ -4933,9 +5157,11 @@ function renderCatchError(opts, results, err) {
 		const u = new URL(opts.url);
 		if (u.pathname !== "/") diagnostic.header += ": " + u.pathname;
 	} catch {}
-	if (err != null) if (err.stack != null) diagnostic.messageText = err.stack.toString();
-	else if (err.message != null) diagnostic.messageText = err.message.toString();
-	else diagnostic.messageText = err.toString();
+	if (err != null) {
+		if (err.stack != null) diagnostic.messageText = err.stack.toString();
+		else if (err.message != null) diagnostic.messageText = err.message.toString();
+		else diagnostic.messageText = err.toString();
+	}
 	results.diagnostics.push(diagnostic);
 }
 function printTag(elm) {
@@ -5046,7 +5272,7 @@ const writeTask = (cb) => {
 		}
 	});
 };
-const resolved = /* @__PURE__ */ Promise.resolve();
+const resolved = /*@__PURE__*/ Promise.resolve();
 const nextTick = (cb) => resolved.then(cb);
 const defaultConsoleError = (e) => {
 	if (e != null) console.error(e.stack || e.message || e);