[css-cascade-6] Scoping the subject of a `:has()` selector
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
This issue was raised on social media 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.
It seems like this might be solvable (though not elegant) with a :scope-end selector (already proposed in another thread) that matches lower boundary elements:
@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 heuristic special case, but it really gets to the point of the issue. We want to know if the scope has something.
Other ideas?
The relevant spec text is:
Their selectors can only match elements that are in scope. (This only applies to the subject; the rest of the selector can match unrestricted.)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the scoped style rules section of CSS Cascade 6 and the linked issue 8617 about :scope-end. Use the linked CodePen to reproduce the scoping cases and compare the proposed :scope-has(), :scope-end, and :has() approaches. Done means the Working Group has chosen and specified a resolution for selecting scoped subjects.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100