Extract to placeholder value or a getter function for styling shadow roots

[ivancuric]

Talking about a mode like this one:
https://unocss.dev/integrations/vite#shadow-dom

I love using ecsstatic because it allows me to colocate styles, however for my use-case I also need to import it and inject it back into a shadow root.

Is there any other way to get the same behaviour using vite?

[mayank99]

This is a difficult problem. Today, bundlers and shadow-roots are at odds with each other. Vite's recommended way of adding CSS is using a non-standard import syntax, which ecsstatic relies on. This is obviously convenient but it is very opaque - you cannot get the final URL of the stylesheet when you import it (there are ways to get the URL but then you lose the auto-injection).

I'm also wondering why you need ecsstatic when using shadow DOM, where styles are already scoped.

[ivancuric]

Hey! Basically cause of style colocation in the component and convenience. I'd like to avoid inventing class names if I can help it, as 50% of them are just some abstract containers.

…

On Mon, 9 Sept 2024, 19:08 Mayank, ***@***.***> wrote: This is a difficult problem. Today, bundlers and shadow-roots are at odds with each other. Vite's recommended way of adding CSS is using a non-standard import syntax, which ecsstatic relies on. This is obviously convenient but it is very opaque - you cannot get the final URL of the stylesheet when you import it (there are ways <https://vitejs.dev/guide/assets.html#explicit-url-imports> to get the URL but then you lose the auto-injection). I'm also wondering why you need ecsstatic when using shadow DOM, where styles are already scoped. — Reply to this email directly, view it on GitHub <#23 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAVSGJ3CWIQ5Z6H3T565ES3ZVXIXTAVCNFSM6AAAAABN4XEYOWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANJZGM4DQMQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[mayank99]

After more reflection, I have an idea how it could work.

1. ecsstatic could introduce a new "mode" that could be enabled from an option passed to the vite plugin.
2. When this mode is enabled, styles would not be automatically injected into any page (like it's currently doing). Instead, ecsstatic would collect all styles and expose them in a single stylesheet from a well-known "placeholder" URL.
3. This bundled stylesheet URL could then be explicitly imported using declarative shadow DOM in HTML.

This approach would not work for imperative shadow DOM (in JS). It also has the potential downside of producing a single, large .css file for all pages.