Fix for :global(...) styles in custom elements. Close #2969

[kmmbvnr]

• It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases features are absent for a reason.
• This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them.
• Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to npm run lint!)

Tests

• Run the tests tests with npm test or yarn test)

I tried to find a way to fix it on Stylesheet render/transform layer, but the changeset for that case seems would be much bigger.

This is a little in-place fix, but it closes the old issue with global styles in web-components and opens the way to use svelte as a wrapper for many 3d-party js frameworks

[Conduitry]

Take a look at the list of gotchas here: https://svelte.dev/docs#Custom_element_API

I don't think silently converting :global() styles into regular scoped/encapsulated styles is the right thing to do here. Until we figure out how we want to handle generating web components without the shadow DOM (#1748), I don't think it's possible for this to work at all. In the meantime, perhaps using :global() in custom elements should be a warning or even an error.

[kmmbvnr]

@Conduitry yep, currently :global leads to error in the generated CSS

Actually, the use case of scoped-global is to avoid "unused" selectors elimination.

"Unused" selectors allow wrapping 3d party JS/CSS libraries inside svelte web-components.

I'm on the way to select a base framework from my project. Could you point me, would be scoped "unused" CSS be handled by svelte in the future?

[rowthan]

Take a look at the list of gotchas here: https://svelte.dev/docs#Custom_element_API

I don't think silently converting :global() styles into regular scoped/encapsulated styles is the right thing to do here. Until we figure out how we want to handle generating web components without the shadow DOM (#1748), I don't think it's possible for this to work at all. In the meantime, perhaps using :global() in custom elements should be a warning or even an error.

But any method to disable tree shake in custom component ? It really a problem while import 3d part css lib in custom component. Or any method to solve it？