[csswg-drafts] [css-cascade-6] Scoping the subject of a `:has()` selector (#9841)

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

== [css-cascade-6] Scoping the subject of a `:has()` selector ==
This issue was [raised on social media](https://hachyderm.io/@hi_mayank/111801080201900214) by @mayank99. The goal is to select a scope that has a given element _in scope_. However, since `@scope` only requires the 'subject' to be in-scope, and the contents of `has` are not selecting the subject, there is not currently any way to achieve this.

Here's [a code-pen for experimenting](https://codepen.io/miriamsuzanne/pen/bGZrmGx?editors=1100).

It seems like this might be solvable (though not elegant) with a `:scope-end` selector that matches lower boundary elements:

```css
@scope (my-scope) to (my-scope) {
  :scope:has(a:not(:scope-end a)) { … }
}
```

(You can get close to that solution by replacing `:scope-end` with `my-scope` - but it becomes fragile with further nesting.)

Since this issue seems specific to the `:has()` selector, the other approach might be changes on that end:

- Add a `:scope-has()` selector that does a scoped version of the same thing. It's clear and to the point, but maybe a bit of a special case?
- Resolve `:has()` differently when it's used on the `:scope()` selector. This is even more of a hueristic special case, but it really gets to the point of the issue. We want to know if the scope has something.

Other ideas?

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


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

Received on Tuesday, 23 January 2024 19:18:44 UTC