Using jss.setup with a shadowRoot

[AntonOfTheWoods]

I am trying to migrate some content scripts that use tss-react into a shadowRoot in a chrome extension to avoid style contamination. I looked at the docs but nothing seems to address this directly. I am also using MUI and have both makeStyles and jss.createStyleSheet, which I am using with some inferno code (some situations have 10s of thousands of nodes).

The setup is a little complex but seems to work pretty well (very quick on 10s of thousands of nodes) - I was getting some CSS contamination on certain host pages (of the extension) so am looking to properly separate. My original investigation suggested insertionPoint on my shadowRoot object might be the way to go but it didn't seem to work. Should it?

Is this possible? Are there any examples anywhere?

[michaelkasper]

Where you able to resolve this? Any suggestions on how to get tss-react into a shadowRoot for a chrome extension?

[garronej]

If you you can put together an example that works with emotion I should be able to help.

[michaelkasper]

Thanks, i was able to work this out using the @emotion/cache and the container prop.

const muiCache = (shadow: ShadowRoot) => createCache({
    key: 'mui',
    container: shadow.firstChild?.firstChild, // this results in the <head/> tag of the shadow root
    prepend: true,
});

I dont love that i cant create the cache till after i create the ShadowRoot and that i cant get the head tag using getByTag or some other form. Its working for now, so im not blocked anymore. thanks for the help.

[garronej]

Thanks for sharing you solution!