@stencil/core 5.0.0-beta.0 → 5.0.0-beta.2

package/dist/declarations/stencil-public-compiler.d.ts

@@ -1650,6 +1650,12 @@ interface TransformCssToEsmOutput {
     varName: string;
     importPath: string;
   }[];
+  /**
+   * Whether `output` itself has an observable side effect (a plain, untagged CSS file's
+   * generated module self-injects CSSStyleSheets; a Stencil component's tagged `styleUrl`
+   * output doesn't)
+   */
+  moduleSideEffects?: boolean;
 }
 interface PackageJsonData {
   name?: string;
@@ -1845,10 +1851,19 @@ interface StencilConfig {
    */
   rolldownConfig?: RolldownConfig;
   /**
-   * Sets if the JS browser files are minified or not. Stencil uses `terser` under the hood.
+   * Sets if the JS browser files are minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
    */
   minifyJs?: boolean;
+  /**
+   * Which minifier to use for JS output when `minifyJs` is enabled.
+   *
+   * - `oxc`: built into rolldown. Much faster than terser. Output may be slightly larger.
+   * - `terser`: slower, but currently produces the smallest output.
+   *
+   * Defaults to `oxc`.
+   */
+  jsMinifier?: 'terser' | 'oxc';
   /**
    * Sets if the CSS is minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
@@ -2194,7 +2209,7 @@ type RequireFields<T, K extends keyof T> = T & { [P in K]-?: T[P]; };
 /**
  * Fields in {@link Config} to make required for {@link ValidatedConfig}
  */
-type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
+type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'jsMinifier' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
 /**
  * A version of {@link Config} that makes certain fields required. This type represents a valid configuration entity.
  * When a configuration is received by the user, it is a bag of unverified data. In order to make stricter guarantees
@@ -4457,7 +4472,7 @@ type BuildOverrideKeys = 'hotModuleReplacement' | 'signalBacking' | 'vdomSignals
  * and types stay in sync with the authoritative definition.
  */
 type BuildOverrides = Pick<BuildConditionals, BuildOverrideKeys>;
-type CompileTarget = 'latest' | 'esnext' | 'es2020' | 'es2019' | 'es2018' | 'es2017' | 'es2015' | string | undefined;
+type CompileTarget = 'latest' | 'esnext' | 'es2022' | 'es2020' | 'es2019' | 'es2018' | 'es2017' | string | undefined;
 interface TranspileResults {
   code: string;
   data?: any[];

package/dist/declarations/stencil-public-runtime.d.ts

@@ -463,7 +463,7 @@ declare function getAssetPath(path: string): string;
  * @param vnode - The virtual DOM tree to render
  * @param container - The container element to render the virtual DOM tree to
  */
-declare function render(vnode: VNode, container: Element): void;
+declare function render(vnode: VNode, container: globalThis.Element): void;
 /**
  * Used to manually set the base path where assets can be found. For lazy-loaded
  * builds the asset path is automatically set and assets copied to the correct
@@ -567,6 +567,22 @@ declare function setTagTransformer(transformer: TagTransformer): void;
  * @returns the transformed tag e.g. `new-my-tag`
  */
 declare function transformTag(tag: string): string;
+/**
+ * Registers a root - a shadowRoot, or `document` - to receive every plain CSS import
+ * (e.g. a dependency's own `import './foo.css'`) applied as a side effect.
+ * Call once per component instance that needs it, e.g. in `connectedCallback`.
+ * Pair with {@link unregisterSideEffectStyleTarget} in `disconnectedCallback`.
+ *
+ * @param root the root to register
+ */
+declare function registerSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
+/**
+ * Removes a root registered via {@link registerSideEffectStyleTarget} - call in
+ * `disconnectedCallback`.
+ *
+ * @param root the root to unregister
+ */
+declare function unregisterSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
 type MixinFactory = (base: MixedInCtor) => MixedInCtor;
 /**
  * A constructor type that can be used as the base for mixin factories.
@@ -1169,7 +1185,7 @@ declare namespace JSXBase {
     type?: string;
     value?: string | string[] | number;
     popoverTargetAction?: string;
-    popoverTargetElement?: Element | null;
+    popoverTargetElement?: globalThis.Element | null;
     popoverTarget?: string;
     command?: string;
     commandFor?: string;
@@ -1341,7 +1357,7 @@ declare namespace JSXBase {
     webkitEntries?: any;
     width?: number | string;
     popoverTargetAction?: string;
-    popoverTargetElement?: Element | null;
+    popoverTargetElement?: globalThis.Element | null;
     popoverTarget?: string;
   }
   interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -2047,7 +2063,7 @@ declare namespace JSXBase {
     [key: `aria${string}`]: string | boolean | undefined;
   }
 }
-interface JSXAttributes<T = Element> {
+interface JSXAttributes<T = globalThis.Element> {
   key?: string | number;
   ref?: (elm?: T) => void;
   children?: any;
@@ -2064,4 +2080,4 @@ interface CustomElementsDefineOptions {
   ce?: (eventName: string, opts?: any) => CustomEvent;
 }
 //#endregion
-export { AttachInternals, AttachInternalsDecorator, AttachInternalsOptions, AttrDeserialize, AttrDeserializeDecorator, Build, ChildNode, Component, ComponentDecorator, ComponentDidLoad, ComponentDidUpdate, ComponentInterface, ComponentOptions, ComponentShouldUpdateChanges, ComponentWillLoad, ComponentWillUpdate, CustomElementsDefineOptions, Element, ElementDecorator, EncapsulationOptions, Env, ErrorHandler, Event, EventDecorator, EventEmitter, EventOptions, Fragment, FunctionalComponent, FunctionalUtilities, HTMLStencilElement, Host, HostAttributes, LocalJSX as JSX, JSXAttributes, JSXBase, Listen, ListenDecorator, ListenOptions, ListenTargetOptions, Method, MethodDecorator, MethodOptions, MixedInCtor, Mixin, ModeStyles, NoneEncapsulation, Prop, PropDecorator, PropOptions, PropSerialize, PropSerializeDecorator, QueueApi, RafCallback, ReactiveController, ReactiveControllerHost, ReactiveControllerHostInterface, ResolutionHandler, ResolveVarFunction, ScopedEncapsulation, ShadowEncapsulation, ShadowRootOptions, SignalRef, SlotPatch, State, StateDecorator, TagTransformer, UserBuildConditionals, VNode, VNodeData, Watch, WatchDecorator, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, h, jsx, jsxs, readTask, render, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setTagTransformer, transformTag, writeTask };
+export { AttachInternals, AttachInternalsDecorator, AttachInternalsOptions, AttrDeserialize, AttrDeserializeDecorator, Build, ChildNode, Component, ComponentDecorator, ComponentDidLoad, ComponentDidUpdate, ComponentInterface, ComponentOptions, ComponentShouldUpdateChanges, ComponentWillLoad, ComponentWillUpdate, CustomElementsDefineOptions, Element, ElementDecorator, EncapsulationOptions, Env, ErrorHandler, Event, EventDecorator, EventEmitter, EventOptions, Fragment, FunctionalComponent, FunctionalUtilities, HTMLStencilElement, Host, HostAttributes, LocalJSX as JSX, JSXAttributes, JSXBase, Listen, ListenDecorator, ListenOptions, ListenTargetOptions, Method, MethodDecorator, MethodOptions, MixedInCtor, Mixin, ModeStyles, NoneEncapsulation, Prop, PropDecorator, PropOptions, PropSerialize, PropSerializeDecorator, QueueApi, RafCallback, ReactiveController, ReactiveControllerHost, ReactiveControllerHostInterface, ResolutionHandler, ResolveVarFunction, ScopedEncapsulation, ShadowEncapsulation, ShadowRootOptions, SignalRef, SlotPatch, State, StateDecorator, TagTransformer, UserBuildConditionals, VNode, VNodeData, Watch, WatchDecorator, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, h, jsx, jsxs, readTask, registerSideEffectStyleTarget, render, resolveVar, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setTagTransformer, transformTag, unregisterSideEffectStyleTarget, writeTask };

package/dist/{index-DnISpqrd.d.ts → index-BXAcVN2j.d.ts}

@@ -1,9 +1,6 @@
 import "rolldown";
 import "typescript";
 //#region src/declarations/stencil-public-runtime.d.ts
-interface ElementDecorator {
-  (): PropertyDecorator;
-}
 interface EventDecorator {
   (opts?: EventOptions): PropertyDecorator;
 }
@@ -25,11 +22,6 @@ interface EventOptions {
    */
   composed?: boolean;
 }
-/**
- * The `@Element()` decorator is a reference to the actual host element
- * once it has rendered.
- */
-declare const Element$1: ElementDecorator;
 /**
  * Components can emit data and events using the Event Emitter decorator.
  * To dispatch Custom DOM events for other components to handle, use the
@@ -460,7 +452,7 @@ declare namespace JSXBase {
     type?: string;
     value?: string | string[] | number;
     popoverTargetAction?: string;
-    popoverTargetElement?: Element$1 | null;
+    popoverTargetElement?: globalThis.Element | null;
     popoverTarget?: string;
     command?: string;
     commandFor?: string;
@@ -632,7 +624,7 @@ declare namespace JSXBase {
     webkitEntries?: any;
     width?: number | string;
     popoverTargetAction?: string;
-    popoverTargetElement?: Element$1 | null;
+    popoverTargetElement?: globalThis.Element | null;
     popoverTarget?: string;
   }
   interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1338,7 +1330,7 @@ declare namespace JSXBase {
     [key: `aria${string}`]: string | boolean | undefined;
   }
 }
-interface JSXAttributes<T = Element$1> {
+interface JSXAttributes<T = globalThis.Element> {
   key?: string | number;
   ref?: (elm?: T) => void;
   children?: any;

package/dist/{index-RrQfiPWK.d.mts → index-BopBfjPu.d.mts}

@@ -1838,10 +1838,19 @@ interface StencilConfig {
    */
   rolldownConfig?: RolldownConfig;
   /**
-   * Sets if the JS browser files are minified or not. Stencil uses `terser` under the hood.
+   * Sets if the JS browser files are minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
    */
   minifyJs?: boolean;
+  /**
+   * Which minifier to use for JS output when `minifyJs` is enabled.
+   *
+   * - `oxc`: built into rolldown. Much faster than terser. Output may be slightly larger.
+   * - `terser`: slower, but currently produces the smallest output.
+   *
+   * Defaults to `oxc`.
+   */
+  jsMinifier?: 'terser' | 'oxc';
   /**
    * Sets if the CSS is minified or not.
    * Defaults to `false` in dev mode and `true` in production mode.
@@ -2187,7 +2196,7 @@ type RequireFields<T, K extends keyof T> = T & { [P in K]-?: T[P]; };
 /**
  * Fields in {@link Config} to make required for {@link ValidatedConfig}
  */
-type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
+type StrictConfigFields = keyof Pick<Config, 'cacheDir' | 'devServer' | 'compat' | 'fsNamespace' | 'hydratedFlag' | 'jsMinifier' | 'logLevel' | 'logger' | 'minifyCss' | 'minifyJs' | 'namespace' | 'outputTargets' | 'packageJsonFilePath' | 'rolldownConfig' | 'rootDir' | 'srcDir' | 'srcIndexHtml' | 'sys' | 'transformAliasedImportPaths'>;
 /**
  * A version of {@link Config} that makes certain fields required. This type represents a valid configuration entity.
  * When a configuration is received by the user, it is a bag of unverified data. In order to make stricter guarantees
@@ -4450,7 +4459,7 @@ type BuildOverrideKeys = 'hotModuleReplacement' | 'signalBacking' | 'vdomSignals
  * and types stay in sync with the authoritative definition.
  */
 type BuildOverrides = Pick<BuildConditionals, BuildOverrideKeys>;
-type CompileTarget = 'latest' | 'esnext' | 'es2020' | 'es2019' | 'es2018' | 'es2017' | 'es2015' | string | undefined;
+type CompileTarget = 'latest' | 'esnext' | 'es2022' | 'es2020' | 'es2019' | 'es2018' | 'es2017' | string | undefined;
 interface TranspileResults {
   code: string;
   data?: any[];
@@ -6062,6 +6071,12 @@ interface TransformCssToEsmOutput {
     varName: string;
     importPath: string;
   }[];
+  /**
+   * Whether `output` itself has an observable side effect (a plain, untagged CSS file's
+   * generated module self-injects CSSStyleSheets; a Stencil component's tagged `styleUrl`
+   * output doesn't)
+   */
+  moduleSideEffects?: boolean;
 }
 interface PackageJsonData {
   name?: string;

package/dist/{index-BOrz3rbJ.d.mts → index-DmHmu3y0.d.mts}

@@ -1,4 +1,4 @@
-import { Gn as FunctionalComponent, Qn as VNode, Wn as ErrorHandler, Xn as TagTransformer, Yn as ResolutionHandler, Zn as UserBuildConditionals, a as HostElement, l as PropsType, qn as RafCallback, t as ChildType, u as RuntimeRef } from "./index-RrQfiPWK.mjs";
+import { Gn as FunctionalComponent, Qn as VNode, Wn as ErrorHandler, Xn as TagTransformer, Yn as ResolutionHandler, Zn as UserBuildConditionals, a as HostElement, l as PropsType, qn as RafCallback, t as ChildType, u as RuntimeRef } from "./index-BopBfjPu.mjs";
 //#region src/client/client-build.d.ts
 declare const Build: UserBuildConditionals;
 //#endregion

package/dist/index.d.mts

@@ -57,6 +57,7 @@ export {
   Prop,
   readTask,
   ReactiveControllerHost,
+  registerSideEffectStyleTarget,
   render,
   resolveVar,
   setAssetPath,
@@ -67,6 +68,7 @@ export {
   setTagTransformer,
   State,
   transformTag,
+  unregisterSideEffectStyleTarget,
   Watch,
   writeTask,
 } from './declarations/stencil-public-runtime';

package/dist/index.mjs

@@ -88,4 +88,84 @@ const AttrDeserialize = (_propName) => () => {};
 */
 const resolveVar = (variable) => String(variable);
 //#endregion
-export { AttachInternals, AttrDeserialize, Build, Component, Element, Event, Fragment, Host, Listen, Method, Mixin, Prop, PropSerialize, ReactiveControllerHost, State, Watch, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, h, readTask, render, resolveVar, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setTagTransformer, transformTag, writeTask };
+//#region src/runtime/inject-side-effect-style.ts
+const styleSheets = /* @__PURE__ */ new Map();
+const knownRoots = /* @__PURE__ */ new Set();
+const adoptedRoots = /* @__PURE__ */ new WeakMap();
+const knownFontFaces = /* @__PURE__ */ new Set();
+const adopt = (root, sheet) => {
+	let roots = adoptedRoots.get(sheet);
+	if (!roots) {
+		roots = /* @__PURE__ */ new WeakSet();
+		adoptedRoots.set(sheet, roots);
+	}
+	if (!roots.has(root)) {
+		roots.add(root);
+		root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+	}
+};
+/**
+* Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+* (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+* paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+* hold disconnected roots forever.
+* @param root the root to register
+*/
+function registerSideEffectStyleTarget(root) {
+	knownRoots.add(root);
+	for (const sheet of styleSheets.values()) adopt(root, sheet);
+}
+/**
+* Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+* @param root the root to unregister
+*/
+function unregisterSideEffectStyleTarget(root) {
+	knownRoots.delete(root);
+}
+const FONT_FACE_RE = /@font-face\s*\{[^{}]*\}/g;
+/**
+* Splits `@font-face` rules out of a CSS text - exported standalone (from private
+* module state - usually 3rd party node_modules) exported for testing
+* @param cssText the CSS text to split
+* @returns the font-face rules joined together (`null` if there were none) and the remaining CSS
+*/
+function splitFontFaces(cssText) {
+	const fontFaces = cssText.match(FONT_FACE_RE);
+	if (!fontFaces) return {
+		fontFaceText: null,
+		rest: cssText
+	};
+	return {
+		fontFaceText: fontFaces.join("\n"),
+		rest: cssText.replace(FONT_FACE_RE, "")
+	};
+}
+/**
+* Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+* encapsulation instead of always reaching for the top-level document. Not meant to be called
+* directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+* (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+*
+* `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+* (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+* @param cssText the CSS text to apply
+*/
+function injectSideEffectStyle(cssText) {
+	const { fontFaceText, rest } = splitFontFaces(cssText);
+	if (fontFaceText && !knownFontFaces.has(fontFaceText)) {
+		knownFontFaces.add(fontFaceText);
+		const fontFaceSheet = new CSSStyleSheet();
+		fontFaceSheet.replaceSync(fontFaceText);
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceSheet];
+	}
+	if (!rest.trim()) return;
+	let sheet = styleSheets.get(rest);
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(rest);
+		styleSheets.set(rest, sheet);
+	}
+	for (const root of knownRoots) adopt(root, sheet);
+}
+//#endregion
+export { AttachInternals, AttrDeserialize, Build, Component, Element, Event, Fragment, Host, Listen, Method, Mixin, Prop, PropSerialize, ReactiveControllerHost, State, Watch, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getShadowRoot, h, injectSideEffectStyle, readTask, registerSideEffectStyleTarget, render, resolveVar, setAssetPath, setErrorHandler, setMode, setPlatformHelpers, setTagTransformer, transformTag, unregisterSideEffectStyleTarget, writeTask };

package/dist/runtime/client/lazy.js

@@ -463,8 +463,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 	if (module) return module[exportName];
 	const retryCount = failedLoadAttempts.get(bundleId) ?? 0;
 	const cacheBustParams = [retryCount > 0 ? `s-retry=${retryCount}` : "", BUILD.hotModuleReplacement && hmrVersionId ? `s-hmr=${hmrVersionId}` : ""].filter(Boolean).join("&");
-	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-	const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
 	const onLoad = (importedModule) => {
 		if (!BUILD.hotModuleReplacement) {
 			failedLoadAttempts.delete(bundleId);
@@ -476,6 +474,8 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 		failedLoadAttempts.set(bundleId, retryCount + 1);
 		consoleError(e, hostRef.$hostElement$);
 	};
+	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+	const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
 	if (lazyLoadBasePath) return import(
 		/* @vite-ignore */
 		/* webpackInclude: /\.entry\.js$/ */
@@ -3719,12 +3719,13 @@ const restoreSafeSelector = (placeholders, content) => {
 const _polyfillHost = "-shadowcsshost";
 const _polyfillSlotted = "-shadowcssslotted";
 const _polyfillHostContext = "-shadowcsscontext";
+const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
 let _cssColonHostRe;
 let _cssColonHostContextRe;
 let _cssColonSlottedRe;
-const getCssColonHostRe = () => _cssColonHostRe ??= /* @__PURE__ */ new RegExp("(-shadowcsshost)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonHostContextRe = () => _cssColonHostContextRe ??= /* @__PURE__ */ new RegExp("(-shadowcsscontext)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
-const getCssColonSlottedRe = () => _cssColonSlottedRe ??= /* @__PURE__ */ new RegExp("(-shadowcssslotted)(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)", "gim");
+const getCssColonHostRe = () => _cssColonHostRe ??= new RegExp("(-shadowcsshost" + _parenSuffix, "gim");
+const getCssColonHostContextRe = () => _cssColonHostContextRe ??= new RegExp("(-shadowcsscontext" + _parenSuffix, "gim");
+const getCssColonSlottedRe = () => _cssColonSlottedRe ??= new RegExp("(-shadowcssslotted" + _parenSuffix, "gim");
 const _polyfillHostNoCombinator = "-shadowcsshost-no-combinator";
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
@@ -3987,12 +3988,13 @@ 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 scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
 	return processRules(cssText, (rule) => {
 		let selector = rule.selector;
 		let content = rule.content;
 		if (rule.selector[0] !== "@") selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
-		else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector);
+		else if (isScopableAtRule(rule.selector)) content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector);
 		return {
 			selector: selector.replace(/\s{2,}/g, " ").trim(),
 			content
@@ -4084,14 +4086,12 @@ const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
 			rule.selector = placeholder + rule.selector;
 			return rule;
 		};
-		cssText = processRules(cssText, (rule) => {
+		const commentSelectors = (input) => processRules(input, (rule) => {
 			if (rule.selector[0] !== "@") return processCommentedSelector(rule);
-			else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
-				rule.content = processRules(rule.content, processCommentedSelector);
-				return rule;
-			}
+			if (isScopableAtRule(rule.selector)) rule.content = commentSelectors(rule.content);
 			return rule;
 		});
+		cssText = commentSelectors(cssText);
 	}
 	const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
 	cssText = [scoped.cssText, ...commentsWithHash].join("\n");
@@ -4290,6 +4290,14 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 //#endregion
 //#region src/runtime/proxy-component.ts
 /**
+* Serialize a prop value the way `setAccessor()` does when it reflects it, so the runtime can
+* recognize an `attributeChangedCallback` it triggered itself.
+*
+* @param propValue the current value of a reflected prop
+* @returns the string the attribute would hold, or `null` if the attribute would be removed
+*/
+const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
+/**
 * Attach a series of runtime constructs to a compiled Stencil component
 * constructor, including getters and setters for the `@Prop` and `@State`
 * decorators, callbacks for when attributes change, and so on.
@@ -4437,7 +4445,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						return;
 					}
 					const propFlags = members.find(([m]) => m === propName);
-					const isBooleanTarget = propFlags && propFlags[1][0] & MEMBER_FLAGS.Boolean;
+					const propMemberFlags = propFlags ? propFlags[1][0] : 0;
+					const isBooleanTarget = propMemberFlags & MEMBER_FLAGS.Boolean;
+					if (BUILD.reflect && propMemberFlags & MEMBER_FLAGS.ReflectAttr && propMemberFlags & MEMBER_FLAGS.Any && !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) return;
 					const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
 					if (isBooleanTarget) newValue = !(newValue === null || newValue === "false");
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
@@ -5053,6 +5063,86 @@ const hostListenerOpts = (flags) => supportsListenerOptions ? {
 	capture: (flags & LISTENER_FLAGS.Capture) !== 0
 } : (flags & LISTENER_FLAGS.Capture) !== 0;
 //#endregion
+//#region src/runtime/inject-side-effect-style.ts
+const styleSheets = /* @__PURE__ */ new Map();
+const knownRoots = /* @__PURE__ */ new Set();
+const adoptedRoots = /* @__PURE__ */ new WeakMap();
+const knownFontFaces = /* @__PURE__ */ new Set();
+const adopt = (root, sheet) => {
+	let roots = adoptedRoots.get(sheet);
+	if (!roots) {
+		roots = /* @__PURE__ */ new WeakSet();
+		adoptedRoots.set(sheet, roots);
+	}
+	if (!roots.has(root)) {
+		roots.add(root);
+		root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+	}
+};
+/**
+* Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+* (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+* paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+* hold disconnected roots forever.
+* @param root the root to register
+*/
+function registerSideEffectStyleTarget(root) {
+	knownRoots.add(root);
+	for (const sheet of styleSheets.values()) adopt(root, sheet);
+}
+/**
+* Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+* @param root the root to unregister
+*/
+function unregisterSideEffectStyleTarget(root) {
+	knownRoots.delete(root);
+}
+const FONT_FACE_RE = /@font-face\s*\{[^{}]*\}/g;
+/**
+* Splits `@font-face` rules out of a CSS text - exported standalone (from private
+* module state - usually 3rd party node_modules) exported for testing
+* @param cssText the CSS text to split
+* @returns the font-face rules joined together (`null` if there were none) and the remaining CSS
+*/
+function splitFontFaces(cssText) {
+	const fontFaces = cssText.match(FONT_FACE_RE);
+	if (!fontFaces) return {
+		fontFaceText: null,
+		rest: cssText
+	};
+	return {
+		fontFaceText: fontFaces.join("\n"),
+		rest: cssText.replace(FONT_FACE_RE, "")
+	};
+}
+/**
+* Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+* encapsulation instead of always reaching for the top-level document. Not meant to be called
+* directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+* (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+*
+* `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+* (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+* @param cssText the CSS text to apply
+*/
+function injectSideEffectStyle(cssText) {
+	const { fontFaceText, rest } = splitFontFaces(cssText);
+	if (fontFaceText && !knownFontFaces.has(fontFaceText)) {
+		knownFontFaces.add(fontFaceText);
+		const fontFaceSheet = new CSSStyleSheet();
+		fontFaceSheet.replaceSync(fontFaceText);
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceSheet];
+	}
+	if (!rest.trim()) return;
+	let sheet = styleSheets.get(rest);
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(rest);
+		styleSheets.set(rest, sheet);
+	}
+	for (const root of knownRoots) adopt(root, sheet);
+}
+//#endregion
 //#region src/runtime/mixin.ts
 const baseClass = BUILD.lazyLoad ? class {} : globalThis.HTMLElement || class {};
 function Mixin(...mixins) {
@@ -5224,4 +5314,4 @@ function hasKeys(obj) {
 	return false;
 }
 //#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, ReactiveControllerHost, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, 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, ReactiveControllerHost, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, injectSideEffectStyle, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, registerSideEffectStyleTarget, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, unregisterSideEffectStyleTarget, win, writeTask };

package/dist/runtime/client/runtime.d.ts

@@ -2,9 +2,6 @@ import { BUILD, Env, NAMESPACE } from "@stencil/core/app-data";
 import "rolldown";
 import "typescript";
 //#region src/declarations/stencil-public-runtime.d.ts
-interface ElementDecorator {
-  (): PropertyDecorator;
-}
 interface EventDecorator {
   (opts?: EventOptions): PropertyDecorator;
 }
@@ -32,11 +29,6 @@ interface UserBuildConditionals {
   isServer: boolean;
   isTesting: boolean;
 }
-/**
- * The `@Element()` decorator is a reference to the actual host element
- * once it has rendered.
- */
-declare const Element$2: ElementDecorator;
 /**
  * Components can emit data and events using the Event Emitter decorator.
  * To dispatch Custom DOM events for other components to handle, use the
@@ -471,7 +463,7 @@ declare namespace JSXBase {
     type?: string;
     value?: string | string[] | number;
     popoverTargetAction?: string;
-    popoverTargetElement?: Element$2 | null;
+    popoverTargetElement?: globalThis.Element | null;
     popoverTarget?: string;
     command?: string;
     commandFor?: string;
@@ -643,7 +635,7 @@ declare namespace JSXBase {
     webkitEntries?: any;
     width?: number | string;
     popoverTargetAction?: string;
-    popoverTargetElement?: Element$2 | null;
+    popoverTargetElement?: globalThis.Element | null;
     popoverTarget?: string;
   }
   interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1349,7 +1341,7 @@ declare namespace JSXBase {
     [key: `aria${string}`]: string | boolean | undefined;
   }
 }
-interface JSXAttributes<T = Element$2> {
+interface JSXAttributes<T = globalThis.Element> {
   key?: string | number;
   ref?: (elm?: T) => void;
   children?: any;
@@ -2359,6 +2351,32 @@ declare const Fragment: FunctionalComponent;
 //#region src/runtime/host-listener.d.ts
 declare const addHostEventListeners: (elm: HostElement, hostRef: HostRef, listeners?: ComponentRuntimeHostListener[]) => void;
 //#endregion
+//#region src/runtime/inject-side-effect-style.d.ts
+/**
+ * Registers a root (a shadow root, or `document`) to receive every side-effect CSS import
+ * (a plain, non-component `import './foo.css'`), now and in future. Call in `connectedCallback`,
+ * paired with `unregisterSideEffectStyleTarget` in `disconnectedCallback` so the registry doesn't
+ * hold disconnected roots forever.
+ * @param root the root to register
+ */
+declare function registerSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
+/**
+ * Removes a root registered via `registerSideEffectStyleTarget` - call in `disconnectedCallback`.
+ * @param root the root to unregister
+ */
+declare function unregisterSideEffectStyleTarget(root: DocumentOrShadowRoot): void;
+/**
+ * Applies plain (non-component) CSS text to every registered root - respects shadow DOM
+ * encapsulation instead of always reaching for the top-level document. Not meant to be called
+ * directly: this is what the compiler's CSS-to-ESM output calls for CSS with no Stencil `tag`
+ * (i.e. not a component's own `styleUrl`), typically a third-party dependency's CSS import.
+ *
+ * `@font-face` rules are pulled out and adopted onto top-level `document` not per-root
+ * (Chromium (https://issues.chromium.org/issues/41085401) per-root never loads).
+ * @param cssText the CSS text to apply
+ */
+declare function injectSideEffectStyle(cssText: string): void;
+//#endregion
 //#region src/runtime/mixin.d.ts
 type Ctor<T = {}> = new (...args: any[]) => T;
 declare function Mixin(...mixins: ((base: Ctor) => Ctor)[]): Ctor<{}>;
@@ -2522,4 +2540,4 @@ declare const jsxs: typeof jsx;
  */
 declare const jsxDEV: typeof jsx;
 //#endregion
-export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, type HTMLStencilElement, HYDRATED_STYLE_ID, Host, type JSXBase, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, ReactiveControllerHost, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, win, writeTask };
+export { AttachInternals, AttrDeserialize, BUILD, Build, Component, Element$1 as Element, Env, Event, Fragment, H, H as HTMLElement, type HTMLStencilElement, HYDRATED_STYLE_ID, Host, type JSXBase, Listen, Method, Mixin, NAMESPACE, Prop, PropSerialize, ReactiveControllerHost, STENCIL_DEV_MODE, State, Watch, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, injectSideEffectStyle, isMemberInElement, jsx, jsxDEV, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, normalizeWatchers, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, registerSideEffectStyleTarget, render, resolveVar, setAssetPath, setErrorHandler, setLazyLoadBasePath, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setRegistry, setScopedSsr, setTagTransformer, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, unregisterSideEffectStyleTarget, win, writeTask };