[material-ui] Support CSS variables with shadow DOM (mui#43948)

sai6855 · Oct 1, 2024 · 94fc0ca · 94fc0ca
1 parent bef8afa
commit 94fc0ca
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 8 deletions.
diff --git a/docs/data/material/customization/shadow-dom/shadow-dom.md b/docs/data/material/customization/shadow-dom/shadow-dom.md
@@ -64,6 +64,35 @@ const theme = createTheme({
 </ThemeProvider>;
 ```
 
+### 3. CSS theme variables (optional)
+
+:::info
+If you use **TypeScript**, you need to [extend the interface of the theme](/material-ui/customization/css-theme-variables/usage/#typescript) first.
+:::
+
+To use [CSS theme variables](/material-ui/customization/css-theme-variables/overview/) inside of the shadow DOM, you need to set the selectors for generating the CSS variables:
+
+```diff
+ const theme = createTheme({
++  cssVariables: {
++    rootSelector: ':host',
++    colorSchemeSelector: 'class',
++  },
+   components: {
+     // ...same as above steps
+   }
+ })
+```
+
+Finally, set the `colorSchemeNode` prop using `shadowRootElement`, from step 1, as the value:
+
+```diff
+ <ThemeProvider
+   theme={theme}
++  colorSchemeNode={shadowRootElement}
+ >
+```
+
 ## Demo
 
 In the example below you can see that the component outside of the shadow DOM is affected by global styles, while the component inside of the shadow DOM is not:

diff --git a/packages/mui-material/src/styles/createGetSelector.ts b/packages/mui-material/src/styles/createGetSelector.ts
@@ -2,6 +2,7 @@ import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 
 export default <
     T extends {
+      rootSelector?: string;
       colorSchemeSelector?: 'media' | 'class' | 'data' | string;
       colorSchemes?: Record<string, any>;
       defaultColorScheme?: string;
@@ -11,6 +12,7 @@ export default <
     theme: T,
   ) =>
   (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => {
+    const root = theme.rootSelector || ':root';
     const selector = theme.colorSchemeSelector;
     let rule = selector;
     if (selector === 'class') {
@@ -32,34 +34,34 @@ export default <
         });
         if (rule === 'media') {
           return {
-            ':root': css,
+            [root]: css,
             [`@media (prefers-color-scheme: dark)`]: {
-              ':root': excludedVariables,
+              [root]: excludedVariables,
             },
           };
         }
         if (rule) {
           return {
             [rule.replace('%s', colorScheme)]: excludedVariables,
-            [`:root, ${rule.replace('%s', colorScheme)}`]: css,
+            [`${root}, ${rule.replace('%s', colorScheme)}`]: css,
           };
         }
-        return { ':root': { ...css, ...excludedVariables } };
+        return { [root]: { ...css, ...excludedVariables } };
       }
       if (rule && rule !== 'media') {
-        return `:root, ${rule.replace('%s', String(colorScheme))}`;
+        return `${root}, ${rule.replace('%s', String(colorScheme))}`;
       }
     } else if (colorScheme) {
       if (rule === 'media') {
         return {
           [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
-            ':root': css,
+            [root]: css,
           },
         };
       }
       if (rule) {
         return rule.replace('%s', String(colorScheme));
       }
     }
-    return ':root';
+    return root;
   };
diff --git a/packages/mui-material/src/styles/createTheme.spec.ts b/packages/mui-material/src/styles/createTheme.spec.ts
@@ -243,3 +243,13 @@ const theme = createTheme();
     },
   });
 }
+
+// CSS variables for shadow DOM
+{
+  createTheme({
+    cssVariables: {
+      rootSelector: ':host',
+      colorSchemeSelector: 'class',
+    },
+  });
+}
diff --git a/packages/mui-material/src/styles/createTheme.ts b/packages/mui-material/src/styles/createTheme.ts
@@ -43,6 +43,7 @@ export default function createTheme(
         | Pick<
             CssVarsThemeOptions,
             | 'colorSchemeSelector'
+            | 'rootSelector'
             | 'disableCssColorScheme'
             | 'cssVarPrefix'
             | 'shouldSkipGeneratingVar'

diff --git a/packages/mui-material/src/styles/createThemeNoVars.d.ts b/packages/mui-material/src/styles/createThemeNoVars.d.ts
@@ -63,6 +63,7 @@ type CssVarsProperties = CssThemeVariables extends { enabled: true }
       | 'applyStyles'
       | 'colorSchemes'
       | 'colorSchemeSelector'
+      | 'rootSelector'
       | 'cssVarPrefix'
       | 'defaultColorScheme'
       | 'getCssVar'

diff --git a/packages/mui-material/src/styles/createThemeWithVars.d.ts b/packages/mui-material/src/styles/createThemeWithVars.d.ts
@@ -306,6 +306,13 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * Generate CSS variables within a data attribute [data-mode-light], [data-mode-dark]
    */
   colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+  /**
+   * The selector to generate the global CSS variables (non-color-scheme related)
+   * @default ':root'
+   * @example ':host' // (for shadow DOM)
+   * @see https://mui.com/material-ui/customization/shadow-dom/#3-css-theme-variables-optional
+   */
+  rootSelector?: string;
   /**
    * If `true`, the CSS color-scheme will not be set.
    * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
@@ -430,6 +437,7 @@ export type ThemeCssVar = OverridableStringUnion<
  */
 export interface CssVarsTheme extends ColorSystem {
   colorSchemes: Partial<Record<SupportedColorScheme, ColorSystem>>;
+  rootSelector: string;
   colorSchemeSelector: 'media' | 'class' | 'data' | string;
   cssVarPrefix: string;
   defaultColorScheme: SupportedColorScheme;

diff --git a/packages/mui-material/src/styles/createThemeWithVars.js b/packages/mui-material/src/styles/createThemeWithVars.js
@@ -132,6 +132,7 @@ export default function createThemeWithVars(options = {}, ...args) {
     colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark
       ? 'media'
       : undefined,
+    rootSelector = ':root',
     ...input
   } = options;
   const firstColorScheme = Object.keys(colorSchemesInput)[0];
@@ -179,6 +180,7 @@ export default function createThemeWithVars(options = {}, ...args) {
     ...muiTheme,
     cssVarPrefix,
     colorSchemeSelector: selector,
+    rootSelector,
     getCssVar,
     colorSchemes,
     font: { ...prepareTypographyVars(muiTheme.typography), ...muiTheme.font },

diff --git a/packages/mui-material/src/styles/extendTheme.test.js b/packages/mui-material/src/styles/extendTheme.test.js
@@ -851,5 +851,18 @@ describe('extendTheme', () => {
         '.mode-light',
       ]);
     });
+
+    it('should use a custom root selector', () => {
+      const theme = extendTheme({
+        colorSchemes: { light: true, dark: true },
+        colorSchemeSelector: 'class',
+        rootSelector: ':host',
+      });
+      expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([
+        ':host',
+        ':host, .light',
+        '.dark',
+      ]);
+    });
   });
 });
diff --git a/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts b/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts
@@ -1,7 +1,7 @@
 export default function shouldSkipGeneratingVar(keys: string[]) {
   return (
     !!keys[0].match(
-      /(cssVarPrefix|colorSchemeSelector|typography|mixins|breakpoints|direction|transitions)/,
+      /(cssVarPrefix|colorSchemeSelector|rootSelector|typography|mixins|breakpoints|direction|transitions)/,
     ) ||
     !!keys[0].match(/sxConfig$/) || // ends with sxConfig
     (keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/))