After applying shadow root, some components' style lost

[Bwatermelon]

Order ID 💳

#38795

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

After I attached the shadow root, some components' style are lost and the display position are incorrect. For example, the menu from column header looks like behind the grid content, the drop down option list does not locate just below the cell etc.

I just created this example: https://codesandbox.io/s/ecstatic-fire-8wkqzw?file=/src/index.tsx

Thanks for the help.

Here are some examples:

Your environment 🌎

System:
OS: macOS 12.3.1
Binaries:
Node: 16.13.1 - /usr/local/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 8.1.2 - /usr/local/bin/npm
Browsers:
Chrome: 101.0.4951.64
Edge: Not Found
Firefox: Not Found
Safari: 15.4
npmPackages:
@emotion/react: ^11.9.0 => 11.9.0
@emotion/styled: ^11.8.1 => 11.8.1
@mui/base: 5.0.0-alpha.82
@mui/envinfo: ^2.0.6 => 2.0.6
@mui/icons-material: ^5.8.0 => 5.8.0
@mui/lab: ^5.0.0-alpha.83 => 5.0.0-alpha.83
@mui/material: ^5.8.1 => 5.8.1
@mui/private-classnames: ^5.7.0 => 5.7.0
@mui/private-theming: 5.8.0
@mui/styled-engine: 5.8.0
@mui/system: ^5.8.1 => 5.8.1
@mui/types: 7.1.3
@mui/utils: 5.8.0
@mui/x-data-grid: ^5.11.1 => 5.11.1
@mui/x-data-grid-pro: ^5.11.1 => 5.11.1
@mui/x-date-pickers: ^5.0.0-alpha.2 => 5.0.0-alpha.2
@mui/x-date-pickers-pro: ^5.0.0-alpha.2 => 5.0.0-alpha.2
@mui/x-license-pro: ^5.10.0 => 5.10.0
@types/react: ^18.0.9 => 18.0.9
react: ^18.1.0 => 18.1.0
react-dom: ^18.1.0 => 18.1.0
typescript: ^4.5.5 => 4.5.5

[cherniavskii]

Hey @Bwatermelon
I don't see anything unusual in the provided codesandbox.
Do you have an example that reproduces the issue?

[Bwatermelon]

Hey @Bwatermelon I don't see anything unusual in the provided codesandbox. Do you have an example that reproduces the issue?

Hi @cherniavskii , I just update the codesandbox. please have a look. Thanks.

[cherniavskii]

Hey @Bwatermelon
Internally, we use React Portals a lot (mostly through @mui/material components). This means that those components are mounted outside of shadow DOM element.
To make it work with shadow DOM you have to override the container where portals are mounted, which involves both componentsProps prop on DataGrid and theme overrides:

<DataGrid
  componentsProps={{
    columnsPanel: { container: shadowRootElement },
    filterPanel: { container: shadowRootElement },
    panel: { container: shadowRootElement },
    preferencesPanel: { container: shadowRootElement },
    basePopper: { container: shadowRootElement },
    baseTooltip: { PopperProps: { container: shadowRootElement } },
    baseSelect: { MenuProps: { container: shadowRootElement } }
  }}
/>


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

Here's a working demo: https://codesandbox.io/s/amazing-noyce-p0ocvw?file=/src/index.tsx

Can you share more details about your use case? What problems does shadow DOM solve for you?

[cherniavskii]

Some related issues:

• Issues with DataGrid shadowDOM #3319
• [DataGrid][ShadowDOM] Add GridMenu to GridSlotsComponent to override Popper.container -> Portal.container #3381
• Support Shadow DOM material-ui#17473

[Bwatermelon]

Hi @cherniavskii, Thanks very much for the help.

Why we apply the shadow DOM:
We have multiple web applications, but you can access it from one portal; For different user groups, it loads different apps. So, user can switch different applications easily and quickly. The portal is used to manage apps, switch theme, and search etc. All other apps use the shadow DOM, so this new app still need to use the shadow DOM. Not sure this is clear enough. Later on, I will create a code sandbox to illustrate, how we would like to use the Data Grid.

Sorry to disturb you again and again. There is two bugs in the demo:

1. If you check the Counterparty Country column, once you start to edit it and the option list comes out, you have to select a different option, otherwise, you cannot close this option list, whatever you click outside of the list or press the 'esc' button. Plus, you cannot press keyboard to quick search the options (For example, if you press "B", jump to options start with letter B).
2. for the Counterparty Currency column, no style is applied to the option list. I checked the element, the element style looks like inherited from the MuiPaper and MuiAutocomplete, not sure whether it is because of lack of the Paper slots.

When I check the doc, I found one typo that you could correct: https://mui.com/x/react-data-grid/filtering/

Thanks very much, have a good day.

[cherniavskii]

Hey @Bwatermelon
I've played with it a bit more and came up with a much simpler solution:

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

This solves all the issues regarding broken styles, as all components are now mounted inside shadow root element.
I've updated the codesandbox: https://codesandbox.io/s/amazing-noyce-p0ocvw?file=/src/index.tsx

[cherniavskii]

Plus, you cannot press keyboard to quick search the options (For example, if you press "B", jump to options start with letter B).

This one is tricky, looks like focus management is different in shadow DOM.
When country select is opened, the first option element (MenuItem) is automatically focused (.focus() is called).
You can see it in this demo: https://codesandbox.io/s/basicselect-demo-material-ui-forked-xd9f5p?file=/demo.tsx:2663-2682
When you open the Select, document.activeElement points to the first MenuItem.
In shadow DOM it's not the case. See https://codesandbox.io/s/basicselect-demo-material-ui-forked-i3mo5v?file=/demo.tsx
Hence the keyDown handler is not working.
I'm not sure it can be handled somehow by MUI. I've tried attachShadow({ mode: "open", delegatesFocus: true });

[Bwatermelon]

@cherniavskii thanks very much, change the container for these twoMuiPopover & MuiPopper is very clear and helpful.