[csswg-drafts] [css-nesting] [css-cascade-6] Clarify behavior of `@scope` with nesting (#9370)

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

== [css-nesting] [css-cascade-6] Clarify behavior of `@scope` with nesting ==
The CSS nesting spec has the following [example](https://drafts.csswg.org/css-nesting/#nesting-at-scope):

```css
.parent {
  color: blue;

  @scope (& > .scope) to (& .limit) {
    & .content {
      color: red;
    }
  }
}
```

which it says is equivalent to:

```css
.parent { color: blue; }
@scope (.parent > .scope) to (.parent > .scope .limit) {
  .parent > .scope .content {
    color: red;
  }
}
```

However, according to my reading of css-cascade-6, this seems slightly incorrect.

> By default, selectors in a [scoped style rule](https://drafts.csswg.org/css-cascade-6/#scoped-style-rules) are [relative selectors](https://drafts.csswg.org/selectors-4/#relative-selector), with the [scoping root](https://drafts.csswg.org/selectors-4/#scoping-root) and [descendant combinator](https://drafts.csswg.org/selectors-4/#descendant-combinator) implied at the start.

Following this, it would seem that showing `.parent > .scope` in the nested style rule would be incorrect and redundant, since the rule would already have an implicit `:scope ` prefix. Would it be more correct to show this in the example instead:

```css
.parent { color: blue; }
@scope (.parent > .scope) to (.parent > .scope .limit) {
  :scope .content {
    color: red;
  }
}
```

where `:scope` is equal to `.parent > .scope` as defined in the rule's `<scope-start>`?

Maybe I'm reading it incorrectly. It's sorta confusing that this is split between two different specifications.

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


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

Received on Sunday, 17 September 2023 21:24:53 UTC