How to use Stitches with web components

[kee-oth]

I'm looking for a CSS-in-JS library to use for styling custom web components. It seems as though Stitches doesn't currently have examples or instructions on if this is possible. I tried using @stitches/core 1.0.0-canary.18 for my project and it doesn't work for elements inside a ShadowDOM. Presumably this is because Stitches puts the styles in a style tag in the head of whatever page it's used on and those styles can't penetrate the custom web component's ShadowDOM.

Is there a way to specify that Stitches should apply styles to a custom web component's style tag instead of a page's global style tag?

Thanks!

[renatewr]

I have this working with @stitches/core" 0.1.9, in production, and we would like to keep up with the versions, and as we are in the making of a design system with web components and stitches, the support for shadow dom is on the list of "requirements" we have for the CSS-in-JS library:) Let me know if I can assist in testing or anything!

[jlalmes]

Pending the merge and release of this PR: #1004

Here is an example using @stitches with web components and ShadowDOM.
https://codesandbox.io/s/circular-json-reproduction-forked-gy01cx?file=/src/index.tsx