You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Abstract: This specification defines various scoping/encapsulation mechanisms for CSS, including scoped styles and the ''@scope'' rule, Shadow DOM selectors, and page/region-based styling.
11
+
Ignored Terms: content, shadowroot, scoped
12
+
Link Defaults: selectors (dfn) child combinator, html5 (element) style
12
13
</pre>
13
14
14
15
<h2 id="intro">
@@ -17,6 +18,144 @@ Introduction</h2>
17
18
...
18
19
19
20
21
+
<h2 id='scope'>
22
+
Scoped Styles</h2>
23
+
24
+
<a>Scoped</a> style rules apply only within a subtree of a document,
25
+
rather than matching against the entire document.
26
+
Scoping has two primary effects:
27
+
<ul>
28
+
<li>The selector of the <a>scoped</a> style rule is restricted to match only elements within scope.
29
+
See <a href="http://www.w3.org/TR/selectors4/#scoping">Scoped Selectors</a> in [[SELECTORS4]].
30
+
<li>The cascade prioritizes scoped rules over unscoped ones, regardless of specificity.
31
+
See <a href="http://www.w3.org/TR/css-cascade/#cascade-scope">Cascading by Scope</a> in [[CSS3CASCADE]].
32
+
</ul>
33
+
34
+
<h3 id='scoping-mechanisms'>
35
+
Scoping Mechanisms</h3>
36
+
37
+
Style rules can be scoped using constructs defined in the document language
38
+
or using the ''@scope'' rule in CSS.
39
+
40
+
<h4 id='scoping-markup'>
41
+
Document Markup for Scoping</h4>
42
+
43
+
Document languages may define a mechanism for a stylesheet to be scoped to some element in the document.
44
+
For example, in HTML,
45
+
a <a element>style</a> element with a <a element-attr for="style">scoped</a> attribute
46
+
defines a stylesheet that is scoped to the <a element>style</a> element’s parent element.
47
+
[[HTML]]
48
+
49
+
<h4 id='scope-atrule'>
50
+
CSS Syntax for Scoping: the ''@scope'' rule</h4>
51
+
52
+
The <dfn>@scope</dfn> at-rule allows authors to create scoped style rules using CSS syntax.
53
+
The syntax of the ''@scope'' rule is:
54
+
55
+
<pre class='prod'>
56
+
@scope <<selector>> {
57
+
<<stylesheet>>
58
+
}
59
+
</pre>
60
+
61
+
where the elements matched by the <<selector>>
62
+
are <a>scoping roots</a> for the style rules in <<stylesheet>>,
63
+
and selectors of style rules scoped by ''@scope'' are
64
+
<a>scope-contained</a> to their <a>scoping root</a>.
65
+
66
+
If multiple elements match the <<selector>>,
67
+
the <<stylesheet>> is effectively duplicated
68
+
and scoped independently to each one.
69
+
Authors should avoid using overly-generic selectors
70
+
as it can have confusing interactions with the cascade.
71
+
72
+
<div class="example">
73
+
A scoped stylesheet is attached not only to the outermost scoping element,
74
+
but to all matching elements.
75
+
For example, given the style sheet below
76
+
<pre>
77
+
@scope div {
78
+
span {
79
+
color: blue;
80
+
}
81
+
}
82
+
@scope section {
83
+
span {
84
+
color: orange;
85
+
}
86
+
}
87
+
</pre>
88
+
89
+
and the following document fragment
90
+
91
+
<pre>
92
+
<div>
93
+
<section>
94
+
<div>
95
+
<span>text</span>
96
+
</div>
97
+
</section>
98
+
</div>
99
+
</pre>
100
+
101
+
the text will be blue.
102
+
</div>
103
+
104
+
''@scope'' rules can be nested.
105
+
In this case, just as with the nested style rules,
106
+
the selector of an outer ''@scope'' scope-contains
107
+
the selector of the inner one.
108
+
109
+
The specificity of selectors inside the ''@scope'' rule is calculated locally:
110
+
the selector specifying the scoping element is ignored.
111
+
However, because scoped styles override non-scoped styles,
112
+
style rules inside the ''@scope'' will override rules outside of it.
113
+
114
+
<div class="example">
115
+
In the following example, the text would be green:
116
+
117
+
<pre>
118
+
@scope aside {
119
+
p { color: green; }
120
+
}
121
+
aside#sidebar p { color: red; }
122
+
</pre>
123
+
</div>
124
+
125
+
126
+
<h3 id='scoping-context'>
127
+
Querying the Scoping Context</h3>
128
+
129
+
<h4 id='scope-pseudo'>
130
+
Selecting the Scoping Root: '':scope'' pseudo-class</h4>
131
+
132
+
In a scoped stylesheet,
133
+
the '':scope'' pseudo-class,
134
+
defined in [[SELECTORS4]],
135
+
matches the <a>scoping root</a>.
136
+
137
+
<h4 id='scope-content-pseudo'>
138
+
Selecting Outside the Scope: '':scope-context()'' pseudo-class</h4>
139
+
140
+
<div class='issue'>
141
+
This would be defined similarly to '':host-context()'',
142
+
but matching the ancestors of the <a>scoping root</a> instead.
143
+
144
+
However, since for scoped stylesheets you may want the ability to match complex selectors against the outside tree,
145
+
rather than a single compound selector,
146
+
we may want to instead use a more general mechanism that doesn't syntactically invert the order of tree elements.
147
+
148
+
Possible ideas:
149
+
150
+
<pre>
151
+
:scope-context(<<selector>>) div {...}
152
+
scope(<<selector>>) div {...}
153
+
\scope <<selector>>\ div {...}
154
+
<<selector>> \scope\ div {...}
155
+
</pre>
156
+
157
+
This functionality would replace ''@global'', which is a poor excuse for a selector.
0 commit comments