CssVariables doesn't appear to work with ShadowDOM #43886
Description
Steps to reproduce
Link to live example: (https://codesandbox.io/p/sandbox/shadow-dom-forked-s6w62q?workspaceId=2128292f-fbb6-4239-87e8-fa24491716c6)
Steps:
- create a theme with cssVariables enabled
- Put your ThemeProvider in the shadow DOM.
- 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