[material-ui][Modal] Add the mountNode prop

[arminbashizade]

• I have followed (at least) the PR section of the contributing guide.

fixes #39636

I want to know your thoughts about this approach before I add tests and docs.

Currently the suggested way to add a Dialog inside a shadow root is to use props.container, but I'm thinking a new input is needed on Modal to fix #39636, something like props.mountNode to differentiate between

• the container where the Portal is created; and
• the container that is used in ModalManager to handle styling

Because a Dialog can be inside a container or use document.body, additionally it can be inside a Shadow DOM or not. These two properties are independent of each other and one cannot be inferred from the other.

To use this new prop to add a dialog in a Shadow DOM, follow the MUI docs but instead of setting container set mountNode, this will keep using container (which is document.body by default) in ModalManager and shadowRootElement to create the Portal:

const theme = createTheme({
  components: {
    MuiModal: {
      defaultProps: {
        mountNode: shadowRootElement,
      },
    },
  },
});

[mui-bot]

Netlify deploy preview

https://deploy-preview-40211--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 19f6d86

[ZeeshanTamboli]

Closing in favor of #48826. We don't need a new prop. When the container is inside a Shadow Root, we can apply the scrollbar compensation directly to document.body.