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 for more information. The following code snippet shows how to apply styles inside of the shadow DOM:

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 Base UI 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:

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

// ...

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

3. CSS theme variables (optional)

To use CSS theme variables inside of the shadow DOM, you need to set the selectors for generating the CSS variables:

 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:

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