Skip to content

Commit dbf2140

Browse files
authored
[css-nesting-1][css-cascade-6] Scoped '&' behaves like :where(:scope) (#12914)
Resolves #9740.
1 parent c548a9a commit dbf2140

File tree

2 files changed

+20
-25
lines changed

2 files changed

+20
-25
lines changed

css-cascade-6/Overview.bs

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -314,11 +314,7 @@ Effects of ''@scope''</h4>
314314
the ''@scope'' rule’s [=scoping root=],
315315
including the [=featureless=] [=shadow host=]
316316
when that host is the [=scoping root=].
317-
The ''&'' selector is defined to represent
318-
the selector representing the [=scoping root=]
319-
(the <<scope-start>> selector),
320-
or else '':scope'' if no selector was specified.
321-
317+
* The ''&'' selector is defined to behave as <code>:where(:scope)</code>.
322318
* The [=cascade=] prioritizes declarations
323319
with a [=scope proximity|more proximate=] [=scoping root=],
324320
regardless of specificity or order of appearance
@@ -518,19 +514,11 @@ Scoped Style Rules</h4>
518514
}
519515
</pre>
520516

521-
While the '':scope'' or ''&'' selectors
522-
can both refer to the [=scoping root=],
523-
they have otherwise different meanings in this context:
524-
525-
: Differences in selector matching
526-
:: The '':scope'' selector will only match the [=scoping root=] itself,
527-
while the ''&'' selector is able to match any element
528-
that is matched by the <<scope-start>> selector list.
529-
: Differences in selector specificity
530-
:: The '':scope'' selector has a specificity
531-
equal to other pseudo-classes,
532-
while the ''&'' selector has the specificity
533-
equal to the most specific selector in <<scope-start>>.
517+
Both the '':scope'' and ''&'' selectors
518+
match the [=scope root=],
519+
but with different [=specificity=]:
520+
'':scope'' has as [=specificity=] of (0,1,0),
521+
whereas ''&'' has a [=specificity=] of 0.
534522
</div>
535523

536524
<h4 id="scope-limits">
@@ -773,6 +761,9 @@ Changes since the 21 March 2023 Working Draft</h3>
773761
Significant changes since the
774762
<a href="https://www.w3.org/TR/2023/WD-css-cascade-6-20230321/">21 March 2023 Working Draft</a> include:
775763

764+
* Defined ''&'' to behave like <code>:where(:scope)</code>.
765+
(<a href="https://github.com/w3c/csswg-drafts/issues/9740">Issue 9740</a>)
766+
776767
* Allowed [=declarations=] directly within ''@scope''.
777768
(<a href="https://github.com/w3c/csswg-drafts/issues/10389">Issue 10389</a>)
778769

css-nesting-1/Overview.bs

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -763,11 +763,6 @@ Nested ''@scope'' Rules</h4>
763763
refers to the elements matched
764764
by the nearest ancestor style rule.
765765

766-
For the purposes of the style rules in its body
767-
and its own <<scope-end>> selector,
768-
the ''@scope'' rule is treated as an ancestor style rule,
769-
matching the elements matched by its <<scope-start>> selector.
770-
771766
<div class=example>
772767
That is, the following code:
773768

@@ -787,14 +782,19 @@ Nested ''@scope'' Rules</h4>
787782

788783
<pre highlight=css>
789784
.parent { color: blue; }
790-
@scope (.parent > .scope) to (.parent > .scope .limit) {
791-
.parent > .scope .content {
785+
@scope (.parent > .scope) to (:where(:scope) .limit) {
786+
:where(:scope) .content {
792787
color: red;
793788
}
794789
}
795790
</pre>
796791
</div>
797792

793+
<div class=note>
794+
The ''&'' selector behaves like <code>:where(:scope)</code>
795+
in ''@scope'' rules.
796+
</div>
797+
798798
<!-- Big Text: mixing
799799

800800
█ █ ████ █ █ ████ █ █▌ ███▌
@@ -1344,6 +1344,10 @@ will collapse into a single rule when serialized and parsed again.
13441344
Significant changes since the
13451345
<a href="https://www.w3.org/TR/2023/WD-css-nesting-1-20230214/">Feb 14, 2023 Working Draft</a>:
13461346

1347+
* The ''<scope-start>'' selector of a ''@scope'' rule
1348+
no longer acts as the parent rule for nesting.
1349+
(<a href="https://github.com/w3c/csswg-drafts/issues/9740">Issue 9740</a>)
1350+
13471351
* Clarified that the [=nesting selector=] is allowed to match featureless elements.
13481352

13491353
* Switched ''&div'' back to being invalid;

0 commit comments

Comments
 (0)