[csswg-drafts] [css-cascade-6] `&` matching inside the `@scope`, and its interaction with `:scope` (#9740)

kizu has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade-6] `&` matching inside the `@scope`, and its interaction with `:scope` ==
In some way, this is a follow-up to the https://github.com/w3c/csswg-drafts/issues/9739, but I felt that this is a different case that could be discussed separately.

While testing different ways scopes interact when being nested, and how `&` and `:scope` behave inside, I found one place that should either be clarified in the specs, or maybe changed.

I'm talking about two parts in particular.

From [2.5.1. Effects of `@scope`](https://drafts.csswg.org/css-cascade-6/#scope-effects)

> The [`&`](https://drafts.csswg.org/css-nesting-1/#selectordef-) selector is defined to represent the selector representing the scoping root (the [`<scope-start>`](https://drafts.csswg.org/css-cascade-6/#typedef-scope-start) selector), or else `:scope` if no selector was specified.

From [2.5.3. Scoped Style Rules](https://drafts.csswg.org/css-cascade-6/#scoped-rules)

> Any selector in the [`<relative-selector-list>`](https://drafts.csswg.org/selectors-4/#typedef-relative-selector-list) that does not start with a [combinator](https://drafts.csswg.org/selectors-4/#selector-combinator) but does [contain the nesting selector](https://drafts.csswg.org/css-nesting-1/#contain-the-nesting-selector) or the [`:scope`](https://drafts.csswg.org/selectors-4/#scope-pseudo) selector, is interpreted as a non-[relative selector](https://drafts.csswg.org/selectors-4/#relative-selector)

The short version of my question: Should `&` represent **only** the scoping root selector, **or** both the selector and `:scope`?

The reasoning behind my question: right now, there is a difference when we use `&` or `&:scope` inside a scope.

When we have only `&`, we, essentially, lose the `:scope` completely, making it so the `&` will match _any_ similar node, not necessarily if it is *the* scoping root node.

Here is a CodePen demonstrating the current behavior: https://codepen.io/kizu/pen/GReRRxQ

So, the way it works now, the `&` and `:scope` are different in two ways:

1. `:scope` has a specificity of a pseudo-class, and `&` has a specificity of the scoping root selector.
2. The `:scope` matches the scoping root node, but `&` matches only the scoping root selector itself.

The current behavior can be potentially useful, but I'm struggling to come up with actual use cases. We can also always add an explicit `:scope` and write `&:scope` to get both effects (or `&:where(:scope)` if we'd want to only have the specificity of the scoping root selector).

However, there is a chance this difference could result in author confusion and mistakes, as it is very easy to assume that the specificity difference is _the only_ difference.

If this behavior is to stay, I think the specs should be more explicit in how they explain these differences.

Otherwise, I think it might be better to change the `&` to be the same as `:scope` — representing the scoping root **node**, but with a different specificity.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9740 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 21 December 2023 15:12:02 UTC