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

package/dist/runtime/server/index.mjs

@@ -29,8 +29,7 @@ const LISTENER_FLAGS = {
 	Capture: 2,
 	TargetDocument: 4,
 	TargetWindow: 8,
-	TargetBody: 16,
-	TargetParent: 32
+	TargetBody: 16
 };
 const HOST_FLAGS = {
 	hasConnected: 1,
@@ -66,7 +65,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
@@ -97,38 +101,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
 /**
@@ -284,12 +256,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) shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
 	else if (globalStyles && true) {
@@ -940,6 +914,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 = "") => {
@@ -1096,7 +1088,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;
@@ -1142,7 +1135,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) {
@@ -1177,7 +1171,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");
@@ -1411,7 +1410,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 = [];
@@ -1492,7 +1491,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;
 		}
@@ -1814,9 +1813,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];
@@ -1976,7 +1978,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);
@@ -1985,7 +1987,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];
@@ -2014,7 +2016,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);
@@ -2203,98 +2205,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
-/**
-* 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(atob(value.slice(11))));
-}
-//#endregion
 //#region src/runtime/parse-property-value.ts
 /**
 * Parse a new property value for a given property type.
@@ -2321,14 +2231,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
@@ -2357,9 +2259,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);
@@ -2712,7 +2611,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);
@@ -3062,7 +2964,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);
@@ -3151,7 +3054,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) {
@@ -3306,13 +3209,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));
@@ -3447,14 +3350,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) {
@@ -3465,7 +3368,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);
@@ -3888,7 +3791,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;
@@ -3896,7 +3798,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);
@@ -3935,7 +3838,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));
 		}
@@ -3996,14 +3899,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;
@@ -4019,7 +3926,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);
@@ -4031,8 +3938,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;
 			}
 		});
@@ -4128,7 +4040,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"];
@@ -4155,7 +4067,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);
@@ -4187,14 +4099,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);
@@ -4226,18 +4142,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 {
@@ -4252,7 +4164,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) => (flags & LISTENER_FLAGS.Capture) !== 0;
@@ -4623,7 +4534,7 @@ function hydrateApp(win, opts, results, afterHydrate, resolve) {
 						$flags$: null
 					}, null);
 					if (Cstr != null && Cstr.cmpMeta != null) {
-						if (opts.serializeShadowRoot !== false && !!(Cstr.cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && tagRequiresScoped(elm.tagName, opts.serializeShadowRoot)) {
+						if (opts.serializeShadowRoot !== false && !!(Cstr.cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (tagRequiresScoped(elm.tagName, opts.serializeShadowRoot) || !!(Cstr.cmpMeta.$flags$ & CMP_FLAGS.shadowModeClosed))) {
 							const cmpMeta = Cstr.cmpMeta;
 							cmpMeta.$flags$ |= CMP_FLAGS.shadowNeedsScopedCss;
 							Object.defineProperty(Cstr, "cmpMeta", { get: function() {
@@ -4691,7 +4602,7 @@ async function hydrateComponent(win, results, tagName, elm, waitingElements) {
 			waitingElements.add(elm);
 			const hostRef = getHostRef(this);
 			if (!hostRef) return;
-			addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
+			addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
 			try {
 				connectedCallback(elm);
 				await elm.componentOnReady();

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

@@ -2,22 +2,6 @@ import { Readable } from "node:stream";
 //#region src/server/runner/create-window.d.ts
 declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
 //#endregion
-//#region src/utils/serialize.d.ts
-/**
- * Serialize a value to a string that can be deserialized later.
- * @param {unknown} value - The value to serialize.
- * @returns {string} A string that can be deserialized later.
- * @deprecated will be removed in v5. Use `@PropSerialize()` decorator instead.
- */
-declare function serializeProperty(value: unknown): string | number | boolean;
-/**
- * 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.
- */
-declare function deserializeProperty(value: string): any;
-//#endregion
 //#region src/declarations/stencil-public-runtime.d.ts
 type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 type TagTransformer = (tag: string) => string;
@@ -320,4 +304,4 @@ declare function transformTag<T extends string>(tag: T): T;
  */
 declare function setTagTransformer(transformer: TagTransformer): void;
 //#endregion
-export { createWindowFromHtml, deserializeProperty, hydrateDocument, renderToString, resetHydrateDocData, serializeDocumentToString, serializeProperty, setTagTransformer, streamToString, transformTag };
+export { createWindowFromHtml, hydrateDocument, renderToString, resetHydrateDocData, serializeDocumentToString, setTagTransformer, streamToString, transformTag };