Page's html and body styling still applied

[wildhoney]

Page's html and body styling still applied

[Wildhoney]

Inherited styles such as color, font-family etc... are still carried across the shadow boundary.

[achang97]

Is there a good way of resetting these styles? I’m also trying to use Material UI within the shadow dom, which is proving to be a little difficult.

[Wildhoney]

Yes with all: initial (or revert – not as well supported).

[Wildhoney]

As an example: https://codesandbox.io/s/react-shadow-4rcso

[achang97]

Thanks - I reset some of the styles using that approach, but with Material UI it’s still inheriting some of external page’s styling.

That is, there are styles such as the font-size (defines in the html tag) which impact the size of fonts of mui, which are defined in rem. I followed the answer provided here: https://stackoverflow.com/questions/51832583/react-components-material-ui-theme-not-scoped-locally-to-shadow-dom, but I’m still having some issues with minor differences across sites.

[Wildhoney]

Well that's problematic as rem is inherited from the html tag, and the shadow root has no effect on that inheritance.

[Wildhoney]

I’m going to close the ticket, but please let me know if you need any more help.