How to extract and apply CSS styles when using in shadow Dom?

[LucusWebsites]

Hey, first of all thanks a lot for this awesome piece of software :+1:

Is there any way to extract the generated CSS so I can add it to the shadow Dom?

Leva is working fine for me, except when it's placed in a shadow Dom, then it looses all styles, see screenshot:

I tried the following in my app index.tsx, but it seems only some basic leva css is extracted like this

// stitches styles, because leva
const stitchesRoot = document.createElement('style')
stitchesRoot.setAttribute('data-why', 'because-leva')
const { getCssText } = createStitches()
stitchesRoot.innerHTML = getCssText()
shadowContainer.appendChild(stitchesRoot)

[dbismut]

Don't think we can do much about this, you'd have to look for solutions within stitches repo... https://github.com/stitchesjs/stitches/discussions/534

If we ever hit 1.0 with Leva I think we'll use a more solid library. Stitches is awesome but has too many cons I'm afraid. Vanilla extract might be a better fit.

[LucusWebsites]

Don't think we can do much about this, you'd have to look for solutions within stitches repo... stitchesjs/stitches#534

If we ever hit 1.0 with Leva I think we'll use a more solid library. Stitches is awesome but has too many cons I'm afraid. Vanilla extract might be a better fit.

Ok, thanks for quick reply!

[etienne-85]

Have this problem as well. It is also happening with MaterialUI which can be fixed using style injection workarounds Not sure but maybe could work here too.