[csswg-drafts] [css-cascade-6] Scope Proximity & Sibling-Element Hops (#10299)

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

== [css-cascade-6] Scope Proximity & Sibling-Element Hops ==
In describing [scope proximity](https://drafts.csswg.org/css-cascade-6/#cascade-proximity) in terms of cascade precedence, the spec mentions:

> When comparing declarations that appear in style rules with different [scoping roots](https://drafts.csswg.org/selectors-4/#scoping-root), then the declaration with the fewest generational **or sibling-element** hops between the scoping root and the [scoped style rule](https://drafts.csswg.org/css-cascade-6/#scoped-style-rules) [subject](https://drafts.csswg.org/selectors-4/#selector-subject) wins.

Elements being [in scope](https://drafts.csswg.org/css-cascade-6/#in-scope) is a purely ancestor-descendant affair, so the mention of sibling hops doesn't make sense to me. Sibling of a scope root would, by definition, be not in scope. One possible interpretation would be to count sibling **and** ancestor hops for the matched selector, but I'm not sure how useful/intuitive that is. Also, I don't think any supported browser does that, given the below example always uses green:

```
<!DOCTYPE html>
<style>
@scope(.scope-start-1) {
  .styled {
    color: blue;
  }
}

@scope(.scope-start-2) {
  .sibling + .sibling + .sibling + .sibling + .styled {
    color: green;
  }
}
</style>
<div class="scope-start-1">
  <div class="scope-start-2">
    <div class="sibling"></div>
    <div class="sibling"></div>
    <div class="sibling"></div>
    <div class="sibling"></div>
    <div class="styled">What color?</div>
  </div>
</div>
```

In short - Should the reference to "sibling hops" be removed?

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


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

Received on Thursday, 9 May 2024 13:17:27 UTC