:global(...) not working in custom elements

[dylanblokhuis]

Whenever you use the :global() modifier in custom elements the css output will still contain the modifier.

To reproduce the issue you can use this repo: dylanblokhuis/svelte-global-modifier-issue

[itswillta]

I was trying to build some custom elements with Svelte and encountered the same issue.

I have found out that :global() currently doesn't work with custom elements. When the customElement option is enabled, Svelte deliberately doesn't transform your style in any sort of way (well, except for removing the "unused selectors").

[constgen]

Native Web Components styles are isolated by the spec, aren't they? May be that's why Svelte doesn't process their styles as they are applied only to a component by the platform itself.

[s0kil]

:global() doesn't get processed at all.

[dylanblokhuis]

Until this is fixed you can use svelte-preprocess. the modifier does get compiled when using this

[JohnRSim]

Until this is fixed you can use svelte-preprocess. the modifier does get compiled when using this

I tried to use preprocess on a custom element but couldn't get it to work using :global(...
Had a look through your other projects encase you had any examples but didn't see anything in the rollup-config.

[LunaTK]

Native Web Components styles are isolated by the spec, aren't they? May be that's why Svelte doesn't process their styles as they are applied only to a component by the platform itself.

I agree.

But in that sense, any selector inside :global should be unwrapped, since :global is meaningless.

However, svelte currently does not touch :global at all, leaving it even after compilation.
Since :global is not standard css spec, any style using :global doesn't work at all.

I think it should at least be unwrapped.

[kmmbvnr]

It seems :global style removing happens in the Stylesheet.transform (second arg) And that transformation explicitly disabled for custom elements

https://github.com/sveltejs/svelte/blob/master/src/compiler/compile/render_dom/index.ts#L32

[diegologs]

Any update on this or at least a workaround?

The idea of ​​using :global is simply to be able to write CSS rules that are not in the component markup. Another solution could be to be able to disable globally the option to delete unused CSS.

Thanks for your work!