CssVariables doesn't appear to work with ShadowDOM

[jbrunner92]

Steps to reproduce

Link to live example: (https://codesandbox.io/p/sandbox/shadow-dom-forked-s6w62q?workspaceId=2128292f-fbb6-4239-87e8-fa24491716c6)

Steps:

1. create a theme with cssVariables enabled
2. Put your ThemeProvider in the shadow DOM.
3. apply styles

Current behavior

CSS Variables are not being loaded when the ThemeProvider is in the shadow DOM.

Expected behavior

CSS Variables to be loaded/accessible into the shadow DOM.

Context

My react application is loaded into an angular application. As such, it is loaded in using the shadow DOM. If I use theme.vars.palette.<some-color> I would expect the css variable for that color to exist. Instead, I have to apply theme.palette.<some-color> if I want the colors to be applied. The problem is I would prefer to use css variables if possible. From what I can tell, MUI should now support shadow DOM - https://mui.com/material-ui/customization/shadow-dom/

Your environment

I am using Google Chrome

npx @mui/envinfo

``` System: OS: macOS 14.7 Binaries: Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node npm: 10.5.0 - ~/dev/dlp-configuration/node_modules/.bin/npm pnpm: 9.1.1 - ~/.nvm/versions/node/v20.9.0/bin/pnpm Browsers: Chrome: 129.0.6668.71 Edge: Not Found Safari: 18.0 npmPackages: @emotion/react: 11.13.3 => 11.13.3 @emotion/styled: 11.13.0 => 11.13.0 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: 6.1.1 => 6.1.1 @mui/material: 6.1.1 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.7 @mui/types: 7.2.17 @mui/utils: 5.16.6 @mui/x-data-grid: 7.18.0 @mui/x-data-grid-pro: 7.18.0 @mui/x-date-pickers: 7.18.0 @mui/x-date-pickers-pro: 7.18.0 @mui/x-internals: 7.18.0 @mui/x-license: 7.18.0 @types/react: 18.2.65 => 18.2.65 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 5.3.3 => 5.3.3 ```

Search keywords: shadow dom

[Janpot]

@jbrunner92 the codesandbox link appears to be broken, can you update?

[jbrunner92]

@Janpot I think I fixed the link. Please try again

[siriwatknp]

I almost get it work with https://codesandbox.io/p/sandbox/shadow-dom-forked-h956ms?file=%2Findex.tsx%3A55%2C25.

However, the problem is the CSS variables are generated within :root which does not work with shadow DOM, it has to be configurable to :host.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @jbrunner92! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[jbrunner92]

@siriwatknp thanks for your work on this! Do you know when a new version with those merge changes will be published?

[trungutt]

That has been released in 6.1.2 https://github.com/mui/material-ui/releases/tag/v6.1.2