@mui/material/docs/material-ui/customization/shadow-dom.md

Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.

# Shadow DOM

The shadow DOM lets you encapsulate parts of an app to keep them separate from global styles that target the regular DOM tree.

## How to use the shadow DOM with Material UI

### 1. Styles

The shadow DOM is an API that provides a way to attach a hidden separated DOM to an element.
This is useful when you need to keep the structure, style, and behavior of different components separate from the rest of the code on the page, to prevent conflicts.
See [the MDN docs on the shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) for more information.
The following code snippet shows how to apply styles inside of the shadow DOM:

```tsx
const container = document.querySelector('#root');
const shadowContainer = container.attachShadow({ mode: 'open' });
const shadowRootElement = document.createElement('div');
shadowContainer.appendChild(shadowRootElement);

const cache = createCache({
  key: 'css',
  prepend: true,
  container: shadowContainer,
});

ReactDOM.createRoot(shadowRootElement).render(
  <CacheProvider value={cache}>
    <App />
  </CacheProvider>,
);
```

### 2. Theme

Material UI components like Menu, Dialog, Popover, and others use the [Portal](/material-ui/react-portal/) component to render a new "subtree" in a container outside of current DOM hierarchy.
By default, this container is `document.body`.
But since the styles are applied only inside of the Shadow DOM, we need to render portals inside the Shadow DOM container as well:

```tsx
const theme = createTheme({
  components: {
    MuiPopover: {
      defaultProps: {
        container: shadowRootElement,
      },
    },
    MuiPopper: {
      defaultProps: {
        container: shadowRootElement,
      },
    },
    MuiModal: {
      defaultProps: {
        container: shadowRootElement,
      },
    },
  },
});

// ...

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;
```

The `container` prop only needs to be set on the base components that render directly through the `Portal`: `Modal`, `Popover`, and `Popper`. Higher-level components (like `Dialog`, `Menu`, `Tooltip` etc.) render these base components internally and inherit the `container` prop automatically.

### 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:

```jsx
export default function ShadowDOMDemoNoSnap() {
  return (
    <iframe
      title="codesandbox"
      src="https://codesandbox.io/embed/6vcl2f?view=Editor+%2B+Preview&module=%2Findex.tsx"
      style={{
        width: '100%',
        height: 350,
        border: 0,
      }}
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    />
  );
}

```