@stencil/core 5.0.0-beta.3 → 5.0.0-beta.30

package/dist/runtime/index.js

@@ -1,12 +1,89 @@
 import { BUILD } from "../app-data/index.js";
 import "../app-globals/index.js";
-import { effect, effect as effect$1, signal } from "@preact/signals-core";
+import * as SignalsCore from "@preact/signals-core";
+//#region src/runtime/runtime-constants.ts
+/**
+* Bit flags for recording various properties of VDom nodes
+*/
+const VNODE_FLAGS = {
+	/**
+	* Whether or not a vdom node is a slot reference
+	*/
+	isSlotReference: 1,
+	/**
+	* Whether or not a slot element has fallback content
+	*/
+	isSlotFallback: 2,
+	/**
+	* Whether or not an element is a host element
+	*/
+	isHost: 4
+};
+const PROXY_FLAGS = {
+	isElementConstructor: 1,
+	proxyState: 2
+};
+const PLATFORM_FLAGS = {
+	/**
+	* designates a node in the DOM as being actively moved by the runtime
+	*/
+	isTmpDisconnected: 1,
+	appLoaded: 2,
+	queueSync: 4,
+	queueMask: 6
+};
+/**
+* A (subset) of node types which are relevant for the Stencil runtime. These
+* values are based on the values which can possibly be returned by the
+* `.nodeType` property of a DOM node. See here for details:
+*
+* {@link https://dom.spec.whatwg.org/#ref-for-dom-node-nodetype%E2%91%A0}
+*/
+const NODE_TYPE = {
+	ElementNode: 1,
+	TextNode: 3,
+	CommentNode: 8,
+	DocumentNode: 9,
+	DocumentTypeNode: 10,
+	DocumentFragment: 11
+};
+const HYDRATE_ID = "s-id";
+const HYDRATED_STYLE_ID = "sty-id";
+const HYDRATE_CHILD_ID = "c-id";
+const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
+/**
+* Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
+*
+* Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
+* support as of Stencil v4.
+*/
+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",
+	"formDisabledCallback",
+	"formStateRestoreCallback"
+];
+//#endregion
 //#region src/client/client-build.ts
+/**
+* `isDev` / `isTesting` are getters, not copies: the transpile path (e.g. `@stencil/unplugin`)
+* sets `BUILD.*` overrides from each component module, which runs after this module is evaluated.
+*/
 const Build = {
-	isDev: BUILD.isDev,
 	isBrowser: true,
 	isServer: false,
-	isTesting: BUILD.isTesting
+	get isDev() {
+		return BUILD.isDev;
+	},
+	get isTesting() {
+		return BUILD.isTesting;
+	}
 };
 const MEMBER_FLAGS = {
 	String: 1,
@@ -371,78 +448,9 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 //#endregion
 //#region src/client/client-style.ts
 const styles = /*@__PURE__*/ new Map();
-const modeResolutionChain = [];
+const modeResolver = [];
 const needsScopedSSR = () => false;
 //#endregion
-//#region src/runtime/runtime-constants.ts
-/**
-* Bit flags for recording various properties of VDom nodes
-*/
-const VNODE_FLAGS = {
-	/**
-	* Whether or not a vdom node is a slot reference
-	*/
-	isSlotReference: 1,
-	/**
-	* Whether or not a slot element has fallback content
-	*/
-	isSlotFallback: 2,
-	/**
-	* Whether or not an element is a host element
-	*/
-	isHost: 4
-};
-const PROXY_FLAGS = {
-	isElementConstructor: 1,
-	proxyState: 2
-};
-const PLATFORM_FLAGS = {
-	/**
-	* designates a node in the DOM as being actively moved by the runtime
-	*/
-	isTmpDisconnected: 1,
-	appLoaded: 2,
-	queueSync: 4,
-	queueMask: 6
-};
-/**
-* A (subset) of node types which are relevant for the Stencil runtime. These
-* values are based on the values which can possibly be returned by the
-* `.nodeType` property of a DOM node. See here for details:
-*
-* {@link https://dom.spec.whatwg.org/#ref-for-dom-node-nodetype%E2%91%A0}
-*/
-const NODE_TYPE = {
-	ElementNode: 1,
-	TextNode: 3,
-	CommentNode: 8,
-	DocumentNode: 9,
-	DocumentTypeNode: 10,
-	DocumentFragment: 11
-};
-const HYDRATE_ID = "s-id";
-const HYDRATED_STYLE_ID = "sty-id";
-const HYDRATE_CHILD_ID = "c-id";
-const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
-/**
-* Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
-*
-* Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
-* support as of Stencil v4.
-*/
-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",
-	"formDisabledCallback",
-	"formStateRestoreCallback"
-];
-//#endregion
 //#region src/client/client-window.ts
 const win = typeof window !== "undefined" ? window : {};
 win.HTMLElement;
@@ -480,7 +488,7 @@ let queuePending = false;
 const queueDomReads = [];
 const queueDomWrites = [];
 const queueDomWritesLow = [];
-const scheduleFlush = () => win.document?.hidden ? nextTick(flush) : plt.raf(flush);
+const scheduleFlush = () => win.document?.hidden ? setTimeout(flush, 16) : plt.raf(flush);
 const queueTask = (queue, write) => (cb) => {
 	queue.push(cb);
 	if (!queuePending) {
@@ -1557,6 +1565,13 @@ const isComplexType = (o) => {
 	return o === "object" || o === "function";
 };
 //#endregion
+//#region src/runtime/signals-core.ts
+const getCore = () => globalThis[Symbol.for("stencil.preact-signals-core")] ??= SignalsCore;
+const effect = (fn, options) => getCore().effect(fn, options);
+function signal(value, options) {
+	return getCore().signal(value, options);
+}
+//#endregion
 //#region src/runtime/event-emitter.ts
 const createEvent = (ref, name, flags) => {
 	const elm = getElement(ref);
@@ -1589,6 +1604,11 @@ const setRegistry = (registry) => {
 	_registry = registry;
 };
 const getRegistry = () => _registry ?? customElements;
+/**
+* @param elm a defined component host
+* @returns the registry the host's class was defined in, else the active registry
+*/
+const getHostRegistry = (elm) => elm.constructor._registry ?? getRegistry();
 //#endregion
 //#region src/runtime/vdom/set-accessor.ts
 /**
@@ -1632,7 +1652,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		attrMap.get(memberName)?.();
 		if (!signalAttrDisposers.has(elm)) signalAttrDisposers.set(elm, attrMap);
 		let prevVal = oldValue;
-		attrMap.set(memberName, effect$1(() => {
+		attrMap.set(memberName, effect(() => {
 			const curVal = newValue.value;
 			setAccessor(elm, memberName, prevVal, curVal, isSvg, flags);
 			prevVal = curVal;
@@ -1712,10 +1732,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		const isComplex = isComplexType(newValue);
 		if (!BUILD.lazyLoad) {
 			const isStandardAttr = ln.startsWith("aria-") || ln.startsWith("data-");
-			if (!isProp && !isStandardAttr && elm.tagName?.includes("-") && elm.tagName !== "SLOT-FB" && typeof customElements !== "undefined" && !customElements.get(elm.tagName.toLowerCase())) {
+			if (!isProp && !isStandardAttr && elm.tagName?.includes("-") && elm.tagName !== "SLOT-FB" && !customElements.get(elm.tagName.toLowerCase())) {
 				if (!elm["s-pp"]) elm["s-pp"] = /* @__PURE__ */ new Map();
 				elm["s-pp"].set(memberName, newValue);
-				return;
+				if (isComplex || /[A-Z]/.test(memberName)) return;
 			}
 		}
 		if ((isProp || isComplex && newValue !== null) && !isSvg) try {
@@ -1833,6 +1853,7 @@ function sortedAttrNames(attrNames) {
 let scopeId;
 let contentRef;
 let hostTagName;
+let hostRegistry;
 let useNativeShadowDom = false;
 let checkSlotFallbackVisibility = false;
 let checkSlotRelocate = false;
@@ -1849,16 +1870,33 @@ const signalNodeDisposers = /* @__PURE__ */ new WeakMap();
 const disposeSignalVNode = (vnode) => {
 	const elm = vnode.$elm$;
 	if (elm) {
-		const dispose = signalNodeDisposers.get(elm);
-		if (dispose) {
-			dispose();
-			signalNodeDisposers.delete(elm);
-		}
+		disposeTextSignal(elm);
 		disposeAllSignalAttrs(elm);
 	}
 	vnode.$children$?.forEach(disposeSignalVNode);
 };
 /**
+* Tear down a text node's signal subscription, if it has one.
+* @param textNode the text node to unsubscribe
+*/
+const disposeTextSignal = (textNode) => {
+	const dispose = signalNodeDisposers.get(textNode);
+	if (dispose) {
+		dispose();
+		signalNodeDisposers.delete(textNode);
+	}
+};
+/**
+* Subscribe a text node to a signal, keeping its `data` in sync on every change.
+* @param textNode the text node to keep in sync
+* @param textSig the signal to subscribe to
+*/
+const wireTextSignal = (textNode, textSig) => {
+	signalNodeDisposers.set(textNode, effect(() => {
+		textNode.data = String(textSig.value);
+	}));
+};
+/**
 * Create a DOM Node corresponding to one of the children of a given VNode.
 *
 * @param oldParentVNode the parent VNode from the previous render
@@ -1880,13 +1918,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 	if (BUILD.isDev && newVNode.$elm$) consoleDevError(`The JSX ${newVNode.$text$ !== null ? `"${newVNode.$text$}" text` : `"${String(newVNode.$tag$)}" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes`);
 	if (BUILD.vdomText && newVNode.$text$ != null) {
 		elm = newVNode.$elm$ = win.document.createTextNode(newVNode.$text$);
-		if (BUILD.vdomSignals && newVNode.$signal$) {
-			const textSig = newVNode.$signal$;
-			const textNode = elm;
-			signalNodeDisposers.set(textNode, effect$1(() => {
-				textNode.data = String(textSig.value);
-			}));
-		}
+		if (BUILD.vdomSignals && newVNode.$signal$) wireTextSignal(elm, newVNode.$signal$);
 	} 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;
@@ -1895,8 +1927,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 		if (BUILD.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
 		if (!win.document) throw new Error("No DOM environment available for rendering.");
 		const tag = !useNativeShadowDom && BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotFallback ? "slot-fb" : newVNode.$tag$;
-		const _reg = getRegistry();
-		const registryOpts = _reg !== win.customElements && tag.includes("-") ? { customElementRegistry: _reg } : void 0;
+		const registryOpts = hostRegistry !== win.customElements && tag.includes("-") ? { customElementRegistry: hostRegistry } : void 0;
 		elm = newVNode.$elm$ = BUILD.svg && isSvgMode ? win.document.createElementNS(SVG_NS, tag) : win.document.createElement(tag, registryOpts);
 		if (BUILD.svg && isSvgMode && newVNode.$tag$ === "foreignObject") isSvgMode = false;
 		if (BUILD.vdomAttribute) updateElement(null, newVNode, isSvgMode);
@@ -2154,7 +2185,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
 		}
 		if (BUILD.vdomKey && idxInOld >= 0) {
 			elmToMove = oldCh[idxInOld];
-			if (elmToMove.$tag$ !== newStartVnode.$tag$) node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+			if (elmToMove.$tag$ !== newStartVnode.$tag$) node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
 			else {
 				patch(elmToMove, newStartVnode, isInitialRender);
 				oldCh[idxInOld] = void 0;
@@ -2247,7 +2278,17 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
 		else if (BUILD.hydrateClientSide && isInitialRender && BUILD.updatable && oldChildren !== null && newChildren === null) newVNode.$children$ = oldChildren;
 		if (BUILD.svg && isSvgMode && tag === "svg") isSvgMode = false;
 	} else if (BUILD.vdomText && BUILD.slotRelocation && (defaultHolder = elm["s-cr"])) defaultHolder.parentNode.textContent = text;
-	else if (BUILD.vdomText && oldVNode.$text$ !== text) elm.data = text;
+	else if (BUILD.vdomText) {
+		if (BUILD.vdomSignals && newVNode.$signal$) {
+			if (newVNode.$signal$ !== oldVNode.$signal$) {
+				disposeTextSignal(elm);
+				wireTextSignal(elm, newVNode.$signal$);
+			}
+		} else {
+			if (BUILD.vdomSignals && oldVNode.$signal$) disposeTextSignal(elm);
+			if (oldVNode.$text$ !== text) elm.data = text;
+		}
+	}
 };
 /**
 * Component-global information about nodes which are either currently being
@@ -2435,6 +2476,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
 	const oldVNode = hostRef.$vnode$ || newVNode(null, null);
 	const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
 	hostTagName = hostElm.tagName;
+	hostRegistry = getHostRegistry(hostElm);
 	if (BUILD.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) throw new Error(`The <Host> must be the single root component.
 Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
 
@@ -2587,11 +2629,12 @@ const markFirstConnected = (hostRef) => {
 * autoloader, where the ancestor tag may not be defined yet.
 *
 * @param ancestorElm the nearest Stencil ancestor element
+* @param registry the registry the waiting component is defined in
 */
-const awaitAncestorConnected = async (ancestorElm) => {
+const awaitAncestorConnected = async (ancestorElm, registry) => {
 	let ancestorHostRef = getHostRef(ancestorElm);
 	if (!BUILD.lazyLoad && !ancestorHostRef) {
-		await getRegistry().whenDefined(ancestorElm.tagName.toLowerCase());
+		await registry.whenDefined(ancestorElm.tagName.toLowerCase());
 		ancestorHostRef = getHostRef(ancestorElm);
 	}
 	if (ancestorHostRef && !(ancestorHostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) await ensureFirstConnectPromise(ancestorHostRef);
@@ -2947,8 +2990,7 @@ 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 initialVal = hostRef.$instanceValues$.get(memberName);
-		const sig = signal(initialVal);
+		const sig = signal(hostRef.$instanceValues$.get(memberName));
 		hostRef.$signalValues$.set(memberName, sig);
 		let prevScheduleVal = sig.peek();
 		disposers.push(effect(() => {
@@ -3076,9 +3118,7 @@ const h = (nodeName, vnodeData, ...children) => {
 			if (classData && !(BUILD.vdomSignals && isSignalLike(classData))) vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" ");
 		}
 	}
-	if (BUILD.isDev && vNodeChildren.some(isHost)) consoleDevError(`The <Host> must be the single root component. Make sure:
-- You are NOT using hostData() and <Host> in the same component.
-- <Host> is used once, and it's the single root component of the render() function.`);
+	if (BUILD.isDev && vNodeChildren.some(isHost)) consoleDevError(`The <Host> must be used once, and be the single root component of the render() function.`);
 	if (BUILD.vdomFunctional && typeof nodeName === "function") return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
 	const vnode = newVNode(nodeName, null);
 	vnode.$attrs$ = vnodeData;
@@ -3131,17 +3171,23 @@ const vdomFnUtils = {
 * Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a
 * friendlier public interface (hence, 'convertToPublic').
 *
-* @param node the virtual DOM node to convert
+* Functional components receive primitive children unwrapped, so those
+* become text-only child nodes.
+*
+* @param node the virtual DOM node (or primitive child) to convert
 * @returns a converted child node
 */
-const convertToPublic = (node) => ({
+const convertToPublic = (node) => typeof node !== "object" ? {
+	vtag: null,
+	vtext: String(node)
+} : {
 	vattrs: node.$attrs$,
 	vchildren: node.$children$,
 	vkey: node.$key$,
 	vname: node.$name$,
 	vtag: node.$tag$,
 	vtext: node.$text$
-});
+};
 /**
 * Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in
 * order to use the resulting object in the virtual DOM. The initial object was
@@ -3158,11 +3204,11 @@ const convertToPrivate = (node) => {
 		if (node.vname) vnodeData.name = node.vname;
 		return h(node.vtag, vnodeData, ...node.vchildren || []);
 	}
-	const vnode = newVNode(node.vtag, node.vtext);
-	vnode.$attrs$ = node.vattrs;
-	vnode.$children$ = node.vchildren;
-	vnode.$key$ = node.vkey;
-	vnode.$name$ = node.vname;
+	const vnode = newVNode(node.vtag ?? null, node.vtext);
+	vnode.$attrs$ = node.vattrs ?? null;
+	vnode.$children$ = node.vchildren ?? null;
+	vnode.$key$ = node.vkey ?? null;
+	vnode.$name$ = node.vname ?? null;
 	return vnode;
 };
 /**
@@ -3460,6 +3506,7 @@ const initializeDocumentHydrate = (node, orgLocNodes) => {
 const createSimpleVNode = (vnode) => ({
 	$flags$: 0,
 	$index$: "0",
+	$children$: null,
 	...vnode
 });
 function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNodes, slotNodes, shadowRootNodes, slottedNodes) {
@@ -3854,7 +3901,7 @@ const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector)
 		else return shallowPart.trim();
 	}).join(", ");
 };
-const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer");
+const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer") || selector.startsWith("@container");
 const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
 	return processRules(cssText, (rule) => {
 		let selector = rule.selector;
@@ -3973,8 +4020,11 @@ const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
 };
 //#endregion
 //#region src/runtime/mode.ts
-const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
-const setMode = (handler) => modeResolutionChain.push(handler);
+const computeMode = (elm) => modeResolver.map((h) => h(elm)).find((m) => !!m);
+const setMode = (handler) => {
+	modeResolver.length = 0;
+	modeResolver.push(handler);
+};
 const getMode = (ref) => getHostRef(ref)?.$modeName$;
 //#endregion
 //#region src/runtime/normalize-watchers.ts
@@ -4039,23 +4089,14 @@ const normalizeWatchers = (raw) => {
 *
 * @param propValue the new value to coerce to some type
 * @param propType the type of the prop, expressed as a binary number
-* @param isFormAssociated whether the component is form-associated (optional)
 * @returns the parsed/coerced value
 */
-const parsePropertyValue = (propValue, propType, isFormAssociated) => {
+const parsePropertyValue = (propValue, propType) => {
 	if (propValue != null && !isComplexType(propValue)) {
 		/**
 		* 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) return propValue === "" || !!propValue;
 		/**
 		* force it to be a number
 		*/
@@ -4097,7 +4138,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 	if (BUILD.signalBacking) {
 		const sig = hostRef?.$signalValues$?.get(propName);
 		if (sig !== void 0) {
-			const parsed = parsePropertyValue(newVal, cmpMeta.$members$[propName][0], BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+			const parsed = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
 			if (BUILD.serializer && BUILD.reflect && cmpMeta.$attrsToReflect$ && cmpMeta.$serializers$?.[propName]) {
 				const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : ref;
 				applySerializers(hostRef, cmpMeta, propName, parsed, BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm);
@@ -4115,7 +4156,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 	const oldVal = hostRef.$instanceValues$.get(propName);
 	const flags = hostRef.$flags$;
 	const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
-	newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0], BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+	newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
 	const didValueChange = newVal !== oldVal && !(Number.isNaN(oldVal) && Number.isNaN(newVal));
 	if ((!BUILD.lazyLoad || !(flags & HOST_FLAGS.isConstructingInstance) || oldVal === void 0) && didValueChange) {
 		hostRef.$instanceValues$.set(propName, newVal);
@@ -4164,6 +4205,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 */
 const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
 /**
+* Hand values written to a lazy component's element before its instance existed to the
+* instance's own `@Prop` setters. Must run as soon as the instance is constructed, so that
+* whenever `$lazyInstance$` is set, reads through it agree with the element's last write.
+*
+* @param hostRef the runtime bookkeeping object of a freshly constructed lazy instance
+* @param cmpMeta runtime metadata for the component (with any run-time only setters flagged)
+*/
+const replayPendingSetterValues = (hostRef, cmpMeta) => {
+	const instance = hostRef.$lazyInstance$;
+	if (!instance) return;
+	for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) if (memberFlags & MEMBER_FLAGS.Setter && hostRef.$instanceValues$.has(memberName)) {
+		const pendingValue = hostRef.$instanceValues$.get(memberName);
+		if (instance[memberName] !== pendingValue) instance[memberName] = pendingValue;
+	}
+};
+/**
 * 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.
@@ -4220,9 +4277,8 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						if (BUILD.lazyLoad) {
 							if ((cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Getter) === 0) return getValue(this, memberName);
 							const ref = getHostRef(this);
-							const instance = ref ? ref.$lazyInstance$ : prototype;
-							if (!instance) return;
-							return instance[memberName];
+							if (!ref) return prototype[memberName];
+							return ref.$lazyInstance$ ? ref.$lazyInstance$[memberName] : getValue(this, memberName);
 						}
 						if (!BUILD.lazyLoad) return origGetter ? origGetter.apply(this) : getValue(this, memberName);
 					},
@@ -4237,7 +4293,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					}
 					if (origSetter) {
 						if (typeof (memberFlags & MEMBER_FLAGS.State ? this[memberName] : ref.$hostElement$[memberName]) === "undefined" && ref.$instanceValues$.get(memberName)) newValue = ref.$instanceValues$.get(memberName);
-						origSetter.apply(this, [parsePropertyValue(newValue, memberFlags, BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated))]);
+						origSetter.apply(this, [parsePropertyValue(newValue, memberFlags)]);
 						newValue = memberFlags & MEMBER_FLAGS.State ? this[memberName] : ref.$hostElement$[memberName];
 						setValue(this, memberName, newValue, cmpMeta);
 						return;
@@ -4249,21 +4305,15 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					if (BUILD.lazyLoad) {
 						if ((flags & PROXY_FLAGS.isElementConstructor) === 0 || (cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Setter) === 0) {
 							setValue(this, memberName, newValue, cmpMeta);
-							if (flags & PROXY_FLAGS.isElementConstructor && !ref.$lazyInstance$) ref.$fetchedCbList$.push(() => {
-								if (cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Setter && ref.$lazyInstance$[memberName] !== ref.$instanceValues$.get(memberName)) ref.$lazyInstance$[memberName] = newValue;
-							});
 							return;
 						}
-						const setterSetVal = () => {
+						const parsedValue = parsePropertyValue(newValue, memberFlags);
+						if (ref.$lazyInstance$) {
 							const currentValue = ref.$lazyInstance$[memberName];
 							if (!ref.$instanceValues$.get(memberName) && currentValue) ref.$instanceValues$.set(memberName, currentValue);
-							ref.$lazyInstance$[memberName] = parsePropertyValue(newValue, memberFlags, BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+							ref.$lazyInstance$[memberName] = parsedValue;
 							setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
-						};
-						if (ref.$lazyInstance$) setterSetVal();
-						else ref.$fetchedCbList$.push(() => {
-							setterSetVal();
-						});
+						} else ref.$instanceValues$.set(memberName, parsedValue);
 					}
 				} });
 			} else if (BUILD.lazyLoad && BUILD.method && flags & PROXY_FLAGS.isElementConstructor && memberFlags & MEMBER_FLAGS.Method) Object.defineProperty(prototype, memberName, { value(...args) {
@@ -4315,7 +4365,10 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					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");
+					if (isBooleanTarget) {
+						if (BUILD.isDev && newValue === "false") consoleDevWarn(`<${cmpMeta.$tagName$} ${attrName}="false">: boolean attributes are true when present, regardless of value. Remove the attribute or set the "${propName}" property to false instead.`);
+						newValue = newValue !== null;
+					}
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
 					if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
 				});
@@ -4378,9 +4431,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 				} catch (e) {
 					consoleError(e, elm);
 				}
-				if (BUILD.member) hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
+				if (BUILD.member) {
+					hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
+					replayPendingSetterValues(hostRef, cmpMeta);
+				}
 				endNewInstance();
-				if (BUILD.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$);
+				if (BUILD.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$, getHostRegistry(elm));
 				if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) {
 					fireConnectedCallback(hostRef.$lazyInstance$, elm);
 					if (BUILD.asyncLoading) markFirstConnected(hostRef);
@@ -4480,9 +4536,16 @@ const connectedCallback = (elm) => {
 			}
 			if (BUILD.asyncLoading) {
 				let ancestorComponent = elm;
-				while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) if (BUILD.hydrateClientSide && ancestorComponent.nodeType === NODE_TYPE.ElementNode && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
-					attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
-					break;
+				while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
+					if (BUILD.hydrateClientSide && !ancestorComponent["s-p"] && ancestorComponent.nodeType === NODE_TYPE.ElementNode && ancestorComponent.hasAttribute("s-id")) {
+						ancestorComponent["s-p"] = [];
+						ancestorComponent["s-rc"] = [];
+						ancestorComponent["s-pc"] = [];
+					}
+					if (ancestorComponent["s-p"]) {
+						attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
+						break;
+					}
 				}
 			}
 			if (BUILD.prop && !BUILD.hydrateServerSide && cmpMeta.$members$) Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
@@ -4598,48 +4661,45 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
 			`${modulePath}?s-hmr=${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));
-			}
-			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) => {
-			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);
-		});
+		if (NewClass) hmrApplyClass(cmpMeta, NewClass);
 	} catch (e) {
 		console.error(`[Stencil HMR] Failed to reload <${cmpMeta.$tagName$}>`, e);
 	}
 };
+/**
+* Patch a re-executed component class onto the registered one and re-render every live instance.
+* Shared by the standalone re-import above and bundlers that re-execute the module themselves
+* (webpack/rspack `module.hot`), which reach it via the constructor's `s-hmr-apply` hook.
+*
+* @param cmpMeta runtime metadata for the component
+* @param NewClass the component's newly executed class
+*/
+const hmrApplyClass = (cmpMeta, NewClass) => {
+	const ctor = customElements.get(cmpMeta.$tagName$);
+	const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
+	if (ctor && ctor !== NewClass) {
+		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) registerStyle(getScopeId(cmpMeta), newStyle, isShadow);
+		}
+	}
+	document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
+		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) attachStyles(hostRef);
+		forceUpdate(el);
+	});
+};
 //#endregion
 //#region src/runtime/bootstrap-standalone.ts
 const defineCustomElement = (Cstr, compactMeta) => {
@@ -4662,9 +4722,12 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 			cmpMeta.$serializers$ = Cstr.$serializers$;
 		}
 		if (BUILD.reflect) cmpMeta.$attrsToReflect$ = [];
-		if (BUILD.hotModuleReplacement) Cstr.prototype["s-hmr"] = function(hmrVersionId) {
-			hmrStart(this, cmpMeta, hmrVersionId);
-		};
+		if (BUILD.hotModuleReplacement) {
+			Cstr.prototype["s-hmr"] = function(hmrVersionId) {
+				hmrStart(this, cmpMeta, hmrVersionId);
+			};
+			Cstr["s-hmr-apply"] = (NewClass) => hmrApplyClass(cmpMeta, NewClass);
+		}
 		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);
@@ -4703,7 +4766,7 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 				}
 				connectedCallback(this);
 				if (BUILD.asyncLoading && hostRef && hostRef.$ancestorComponent$) {
-					await awaitAncestorConnected(hostRef.$ancestorComponent$);
+					await awaitAncestorConnected(hostRef.$ancestorComponent$, getHostRegistry(this));
 					if (!this.isConnected) return;
 				}
 				if (originalConnectedCallback && (plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) originalConnectedCallback.call(this);
@@ -5018,7 +5081,7 @@ function Mixin(...mixins) {
 //#region src/runtime/nonce.ts
 /**
 * Assigns the given value to the nonce property on the runtime platform object.
-* During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+* During runtime, this value is used to set the nonce attribute on all dynamically created style tags.
 * @param nonce The value to be assigned to the platform nonce property.
 * @returns void
 */