@@ -20,6 +20,7 @@ Informative Classes: ex
2020
2121<pre class=link-defaults>
2222spec:dom; type:dfn; text:shadow tree
23+ spec:dom; type:dfn; for:tree; text:root
2324spec:css-color-4; type:property; text:color
2425spec:css-values-3; type: value; text:ex
2526spec:css-conditional-3; type:at-rule; text:@media
@@ -233,27 +234,26 @@ Scoped Styles</h2>
233234
234235 A <dfn>scope</dfn> is a subtree or fragment of a document,
235236 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=] .
253237
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+
257257 Note: In contrast to [[CSS-SCOPING-1#shadow-dom|Shadow Encapsulation]] ,
258258 which describes a persistent one-to-one relationship in the DOM
259259 between a [=shadow host=] and its nested [=shadow tree=] ,
@@ -351,17 +351,49 @@ Scoping Styles: the ''@scope'' rule</h4>
351351
352352 The syntax of the ''@scope'' rule is:
353353
354- <pre class=' prod' >
355- @scope (<<scope-start>> ) [to (<<scope-end>> )]? {
354+ <pre class=" prod def" >
355+ @scope [ (<<scope-start>> )]? [to (<<scope-end>> )]? {
356356 <<stylesheet>>
357357 }
358358 </pre>
359359
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+
360391 The ''@scope'' [=at-rule=] has three primary effects
361392 on the [=style rules=] in its <<stylesheet>> :
362393
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.
365397 * Selectors are given the added specificity of
366398 the most specific [=complex selector=] in the <<scope-start>> argument.
367399
@@ -562,6 +594,9 @@ Changes since the 21 December 2021 First Public Working Draft</h3>
562594 Significant changes since the
563595 <a href="https://www.w3.org/TR/2021/WD-css-cascade-6-20211221/">21 December 2021 First Public Working Draft</a> include:
564596
597+ * Added [=implicit scopes=] .
598+ (<a href="https://github.com/w3c/csswg-drafts/issues/6606">Issue 6606</a> )
599+
565600 * Disallowed [=pseudo-elements=] in the ''@scope'' prelude.
566601 (<a href="https://github.com/w3c/csswg-drafts/issues/7382">Issue 7382</a> )
567602
0 commit comments