feat!: Reset inherited styles inside shadow root (#1269)

packages/wxt/src/utils/content-script-ui/shadow-root.ts

@@ -19,7 +19,14 @@ export async function createShadowRootUi<TMounted>(
   ctx: ContentScriptContext,
   options: ShadowRootContentScriptUiOptions<TMounted>,
 ): Promise<ShadowRootContentScriptUi<TMounted>> {
-  const css = [options.css ?? ''];
+  const css: string[] = [];
+
+  if (!options.inheritStyles) {
+    css.push(`/* WXT Shadow Root Reset */ body{all:initial;}`);
+  }
+  if (options.css) {
+    css.push(options.css);
+  }
   if (ctx.options?.cssInjectionMode === 'ui') {
     const entryCss = await loadCss();
     // Replace :root selectors with :host since we're in a shadow root

packages/wxt/src/utils/content-script-ui/types.ts

@@ -115,6 +115,21 @@ export type ShadowRootContentScriptUiOptions<TMounted> =
      * - Set to an array of event names to stop the propagation of a custom list of events
      */
     isolateEvents?: boolean | string[];
+    /**
+     * By default, WXT adds `all: initial` to the shadow root before the rest of
+     * your CSS. This resets any inheritable CSS styles that
+     * [normally pierce the Shadow DOM](https://open-wc.org/guides/knowledge/styling/styles-piercing-shadow-dom/).
+     *
+     * WXT resets everything but:
+     * - **`rem` Units**: they continue to scale based off the webpage's HTML `font-size`.
+     * - **CSS Variables/Custom Properties**: CSS variables defined outside the shadow root can be accessed inside it.
+     * - **`@font-face` Definitions**: Fonts defined outside the shadow root can be used inside it.
+     *
+     * To disable this behavior and inherit styles from the webpage, set `inheritStyles: true`.
+     *
+     * @default false
+     */
+    inheritStyles?: boolean;
     /**
      * Callback executed when mounting the UI. This function should create and append the UI to the
      * `uiContainer` element. It is called every time `ui.mount()` is called.