[Syntax] `set-layer:name` and `get-layer:name` attributes for the `<style>` tag and CSS `@layer` - pass style to subcomponent

[lukaszpolowczyk]

Describe the problem

Passing CSS styles between components.
Sometimes I have a style in a parent component and can't conveniently pass it to the subordinate components.

Describe the proposed solution

The set-layer and get-layer attributes for the <style> tag + use of the CSS standard @layer.
The set-layer and get-layer attributes are analogous to Svelte set/getContext.

Example:

<!-- Com.svelte -->
<script>
import SubCom from "./SubCom.svelte";
</script>
<style set-layer:name>
	@layer name {
		.class1 {}
	}
</style>
<div class="class1"></div>
<SubCom/>

<!-- SubCom.svelte -->
<div class="class1 class2"></div>
<style get-layer:name>
	@layer self, name;
	
	@layer self {
		.class2 {}
	}
</style>

Features

• The use of @layer, besides (following the standard) setting the order of styles, has the function of naming the style fragment, so that it can be passed to the subcomponent more easily.
• Both set-layer and get-layer can be used multiple times when you want to split and pass more style fragments.
• The style passed by set/get-layer must be available only for those components where these attributes are used. This is not supposed to work like :global or have any leakage.
• Layer names shouldn't leak either, they should only be visible to the components where they are used, and not available in an external CSS file for example.

(name set-layer and get-layer - temporary, something to think of)

EDIT: after experimenting I think using @layer is a bad idea, or at least problematic. You need to use your own at-rule e.g. @module @fragment @expose - unfortunately this is a non-standard syntax and I'm not happy about it.

Alternatives considered

This is a new version of that idea - #6422

And the rest that everyone knows about like :global, various CSS preprocessors.

I think ideas like "passing classes" is much worse than my proposal.
Passing CSS variables is not that at all.

Importance

would make my life easier

[lukaszpolowczyk]

@smithliam I want the style not to be visible outside the source component and the target component. It should not leak either up or down - in harmony with the Svelte idea.

EDIT: Oh, I see you may have deleted the comment.