Re: [w3ctag/design-reviews] Early design review of light-DOM CSS Scope proposal (#593)

@LeaVerou I have not been able to find a reasonable way to handle this with existing selectors. Establishing the lower boundaries can be done very roughly with `:scope` but:

- we need a way to establish the "scoping element" (see below)
- the resulting syntax is quite bulky an non-obvious (`.selector .target:not(:scope :is(.list, .of, .boundaries) *)`)

There is currently no way to establish a scoping element in CSS. One proposal was to use the nesting syntax for that - but after some investigation, and conversations with @tabatkins, I don't think that's possible. The nesting syntax was explicitly designed to de-sugar into individual `:is()` selectors. This would require adding an entirely new meaning to nesting in CSS, that does not mesh simply or clearly with the current goals or approach of that feature.

However, I do think your proposal for a new donut selector is interesting. I included that in my (still exploratory) [Editor's Draft](https://drafts.csswg.org/css-cascade-6/#selectordef-in). With something like that, the selection logic of an `@scope` rule could also be de-sugared into those new selectors:

```css
/* these would select the same elements, without lower bounds */
@scope (.scope) { .target { … } }
.target:in(.scope) { … }
.scope.target, .scope .target { … }

/* these would select the same elements, with lower bounds */
@scope (.scope) to (.lower, .bounds) { .target { … } }
.target:in(.scope / .lower, .bounds) { … }
/* not possible with existing selectors */
```

Both `:in()` and `@scope` syntaxes still to-be-bikeshed, of course. This is just the current state of the proposal.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/593#issuecomment-920291268