Page's html and body styling still applied

[achang97]

I am building a chrome extension and am injecting code directly in the page. To avoid conflicting styles, I have utilized the react-shadow package and have been mostly successful in isolating the CSS. However, I am still getting issues with leakage of styles into the page.

For instance, in Gmail my extension looks like this:

But in Stack Overflow it looks like this:

I looked at the rendered HTML in the browser and it seems like there is still leakage of the styling on the html and body tags from the page into my page. Does anyone know why this might be the case?

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