@stencil/core 5.0.0-alpha.2 → 5.0.0-alpha.3

package/dist/runtime/client/index.js

@@ -124,8 +124,7 @@ const LISTENER_FLAGS = {
 	Capture: 2,
 	TargetDocument: 4,
 	TargetWindow: 8,
-	TargetBody: 16,
-	TargetParent: 32
+	TargetBody: 16
 };
 const HOST_FLAGS = {
 	hasConnected: 1,
@@ -161,7 +160,12 @@ const CMP_FLAGS = {
 	shadowNeedsScopedCss: 128,
 	hasSlot: 256,
 	hasModernPropertyDecls: 512,
-	shadowSlotAssignmentManual: 1024
+	shadowSlotAssignmentManual: 1024,
+	shadowModeClosed: 2048,
+	patchChildren: 4096,
+	patchClone: 8192,
+	patchInsert: 16384,
+	patchAll: 32768
 };
 /**
 * Namespaces
@@ -192,38 +196,6 @@ const NODE_TYPES = {
 	DOCUMENT_FRAGMENT_NODE: 11,
 	NOTATION_NODE: 12
 };
-/**
-* Represents a primitive type.
-* Described in https://w3c.github.io/webdriver-bidi/#type-script-PrimitiveProtocolValue.
-*/
-const PrimitiveType = {
-	Undefined: "undefined",
-	Null: "null",
-	String: "string",
-	Number: "number",
-	SpecialNumber: "number",
-	Boolean: "boolean",
-	BigInt: "bigint"
-};
-/**
-* Represents a non-primitive type.
-* Described in https://w3c.github.io/webdriver-bidi/#type-script-RemoteValue.
-* @deprecated will be removed in v5. Use `@AttrDeserialize()` / `@PropDeserialize()` decorators instead.
-*/
-const NonPrimitiveType = {
-	Array: "array",
-	Date: "date",
-	Map: "map",
-	Object: "object",
-	RegularExpression: "regexp",
-	Set: "set",
-	Channel: "channel",
-	Symbol: "symbol"
-};
-/**  @deprecated will be removed in v5. Use `@AttrDeserialize()` / `@PropDeserialize()` decorators instead. */
-const TYPE_CONSTANT = "type";
-/**  @deprecated will be removed in v5. Use `@AttrDeserialize()` / `@PropDeserialize()` decorators instead. */
-const VALUE_CONSTANT = "value";
 //#endregion
 //#region src/utils/get-prop-descriptor.ts
 /**
@@ -376,7 +348,7 @@ const cmpModules = /* @__PURE__ */ new Map();
 * where here in the source code it must be like this, so that an undesirable
 * transformation that Esbuild would otherwise carry out doesn't occur, but we
 * actually need to then manually edit the bundled Esbuild code later on to fix
-* that. We do this with plugins in the Esbuild and Rollup bundles which
+* that. We do this with plugins in the Esbuild and Rolldown bundles which
 * include this file.
 */
 const MODULE_IMPORT_PREFIX = "./";
@@ -588,12 +560,14 @@ function createStyleSheetIfNeededAndSupported(styles) {
 let globalStyleSheet;
 const GLOBAL_STYLE_ID = "sc-global";
 function createShadowRoot(cmpMeta) {
-	const opts = { mode: "open" };
+	const isClosed = BUILD$1.shadowModeClosed && !!(cmpMeta.$flags$ & CMP_FLAGS.shadowModeClosed);
+	const opts = { mode: isClosed ? "closed" : "open" };
 	if (BUILD$1.shadowDelegatesFocus) opts.delegatesFocus = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDelegatesFocus);
 	if (BUILD$1.shadowSlotAssignmentManual) {
 		if (!!(cmpMeta.$flags$ & CMP_FLAGS.shadowSlotAssignmentManual)) opts.slotAssignment = "manual";
 	}
 	const shadowRoot = this.attachShadow(opts);
+	if (BUILD$1.shadowModeClosed && isClosed) this.__shadowRoot = shadowRoot;
 	if (globalStyleSheet === void 0) globalStyleSheet = createStyleSheetIfNeededAndSupported(globalStyles) ?? null;
 	if (globalStyleSheet) if (supportsMutableAdoptedStyleSheets) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
 	else shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
@@ -1245,6 +1219,24 @@ function internalCall(node, method) {
 	}
 }
 //#endregion
+//#region src/runtime/element.ts
+const getElement = (ref) => BUILD$1.lazyLoad ? getHostRef(ref)?.$hostElement$ : ref;
+/**
+* Get the shadow root for a Stencil component's host element.
+* This works for both open and closed shadow DOM modes.
+*
+* For closed shadow DOM, `element.shadowRoot` returns `null` by design,
+* but Stencil stores the reference internally so components can still
+* access their own shadow root.
+*
+* @param element The host element (from @Element() decorator)
+* @returns The shadow root, or null if no shadow root exists
+*/
+const getShadowRoot = (element) => {
+	if (BUILD$1.shadowModeClosed && element.__shadowRoot) return element.__shadowRoot;
+	return element.shadowRoot;
+};
+//#endregion
 //#region src/runtime/profile.ts
 let i = 0;
 const createTime = (fnName, tagName = "") => {
@@ -1421,7 +1413,8 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
 	if (!BUILD$1.attachStyles || !win.document) return scopeId;
 	let style = styles.get(scopeId);
 	if (cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation) style = getStyleWithSlotCss(style);
-	styleContainerNode = styleContainerNode.nodeType === NODE_TYPE.DocumentFragment ? styleContainerNode : win.document;
+	const isClosedShadowSSR = BUILD$1.hydrateServerSide && BUILD$1.shadowModeClosed && cmpMeta.$flags$ & CMP_FLAGS.shadowNeedsScopedCss && cmpMeta.$flags$ & CMP_FLAGS.shadowModeClosed;
+	if (styleContainerNode.nodeType !== NODE_TYPE.DocumentFragment && !isClosedShadowSSR) styleContainerNode = win.document;
 	if (style) {
 		if (typeof style === "string") {
 			styleContainerNode = styleContainerNode.head || styleContainerNode;
@@ -1471,7 +1464,8 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
 				/**
 				* attach styles at the beginning of a shadow root node if we render shadow components
 				*/
-				if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) 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) {
@@ -1506,7 +1500,12 @@ const attachStyles = (hostRef) => {
 	const elm = hostRef.$hostElement$;
 	const flags = cmpMeta.$flags$;
 	const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-	const scopeId = addStyle(BUILD$1.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$);
+	let styleContainerNode;
+	const shadowRoot = BUILD$1.shadowDom && supportsShadow ? getShadowRoot(elm) : null;
+	if (shadowRoot) styleContainerNode = shadowRoot;
+	else if (BUILD$1.hydrateServerSide && BUILD$1.shadowModeClosed && flags & CMP_FLAGS.shadowNeedsScopedCss && flags & CMP_FLAGS.shadowModeClosed) styleContainerNode = elm;
+	else styleContainerNode = elm.getRootNode();
+	const scopeId = addStyle(styleContainerNode, cmpMeta, hostRef.$modeName$);
 	if ((BUILD$1.shadowDom || BUILD$1.scoped) && BUILD$1.cssAnnotations && flags & CMP_FLAGS.needsScopedEncapsulation) {
 		elm["s-sc"] = scopeId;
 		elm.classList.add(scopeId + "-h");
@@ -1744,7 +1743,7 @@ const validateInputProperties = (inputElm) => {
 */
 const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
 	const endHydrate = createTime("hydrateClient", tagName);
-	const shadowRoot = hostElm.shadowRoot;
+	const shadowRoot = getShadowRoot(hostElm);
 	const childRenderNodes = [];
 	const slotNodes = [];
 	const slottedNodes = [];
@@ -1825,7 +1824,7 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
 				}
 				addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"] || currentPos);
 				if (slottedItem.node.parentElement?.shadowRoot && slottedItem.node["getAttribute"] && slottedItem.node.getAttribute("slot")) slottedItem.node.removeAttribute("slot");
-				if (BUILD$1.experimentalSlotFixes) patchSlottedNode(slottedItem.node);
+				if (BUILD$1.experimentalSlotFixes || BUILD$1.patchAll && hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll) patchSlottedNode(slottedItem.node);
 			}
 			currentPos = (slottedItem.node["s-oo"] || currentPos) + 1;
 		}
@@ -2147,9 +2146,12 @@ const _polyfillHost = "-shadowcsshost";
 const _polyfillSlotted = "-shadowcssslotted";
 const _polyfillHostContext = "-shadowcsscontext";
 const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
-const _cssColonHostRe = new RegExp("(" + _polyfillHost + _parenSuffix, "gim");
-const _cssColonHostContextRe = new RegExp("(" + _polyfillHostContext + _parenSuffix, "gim");
-const _cssColonSlottedRe = new RegExp("(" + _polyfillSlotted + _parenSuffix, "gim");
+let _cssColonHostRe;
+let _cssColonHostContextRe;
+let _cssColonSlottedRe;
+const getCssColonHostRe = () => _cssColonHostRe ??= new RegExp("(" + _polyfillHost + _parenSuffix, "gim");
+const getCssColonHostContextRe = () => _cssColonHostContextRe ??= new RegExp("(" + _polyfillHostContext + _parenSuffix, "gim");
+const getCssColonSlottedRe = () => _cssColonSlottedRe ??= new RegExp("(" + _polyfillSlotted + _parenSuffix, "gim");
 const _polyfillHostNoCombinator = _polyfillHost + "-no-combinator";
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
@@ -2309,7 +2311,7 @@ const colonHostPartReplacer = (host, part, suffix) => {
 	return host + part.replace(_polyfillHost, "") + suffix;
 };
 const convertColonHost = (cssText) => {
-	return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
+	return convertColonRule(cssText, getCssColonHostRe(), colonHostPartReplacer);
 };
 const colonHostContextPartReplacer = (host, part, suffix) => {
 	if (part.indexOf(_polyfillHost) > -1) return colonHostPartReplacer(host, part, suffix);
@@ -2318,7 +2320,7 @@ const colonHostContextPartReplacer = (host, part, suffix) => {
 const convertColonSlotted = (cssText, slotScopeId) => {
 	const slotClass = "." + slotScopeId + " > ";
 	const selectors = [];
-	cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
+	cssText = cssText.replace(getCssColonSlottedRe(), (...m) => {
 		if (m[2]) {
 			const compound = m[2].trim();
 			const suffix = m[3];
@@ -2347,7 +2349,7 @@ const convertColonSlotted = (cssText, slotScopeId) => {
 	};
 };
 const convertColonHostContext = (cssText) => {
-	return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
+	return convertColonRule(cssText, getCssColonHostContextRe(), colonHostContextPartReplacer);
 };
 const convertShadowDOMSelectors = (cssText) => {
 	return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, " "), cssText);
@@ -2536,111 +2538,6 @@ const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) =>
 const setMode = (handler) => modeResolutionChain.push(handler);
 const getMode = (ref) => getHostRef(ref)?.$modeName$;
 //#endregion
-//#region src/utils/remote-value.ts
-/**
-* RemoteValue class for deserializing LocalValue serialized objects back into their original form
-* @deprecated will be removed in v5. Use `@AttrDeserialize()` / `@PropDeserialize()` decorators instead.
-*/
-var RemoteValue = class RemoteValue {
-	/**
-	* Deserializes a LocalValue serialized object back to its original JavaScript representation
-	*
-	* @param serialized The serialized LocalValue object
-	* @returns The original JavaScript value/object
-	*/
-	static fromLocalValue(serialized) {
-		const type = serialized[TYPE_CONSTANT];
-		const value = "value" in serialized ? serialized[VALUE_CONSTANT] : void 0;
-		switch (type) {
-			case PrimitiveType.String: return value;
-			case PrimitiveType.Boolean: return value;
-			case PrimitiveType.BigInt: return BigInt(value);
-			case PrimitiveType.Undefined: return;
-			case PrimitiveType.Null: return null;
-			case PrimitiveType.Number:
-				if (value === "NaN") return NaN;
-				if (value === "-0") return -0;
-				if (value === "Infinity") return Infinity;
-				if (value === "-Infinity") return -Infinity;
-				return value;
-			case NonPrimitiveType.Array: return value.map((item) => RemoteValue.fromLocalValue(item));
-			case NonPrimitiveType.Date: return new Date(value);
-			case NonPrimitiveType.Map:
-				const map = /* @__PURE__ */ new Map();
-				for (const [key, val] of value) {
-					const deserializedKey = typeof key === "object" && key !== null ? RemoteValue.fromLocalValue(key) : key;
-					const deserializedValue = RemoteValue.fromLocalValue(val);
-					map.set(deserializedKey, deserializedValue);
-				}
-				return map;
-			case NonPrimitiveType.Object:
-				const obj = {};
-				for (const [key, val] of value) obj[key] = RemoteValue.fromLocalValue(val);
-				return obj;
-			case NonPrimitiveType.RegularExpression:
-				const { pattern, flags } = value;
-				return new RegExp(pattern, flags);
-			case NonPrimitiveType.Set:
-				const set = /* @__PURE__ */ new Set();
-				for (const item of value) set.add(RemoteValue.fromLocalValue(item));
-				return set;
-			case NonPrimitiveType.Symbol: return Symbol(value);
-			default: throw new Error(`Unsupported type: ${type}`);
-		}
-	}
-	/**
-	* Utility method to deserialize multiple LocalValues at once
-	*
-	* @param serializedValues Array of serialized LocalValue objects
-	* @returns Array of deserialized JavaScript values
-	*/
-	static fromLocalValueArray(serializedValues) {
-		return serializedValues.map((value) => RemoteValue.fromLocalValue(value));
-	}
-	/**
-	* Verifies if the given object matches the structure of a serialized LocalValue
-	*
-	* @param obj Object to verify
-	* @returns boolean indicating if the object has LocalValue structure
-	*/
-	static isLocalValueObject(obj) {
-		if (typeof obj !== "object" || obj === null) return false;
-		if (!obj.hasOwnProperty("type")) return false;
-		const type = obj[TYPE_CONSTANT];
-		if (!Object.values({
-			...PrimitiveType,
-			...NonPrimitiveType
-		}).includes(type)) return false;
-		if (type !== PrimitiveType.Null && type !== PrimitiveType.Undefined) return obj.hasOwnProperty(VALUE_CONSTANT);
-		return true;
-	}
-};
-//#endregion
-//#region src/utils/serialize.ts
-/**
-* Unicode-safe base64 decoding that handles characters outside Latin1 range.
-* Unlike atob(), this properly decodes Unicode characters including emoji,
-* CJK characters, and currency symbols like €.
-* @param {string} base64 - The base64 string to decode.
-* @returns {string} Decoded string.
-*/
-function decodeBase64Unicode(base64) {
-	const binary = atob(base64);
-	const bytes = new Uint8Array(binary.length);
-	for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-	return new TextDecoder().decode(bytes);
-}
-/**
-* Deserialize a value from a string that was serialized earlier.
-* @param {string} value - The string to deserialize.
-* @returns {unknown} The deserialized value.
-* @deprecated will be removed in v5. Use `@AttrDeserialize()` decorator instead.
-*/
-function deserializeProperty(value) {
-	if (typeof value !== "string" || !value.startsWith("serialized:")) return value;
-	return RemoteValue.fromLocalValue(JSON.parse(decodeBase64Unicode(value.slice(11))));
-}
-//#endregion
 //#region src/runtime/parse-property-value.ts
 /**
 * Parse a new property value for a given property type.
@@ -2667,14 +2564,6 @@ function deserializeProperty(value) {
 * @returns the parsed/coerced value
 */
 const parsePropertyValue = (propValue, propType, isFormAssociated) => {
-	/**
-	* Allow hydrate parameters that contain a complex non-serialized values.
-	* This is SSR-specific and should only run during hydration.
-	*/
-	if ((BUILD$1.hydrateClientSide || BUILD$1.hydrateServerSide) && typeof propValue === "string" && propValue.startsWith("serialized:")) {
-		propValue = deserializeProperty(propValue);
-		return propValue;
-	}
 	if (propValue != null && !isComplexType(propValue)) {
 		/**
 		* ensure this value is of the correct prop type
@@ -2703,9 +2592,6 @@ const parsePropertyValue = (propValue, propType, isFormAssociated) => {
 	return propValue;
 };
 //#endregion
-//#region src/runtime/element.ts
-const getElement = (ref) => BUILD$1.lazyLoad ? getHostRef(ref)?.$hostElement$ : ref;
-//#endregion
 //#region src/runtime/event-emitter.ts
 const createEvent = (ref, name, flags) => {
 	const elm = getElement(ref);
@@ -3058,7 +2944,10 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
 	let containerElm = BUILD$1.slotRelocation && parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
 	let childNode;
-	if (BUILD$1.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) containerElm = containerElm.shadowRoot;
+	if (BUILD$1.shadowDom && containerElm.tagName === hostTagName) {
+		const shadow = getShadowRoot(containerElm);
+		if (shadow) containerElm = shadow;
+	}
 	if (parentVNode.$tag$ === "template") containerElm = containerElm.content;
 	for (; startIdx <= endIdx; ++startIdx) if (vnodes[startIdx]) {
 		childNode = createElm(null, parentVNode, startIdx);
@@ -3408,7 +3297,8 @@ const insertBefore = (parent, newNode, reference, isInitialLoad) => {
 	if (BUILD$1.slotRelocation) {
 		if (BUILD$1.scoped && typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
 		else if (typeof newNode["s-sn"] === "string") {
-			if (BUILD$1.experimentalSlotFixes && parent.getRootNode().nodeType !== NODE_TYPES.DOCUMENT_FRAGMENT_NODE) patchParentNode(newNode);
+			const hostElm = newNode["s-hn"] && parent.closest?.(newNode["s-hn"]);
+			if ((BUILD$1.experimentalSlotFixes || BUILD$1.patchAll && !!(hostElm && getHostRef(hostElm)?.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll)) && parent.getRootNode().nodeType !== NODE_TYPES.DOCUMENT_FRAGMENT_NODE) patchParentNode(newNode);
 			parent.insertBefore(newNode, reference);
 			const { slotNode } = findSlotFromSlottedNode(newNode);
 			if (slotNode && !isInitialLoad) dispatchSlotChangeEvent(slotNode);
@@ -3497,7 +3387,7 @@ render() {
 	rootVnode.$tag$ = null;
 	rootVnode.$flags$ |= VNODE_FLAGS.isHost;
 	hostRef.$vnode$ = rootVnode;
-	rootVnode.$elm$ = oldVNode.$elm$ = BUILD$1.shadowDom ? hostElm.shadowRoot || hostElm : hostElm;
+	rootVnode.$elm$ = oldVNode.$elm$ = BUILD$1.shadowDom ? getShadowRoot(hostElm) || hostElm : hostElm;
 	if (BUILD$1.scoped || BUILD$1.shadowDom) scopeId = hostElm["s-sc"];
 	useNativeShadowDom = supportsShadow && !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && !(cmpMeta.$flags$ & CMP_FLAGS.shadowNeedsScopedCss);
 	if (BUILD$1.slotRelocation) {
@@ -3652,13 +3542,13 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
 			}
 			if (hostRef.$fetchedCbList$.length) hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
 		}
-		emitLifecycleEvent(elm, "componentWillLoad");
+		if (BUILD$1.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillLoad");
 		maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
 	} else {
-		emitLifecycleEvent(elm, "componentWillUpdate");
+		if (BUILD$1.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillUpdate");
 		maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
 	}
-	emitLifecycleEvent(elm, "componentWillRender");
+	if (BUILD$1.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillRender");
 	maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender", void 0, elm));
 	endSchedule();
 	return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
@@ -3793,14 +3683,14 @@ const postUpdateComponent = (hostRef) => {
 	if (BUILD$1.isDev) hostRef.$flags$ |= HOST_FLAGS.devOnRender;
 	safeCall(instance, "componentDidRender", void 0, elm);
 	if (BUILD$1.isDev) hostRef.$flags$ &= ~HOST_FLAGS.devOnRender;
-	emitLifecycleEvent(elm, "componentDidRender");
+	if (BUILD$1.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentDidRender");
 	if (!(hostRef.$flags$ & HOST_FLAGS.hasLoadedComponent)) {
 		hostRef.$flags$ |= HOST_FLAGS.hasLoadedComponent;
 		if (BUILD$1.asyncLoading && BUILD$1.cssAnnotations) addHydratedFlag(elm);
 		if (BUILD$1.isDev) hostRef.$flags$ |= HOST_FLAGS.devOnDidLoad;
 		safeCall(instance, "componentDidLoad", void 0, elm);
 		if (BUILD$1.isDev) hostRef.$flags$ &= ~HOST_FLAGS.devOnDidLoad;
-		emitLifecycleEvent(elm, "componentDidLoad");
+		if (BUILD$1.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentDidLoad");
 		if (BUILD$1.propChangeCallback) hostRef.$flags$ |= HOST_FLAGS.isWatchReady;
 		endPostUpdate();
 		if (BUILD$1.asyncLoading) {
@@ -3811,7 +3701,7 @@ const postUpdateComponent = (hostRef) => {
 		if (BUILD$1.isDev) hostRef.$flags$ |= HOST_FLAGS.devOnRender;
 		safeCall(instance, "componentDidUpdate", void 0, elm);
 		if (BUILD$1.isDev) hostRef.$flags$ &= ~HOST_FLAGS.devOnRender;
-		emitLifecycleEvent(elm, "componentDidUpdate");
+		if (BUILD$1.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentDidUpdate");
 		endPostUpdate();
 	}
 	if (BUILD$1.method && BUILD$1.lazyLoad) hostRef.$onInstanceResolve$(elm);
@@ -4234,7 +4124,6 @@ const connectedCallback = (elm) => {
 		if (!hostRef) return;
 		const cmpMeta = hostRef.$cmpMeta$;
 		const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
-		if (BUILD$1.hostListenerTargetParent) addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
 		if (!(hostRef.$flags$ & HOST_FLAGS.hasConnected)) {
 			hostRef.$flags$ |= HOST_FLAGS.hasConnected;
 			let hostId;
@@ -4242,7 +4131,8 @@ const connectedCallback = (elm) => {
 				hostId = elm.getAttribute(HYDRATE_ID);
 				if (hostId) {
 					if (BUILD$1.shadowDom && supportsShadow && cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) {
-						const scopeId = BUILD$1.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(elm.shadowRoot, cmpMeta);
+						const shadowRoot = getShadowRoot(elm);
+						const scopeId = BUILD$1.mode ? addStyle(shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(shadowRoot, cmpMeta);
 						elm.classList.remove(scopeId + "-h", scopeId + "-s");
 					} else if (BUILD$1.scoped && cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation) elm["s-sc"] = getScopeId(cmpMeta, BUILD$1.mode ? elm.getAttribute("s-mode") : void 0);
 					initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
@@ -4281,7 +4171,7 @@ const connectedCallback = (elm) => {
 			if (BUILD$1.initializeNextTick) nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
 			else initializeComponent(elm, hostRef, cmpMeta);
 		} else {
-			addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
+			addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
 			if (hostRef?.$lazyInstance$) fireConnectedCallback(hostRef.$lazyInstance$, elm);
 			else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$, elm));
 		}
@@ -4342,14 +4232,18 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 		}
 		if (BUILD$1.reflect) cmpMeta.$attrsToReflect$ = [];
 		if (BUILD$1.shadowDom && !supportsShadow && cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) cmpMeta.$flags$ |= CMP_FLAGS.needsShadowDomShim;
-		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD$1.experimentalSlotFixes) patchPseudoShadowDom(Cstr.prototype);
+		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD$1.experimentalSlotFixes || BUILD$1.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) patchPseudoShadowDom(Cstr.prototype);
 		else {
-			if (BUILD$1.slotChildNodesFix) patchChildSlotNodes(Cstr.prototype);
-			if (BUILD$1.cloneNodeFix) patchCloneNode(Cstr.prototype);
-			if (BUILD$1.appendChildSlotFix) patchSlotAppendChild(Cstr.prototype);
+			if (BUILD$1.slotChildNodesFix || BUILD$1.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(Cstr.prototype);
+			if (BUILD$1.cloneNodeFix || BUILD$1.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone) patchCloneNode(Cstr.prototype);
+			if (BUILD$1.appendChildSlotFix || BUILD$1.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
+				patchSlotAppendChild(Cstr.prototype);
+				patchInsertBefore(Cstr.prototype);
+				patchSlotRemoveChild(Cstr.prototype);
+			}
 			if (BUILD$1.scopedSlotTextContentFix && cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation) patchTextContent(Cstr.prototype);
 		}
-		else if (BUILD$1.cloneNodeFix) patchCloneNode(Cstr.prototype);
+		else if (BUILD$1.cloneNodeFix || BUILD$1.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone) patchCloneNode(Cstr.prototype);
 		if (BUILD$1.hydrateClientSide && BUILD$1.shadowDom) hydrateScopedToShadow();
 		const originalConnectedCallback = Cstr.prototype.connectedCallback;
 		const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
@@ -4365,7 +4259,7 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 				if (!this.__hasHostListenerAttached) {
 					const hostRef = getHostRef(this);
 					if (!hostRef) return;
-					addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
+					addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
 					this.__hasHostListenerAttached = true;
 				}
 				connectedCallback(this);
@@ -4377,8 +4271,13 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 			},
 			__attachShadow() {
 				if (supportsShadow) {
-					if (!this.shadowRoot) createShadowRoot.call(this, cmpMeta);
-					else if (this.shadowRoot.mode !== "open") throw new Error(`Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`);
+					const isClosed = BUILD$1.shadowModeClosed && !!(cmpMeta.$flags$ & CMP_FLAGS.shadowModeClosed);
+					let existingRoot = this.shadowRoot;
+					if (BUILD$1.shadowModeClosed && isClosed) existingRoot = this.__shadowRoot ?? null;
+					if (!existingRoot) createShadowRoot.call(this, cmpMeta);
+					else if (BUILD$1.shadowModeClosed && isClosed) {
+						if (existingRoot.mode !== "closed") throw new Error(`Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${existingRoot.mode} but expected closed.`);
+					}
 				} else this.shadowRoot = this;
 			}
 		});
@@ -4474,7 +4373,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 				cmpMeta.$deserializers$ = compactMeta[6] ?? {};
 			}
 			if (BUILD$1.shadowDom && !supportsShadow && cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) cmpMeta.$flags$ |= CMP_FLAGS.needsShadowDomShim;
-			const tagName = BUILD$1.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : transformTag(cmpMeta.$tagName$);
+			const tagName = transformTag(cmpMeta.$tagName$);
 			const HostElement = class extends HTMLElement {
 				["s-p"];
 				["s-rc"];
@@ -4501,7 +4400,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 					*/
 					if (!this.hasRegisteredEventListeners) {
 						this.hasRegisteredEventListeners = true;
-						addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
+						addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
 					}
 					if (appLoadFallback) {
 						clearTimeout(appLoadFallback);
@@ -4533,14 +4432,18 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 					return getHostRef(this)?.$onReadyPromise$;
 				}
 			};
-			if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD$1.experimentalSlotFixes) patchPseudoShadowDom(HostElement.prototype);
+			if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD$1.experimentalSlotFixes || BUILD$1.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) patchPseudoShadowDom(HostElement.prototype);
 			else {
-				if (BUILD$1.slotChildNodesFix) patchChildSlotNodes(HostElement.prototype);
-				if (BUILD$1.cloneNodeFix) patchCloneNode(HostElement.prototype);
-				if (BUILD$1.appendChildSlotFix) patchSlotAppendChild(HostElement.prototype);
+				if (BUILD$1.slotChildNodesFix || BUILD$1.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(HostElement.prototype);
+				if (BUILD$1.cloneNodeFix || BUILD$1.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone) patchCloneNode(HostElement.prototype);
+				if (BUILD$1.appendChildSlotFix || BUILD$1.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
+					patchSlotAppendChild(HostElement.prototype);
+					patchInsertBefore(HostElement.prototype);
+					patchSlotRemoveChild(HostElement.prototype);
+				}
 				if (BUILD$1.scopedSlotTextContentFix && cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation) patchTextContent(HostElement.prototype);
 			}
-			else if (BUILD$1.cloneNodeFix) patchCloneNode(HostElement.prototype);
+			else if (BUILD$1.cloneNodeFix || BUILD$1.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone) patchCloneNode(HostElement.prototype);
 			if (BUILD$1.formAssociated && cmpMeta.$flags$ & CMP_FLAGS.formAssociated) HostElement.formAssociated = true;
 			if (BUILD$1.hotModuleReplacement) HostElement.prototype["s-hmr"] = function(hmrVersionId) {
 				hmrStart(this, cmpMeta, hmrVersionId);
@@ -4572,18 +4475,14 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 const Fragment = (_, children) => children;
 //#endregion
 //#region src/runtime/host-listener.ts
-const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-	if (BUILD$1.hostListener && listeners && win.document) {
-		if (BUILD$1.hostListenerTargetParent) if (attachParentListeners) listeners = listeners.filter(([flags]) => flags & LISTENER_FLAGS.TargetParent);
-		else listeners = listeners.filter(([flags]) => !(flags & LISTENER_FLAGS.TargetParent));
-		listeners.map(([flags, name, method]) => {
-			const target = BUILD$1.hostListenerTarget ? getHostListenerTarget(win.document, elm, flags) : elm;
-			const handler = hostListenerProxy(hostRef, method);
-			const opts = hostListenerOpts(flags);
-			plt.ael(target, name, handler, opts);
-			(hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
-		});
-	}
+const addHostEventListeners = (elm, hostRef, listeners) => {
+	if (BUILD$1.hostListener && listeners && win.document) listeners.map(([flags, name, method]) => {
+		const target = BUILD$1.hostListenerTarget ? getHostListenerTarget(win.document, elm, flags) : elm;
+		const handler = hostListenerProxy(hostRef, method);
+		const opts = hostListenerOpts(flags);
+		plt.ael(target, name, handler, opts);
+		(hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+	});
 };
 const hostListenerProxy = (hostRef, methodName) => (ev) => {
 	try {
@@ -4598,7 +4497,6 @@ const getHostListenerTarget = (doc, elm, flags) => {
 	if (BUILD$1.hostListenerTargetDocument && flags & LISTENER_FLAGS.TargetDocument) return doc;
 	if (BUILD$1.hostListenerTargetWindow && flags & LISTENER_FLAGS.TargetWindow) return win;
 	if (BUILD$1.hostListenerTargetBody && flags & LISTENER_FLAGS.TargetBody) return doc.body;
-	if (BUILD$1.hostListenerTargetParent && flags & LISTENER_FLAGS.TargetParent && elm.parentElement) return elm.parentElement;
 	return elm;
 };
 const hostListenerOpts = (flags) => supportsListenerOptions ? {
@@ -4876,4 +4774,4 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
 	}
 };
 //#endregion
-export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, renderVdom, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setScopedSSR, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, supportsShadow, transformTag, win, writeTask };
+export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, HYDRATED_STYLE_ID, Host, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, renderVdom, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setScopedSSR, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, supportsShadow, transformTag, win, writeTask };

package/dist/runtime/index.d.ts

@@ -1,5 +1,5 @@
-import { _ as ResolutionHandler, a as ComponentRuntimeMeta, c as HostRef, d as RenderNode, f as RuntimeRef, g as JSXBase, h as HTMLStencilElement, i as ComponentRuntimeHostListener, l as LazyBundlesRuntimeData, n as ChildType, o as ComponentRuntimeMetaCompact, p as CustomElementsDefineOptions, r as ComponentConstructor, s as HostElement, u as PlatformRuntime, v as TagTransformer, y as VNode } from "../index-BONzXKJt.js";
-import { n as jsxs, r as Fragment, t as jsx } from "../jsx-runtime-DBzBJLKk.js";
+import { _ as ResolutionHandler, a as ComponentRuntimeMeta, c as HostRef, d as RenderNode, f as RuntimeRef, g as JSXBase, h as HTMLStencilElement, i as ComponentRuntimeHostListener, l as LazyBundlesRuntimeData, n as ChildType, o as ComponentRuntimeMetaCompact, p as CustomElementsDefineOptions, r as ComponentConstructor, s as HostElement, u as PlatformRuntime, v as TagTransformer, y as VNode } from "../index-CyrGY82h.js";
+import { n as jsxs, r as Fragment, t as jsx } from "../jsx-runtime-DlDkTqps.js";
 
 //#region src/runtime/asset-path.d.ts
 declare const getAssetPath: (path: string) => string;
@@ -21,6 +21,18 @@ declare const disconnectedCallback: (elm: HostElement) => Promise<void>;
 //#endregion
 //#region src/runtime/element.d.ts
 declare const getElement: (ref: any) => HostElement;
+/**
+ * Get the shadow root for a Stencil component's host element.
+ * This works for both open and closed shadow DOM modes.
+ *
+ * For closed shadow DOM, `element.shadowRoot` returns `null` by design,
+ * but Stencil stores the reference internally so components can still
+ * access their own shadow root.
+ *
+ * @param element The host element (from @Element() decorator)
+ * @returns The shadow root, or null if no shadow root exists
+ */
+declare const getShadowRoot: (element: HTMLElement) => ShadowRoot | null;
 //#endregion
 //#region src/runtime/event-emitter.d.ts
 declare const createEvent: (ref: RuntimeRef, name: string, flags: number) => {
@@ -28,7 +40,7 @@ declare const createEvent: (ref: RuntimeRef, name: string, flags: number) => {
 };
 //#endregion
 //#region src/runtime/host-listener.d.ts
-declare const addHostEventListeners: (elm: HostElement, hostRef: HostRef, listeners?: ComponentRuntimeHostListener[], attachParentListeners?: boolean) => void;
+declare const addHostEventListeners: (elm: HostElement, hostRef: HostRef, listeners?: ComponentRuntimeHostListener[]) => void;
 //#endregion
 //#region src/runtime/mixin.d.ts
 type Ctor<T = {}> = new (...args: any[]) => T;
@@ -179,4 +191,4 @@ declare const insertVdomAnnotations: (doc: Document, staticComponents: string[])
  */
 declare const renderVdom: (hostRef: HostRef, renderFnResults: VNode | VNode[], isInitialLoad?: boolean) => void;
 //#endregion
-export { Fragment, type HTMLStencilElement, HYDRATED_STYLE_ID, Host, type JSXBase, Mixin, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, jsx, jsxs, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, renderVdom, setAssetPath, setMode, setNonce, setPlatformOptions, setTagTransformer, setValue, transformTag };
+export { Fragment, type HTMLStencilElement, HYDRATED_STYLE_ID, Host, type JSXBase, Mixin, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, jsx, jsxs, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, renderVdom, setAssetPath, setMode, setNonce, setPlatformOptions, setTagTransformer, setValue, transformTag };

package/dist/runtime/index.js

@@ -1,2 +1,2 @@
-import { A as Host, C as postUpdateComponent, D as parsePropertyValue, E as getElement, M as getAssetPath, N as setAssetPath, O as getMode, P as HYDRATED_STYLE_ID, S as getRenderingRef, T as createEvent, _ as connectedCallback, a as transformTag, b as setValue, c as setNonce, d as Fragment, f as bootstrapLazy, g as disconnectedCallback, h as proxyCustomElement, i as setTagTransformer, j as h, k as setMode, l as Mixin, m as forceModeUpdate, n as jsx, o as render, p as defineCustomElement, r as jsxs, s as setPlatformOptions, t as insertVdomAnnotations, u as addHostEventListeners, v as proxyComponent, w as renderVdom, x as forceUpdate, y as getValue } from "../runtime-CqlPYKjW.js";
-export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, jsx, jsxs, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, renderVdom, setAssetPath, setMode, setNonce, setPlatformOptions, setTagTransformer, setValue, transformTag };
+import { A as h, C as postUpdateComponent, D as getMode, E as parsePropertyValue, F as HYDRATED_STYLE_ID, M as getShadowRoot, N as getAssetPath, O as setMode, P as setAssetPath, S as getRenderingRef, T as createEvent, _ as connectedCallback, a as transformTag, b as setValue, c as setNonce, d as Fragment, f as bootstrapLazy, g as disconnectedCallback, h as proxyCustomElement, i as setTagTransformer, j as getElement, k as Host, l as Mixin, m as forceModeUpdate, n as jsx, o as render, p as defineCustomElement, r as jsxs, s as setPlatformOptions, t as insertVdomAnnotations, u as addHostEventListeners, v as proxyComponent, w as renderVdom, x as forceUpdate, y as getValue } from "../runtime-BBCnuprF.js";
+export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, getValue, h, insertVdomAnnotations, jsx, jsxs, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, renderVdom, setAssetPath, setMode, setNonce, setPlatformOptions, setTagTransformer, setValue, transformTag };

package/dist/runtime/server/index.d.mts

@@ -139,8 +139,6 @@ interface VNode {
 interface CustomElementsDefineOptions {
   exclude?: string[];
   syncQueue?: boolean;
-  /** @deprecated in-favour of `setTagTransformer` and `transformTag` */
-  transformTagName?: (tagName: string) => string;
   jmp?: (c: Function) => any;
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
@@ -963,7 +961,7 @@ declare const createEvent: (ref: RuntimeRef, name: string, flags: number) => {
 declare const Fragment: FunctionalComponent;
 //#endregion
 //#region src/runtime/host-listener.d.ts
-declare const addHostEventListeners: (elm: HostElement, hostRef: HostRef, listeners?: ComponentRuntimeHostListener[], attachParentListeners?: boolean) => void;
+declare const addHostEventListeners: (elm: HostElement, hostRef: HostRef, listeners?: ComponentRuntimeHostListener[]) => void;
 //#endregion
 //#region src/runtime/mixin.d.ts
 type Ctor<T = {}> = new (...args: any[]) => T;