[Syntax] set-layer:name
and get-layer:name
attributes for the <style>
tag and CSS @layer
- pass style to subcomponent
#7465
Labels
css
Stuff related to Svelte's built-in CSS handling
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
andget-layer
attributes for the<style>
tag + use of the CSS standard@layer
.The
set-layer
andget-layer
attributes are analogous to Svelteset
/getContext
.Example:
Features
@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.set-layer
andget-layer
can be used multiple times when you want to split and pass more style fragments.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.(name
set-layer
andget-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
The text was updated successfully, but these errors were encountered: