@@ -20,6 +20,7 @@ Informative Classes: ex
20
20
21
21
<pre class=link-defaults>
22
22
spec:dom; type:dfn; text:shadow tree
23
+ spec:dom; type:dfn; for:tree; text:root
23
24
spec:css-color-4; type:property; text:color
24
25
spec:css-values-3; type: value; text:ex
25
26
spec:css-conditional-3; type:at-rule; text:@media
@@ -233,27 +234,26 @@ Scoped Styles</h2>
233
234
234
235
A <dfn>scope</dfn> is a subtree or fragment of a document,
235
236
which can be used by selectors for more targeted matching.
236
- [=Scopes=] are described in CSS through a combination of two selector lists:
237
-
238
- * The <dfn><<scope-start>></dfn> is a <<forgiving-selector-list>> .
239
- Each element matched by <<scope-start>> is a [=scoping element=] ,
240
- creating a scope with itself as the [=scoping root=] .
241
- * The <dfn><<scope-end>></dfn> is a <<forgiving-selector-list>>
242
- that is [=scoped selector|scoped=] by the <<scope-start>> selector,
243
- with the [=scoping roots=] as [=:scope elements=] .
244
- Each element matched by <<scope-end>> is a [=scoping limit=] .
245
- The <dfn>scoping limit</dfn> elements define the lower bounds of a scope,
246
- so that [=scoped selectors=] are not able to match
247
- any [=scoping limit=] elements,
248
- or any elements nested within them.
249
-
250
- Each resulting [=scope=] includes a [=scoping root=] and all its descendants,
251
- up to any [=scoping limit=] elements. [=Scoping limit=] elements and
252
- their descendants are not included in the [=scope=] .
253
237
254
- [=Pseudo-elements=] cannot be [=scoping roots=] or [=scoping limits=] ;
255
- they are invalid both within <<scope-start>> and <<scope-end>> .
256
-
238
+ A [=scope=] can be formed by determining:
239
+
240
+ * The [=scoping root=] [=node=] ,
241
+ which acts as the upper bound of the scope,
242
+ and optionally:
243
+ * The <dfn>scoping limit</dfn> elements,
244
+ which act as the lower bounds.
245
+
246
+ An element is <dfn>in scope</dfn> if:
247
+
248
+ * It is an [=inclusive descendant=] of the [=scoping root=] , and
249
+ * It is not an [=inclusive descendant=] of a [=scoping limit=] .
250
+
251
+ Note: Only <em> elements</em> can be [=in scope=] ,
252
+ however the '':scope'' pseudo-class can match non-elements
253
+ when it is not the [=subject=] of a selector.
254
+
255
+ [=Scopes=] are described in CSS using the ''@scope'' rule.
256
+
257
257
Note: In contrast to [[CSS-SCOPING-1#shadow-dom|Shadow Encapsulation]] ,
258
258
which describes a persistent one-to-one relationship in the DOM
259
259
between a [=shadow host=] and its nested [=shadow tree=] ,
@@ -351,17 +351,49 @@ Scoping Styles: the ''@scope'' rule</h4>
351
351
352
352
The syntax of the ''@scope'' rule is:
353
353
354
- <pre class=' prod' >
355
- @scope (<<scope-start>> ) [to (<<scope-end>> )]? {
354
+ <pre class=" prod def" >
355
+ @scope [ (<<scope-start>> )]? [to (<<scope-end>> )]? {
356
356
<<stylesheet>>
357
357
}
358
358
</pre>
359
359
360
+ where:
361
+
362
+ <pre class="prod def">
363
+ <dfn><<scope-start>></dfn> = <<forgiving-selector-list>>
364
+ <dfn><<scope-end>></dfn> = <<forgiving-selector-list>>
365
+ </pre>
366
+
367
+ A ''@scope'' rule which specifies a <<scope-start>>
368
+ produces a number of <dfn>explicit scopes</dfn> as follows:
369
+
370
+ * For each element matched by <<scope-start>> ,
371
+ create a [=scope=] using that element as the [=scoping root=] .
372
+ * For each [=scope=] created by the above:
373
+ * Collect all elements that are [=in scope=]
374
+ and that match <<scope-end>> ,
375
+ using the [=scoping root=] as the '':scope'' element, then
376
+ * Set those elements as the [=scoping limits=] .
377
+
378
+ [=Pseudo-elements=] cannot be [=scoping roots=] or [=scoping limits=] ;
379
+ they are invalid both within <<scope-start>> and <<scope-end>> .
380
+
381
+ A ''@scope'' rule which does not specify a <<scope-start>>
382
+ produces a single <dfn>implicit scope</dfn> as follows:
383
+
384
+ * The [=scoping root=] is the [=parent element=] of the [=owner node=]
385
+ of the stylesheet where the ''@scope'' rule is defined.
386
+ If no such element exist,
387
+ then the [=scoping root=] is the [=root=] of the containing [=node tree=] .
388
+ * The [=scoping limits=] are unset;
389
+ [=implicit scopes=] do not have lower bounds.
390
+
360
391
The ''@scope'' [=at-rule=] has three primary effects
361
392
on the [=style rules=] in its <<stylesheet>> :
362
393
363
- * [=scoped selectors|Selectors are scoped=] to the given [=scope=] ,
364
- with the [=:scope element=] being the [=scoping root=] .
394
+ * Selectors can only match elements that are [=in scope=] .
395
+ This only applies to the [=subject=] ;
396
+ the rest of the selector can match unrestricted.
365
397
* Selectors are given the added specificity of
366
398
the most specific [=complex selector=] in the <<scope-start>> argument.
367
399
@@ -562,6 +594,9 @@ Changes since the 21 December 2021 First Public Working Draft</h3>
562
594
Significant changes since the
563
595
<a href="https://www.w3.org/TR/2021/WD-css-cascade-6-20211221/">21 December 2021 First Public Working Draft</a> include:
564
596
597
+ * Added [=implicit scopes=] .
598
+ (<a href="https://github.com/w3c/csswg-drafts/issues/6606">Issue 6606</a> )
599
+
565
600
* Disallowed [=pseudo-elements=] in the ''@scope'' prelude.
566
601
(<a href="https://github.com/w3c/csswg-drafts/issues/7382">Issue 7382</a> )
567
602
0 commit comments