After upgrading to @mui/material version 5.16.14, using Shadow DOM the modals, the popovers and the poppers are no longer properly displayed

[dimitra-konstantinidou]

Steps to reproduce

Steps:

1. We followed this example https://v5.mui.com/material-ui/customization/shadow-dom/

https://codesandbox.io/p/devbox/shadow-dom-forked-dlzy94?workspaceId=ws_CsFSAjuCnbjDUNYa1yiQ9x

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

 
  System:
    OS: Windows 11 10.0.26100
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (133.0.3065.92)
  npmPackages:
    @emotion/react: ^11.5.0 => 11.14.0
    @emotion/styled: ^11.3.0 => 11.14.0
    @mui/core-downloads-tracker:  5.16.14
    @mui/icons-material: ^5.16.14 => 5.16.14
    @mui/material: ^5.16.14 => 5.16.14
    @mui/private-theming:  5.16.14
    @mui/styled-engine:  5.16.14
    @mui/system:  5.16.14
    @mui/types:  7.2.21
    @mui/utils:  5.16.14
    @types/react: ^19.0.0 => 19.0.10
    react: ^19.0.0 => 19.0.0
    react-dom: ^19.0.0 => 19.0.0
    typescript: ^5.7.3 => 5.8.2

Search keywords: Shadow DOM, version 5.16.14, modal, popover, popper

[ZeeshanTamboli]

I don't see anything wrong. The button inside the Shadow DOM isn't affected by the global style defined in index.html.

[dimitra-konstantinidou]

Hi,

The button is not affected but for instance there are times that the Popper is displayed like this:

I cannot reproduce it steadily but it happens.

[dimitra-konstantinidou]

Basically it happens when I include in the Shadow DOM components from a microfrontend. It is as if the container property is document.body even though I have specified in the host application

MuiPopper: {
      defaultProps: {
        container: shadowRootElement,
      },
    },

This used to work before the upgrade of material ui and react 19, so I am not sure what is causing it.

[ZeeshanTamboli]

Did you upgrade to React 19 along with MUI v5.16.14? Can you provide a reproduction? A minimal reproduction in a GitHub repo would also work.

[dimitra-konstantinidou]

We upgraded to React 19 along with MUI v5.16.14. I have now applied a workaround:

1. In the host application the ThemeProvider is defined like this:

 <ThemeProvider theme={theme}>
      {props.children}
    </ThemeProvider >
  );

2. In the component that is exposed by the microfrontend I redefined the ThemeProvider like this:

	const theme = useTheme();
	return (
		<ThemeProvider theme={theme}>

Now it seems to be working. Before the upgrade the second step was not needed.

[ZeeshanTamboli]

I'm not sure what the issue could be without a reproduction. You could check the release changelogs from your previous version to v5.16.14 for any related changes. I'll close this issue.

[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.

[adiXSG]

Maybe same root cause as #45699