Skip to content

Commit 086f663

Browse files
andruudmirisuzanne
andauthored
[css-cascade-6] Add implicit scopes (#8463)
* [css-cascade-6] Add implicit scopes Resolves #6606. * Allow lower bounds when root is implicit --------- Co-authored-by: Miriam Suzanne <miriam@oddbird.net>
1 parent 81c1880 commit 086f663

File tree

1 file changed

+59
-24
lines changed

1 file changed

+59
-24
lines changed

css-cascade-6/Overview.bs

+59-24
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ Informative Classes: ex
2020

2121
<pre class=link-defaults>
2222
spec:dom; type:dfn; text:shadow tree
23+
spec:dom; type:dfn; for:tree; text:root
2324
spec:css-color-4; type:property; text:color
2425
spec:css-values-3; type: value; text:ex
2526
spec: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

Comments
 (0)