From eff2b70cba482fc6bf58e9788d3947c05cb8f5e9 Mon Sep 17 00:00:00 2001
From: Aaron <aaronklinker1@gmail.com>
Date: Wed, 11 Dec 2024 15:51:52 -0600
Subject: [PATCH] feat!: Reset inherited styles inside shadow root (#1269)

---
 .../src/utils/content-script-ui/shadow-root.ts    |  9 ++++++++-
 packages/wxt/src/utils/content-script-ui/types.ts | 15 +++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/wxt/src/utils/content-script-ui/shadow-root.ts b/packages/wxt/src/utils/content-script-ui/shadow-root.ts
index 07babfdd..de0cf88e 100644
--- a/packages/wxt/src/utils/content-script-ui/shadow-root.ts
+++ b/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
diff --git a/packages/wxt/src/utils/content-script-ui/types.ts b/packages/wxt/src/utils/content-script-ui/types.ts
index 544fa311..a34b9a3a 100644
--- a/packages/wxt/src/utils/content-script-ui/types.ts
+++ b/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.