[Feature]: support for shadow dom in Twind v1?

[GorvGoyl]

Describe the problem

How to add Tailwind classes inside shadow dom?

Describe the proposed solution

There was a nice documentation about adding support for shadow DOM for the beta version https://twind.dev/usage-guides/web-components.html, but the required classes create and cssomSheet are not present in the latest version. This is also not mentioned in the migration guide.

Alternatives considered

No response

Importance

I cannot use Twind without it

Additional Information

No response

[sastan]

You can view a preview of the docs here: https://next.twind-style.pages.dev/with-web-components. I have added a Lit as well in case you are using that: https://next.twind-style.pages.dev/with-lit

There was a small issue that will be fixed in the next release (#417). Until that is released you can use the pre-release version (for example @twind/core@next or @twind/preset-tailwind@next).

If you have any issues or questions please re-open this issue.

[GorvGoyl]

@sastan, thanks; it seems to be working for me. I also wrote small guide in case others are looking for the solution https://gourav.io/blog/tailwind-in-shadow-dom

[sastan]

I have implemented in a new integration: @twind/with-web-components. It supports modern and legacy browsers. Please take a look at the new docs: https://next.twind-style.pages.dev/with-web-components and https://next.twind-style.pages.dev/with-lit

This will be released soon (#417). Until is released you can use the pre-release version (for example @twind/with-web-components@next, @twind/core@next or @twind/preset-tailwind@next).

[sastan]

@sastan, thanks; it seems to be working for me. I also wrote small guide in case others are looking for the solution gourav.io/blog/tailwind-in-shadow-dom

Nice article. One thing I wonder: the new @twind/with-web-components wouldn't really help when you want to attach to existing normal elements. Would it be helpful to have a dedicated @twind/with-shadow-root package? Something like:

import install from "@twind/with-shadow-root";
import config from "./twind.config"; 

const attach = install(config);

attach(document.querySelector(".my-shadow-root-container"))

I really don't know if there is a use case for this. Are you using such a pattern?

[GorvGoyl]

@sastan I'll give you some context... I'm developing a chrome extension and need to show some UI using shadow DOM on web pages so that the styles don't get leaked to the page. You're right that @twind/with-web-components won't be helpful in my case as I'm not using lit or web components. If you could provide @twind/with-shadow-root that abstracts away the code, that'd be nice.