Not working with Web Component and Shadow DOM

[ycgarrido]

Hello, I am currently working on creating widgets. Widgets are developed with ReactJS and a bundle is compiled to include them as a Web Component. When I don't use shadowDom everything works perfect, but when I activate shadowDom the widget styles are lost.

Without Shadow DOM:

With Shadow DOM:

[lachlanjc]

Hi there! Theme UI has no official support for web components, I don't know anything about the topic personally. Can you provide source code & a repro vs what the expected behavior is?

[ycgarrido]

Hi, I want to do something like this: https://mui.com/material-ui/guides/shadow-dom/.
Maybe there is a way but I don't see it in the documentation. When I create a web component with Shadow DOM active, the css is created in the head of the page. Inside the component that css has no effect because it is encapsulated in the shadow DOM. Is there a way to get the css to be generated somewhere other than the head of the page?

[hasparus]

Theme UI depends on Emotion in a similar way, so the link you've attached, @ycgarrido, should actually help you..

Further reading in Emotion docs: https://emotion.sh/docs/@emotion/cache#container

[ycgarrido]

Thank you very much, I think that works for me.