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

@LeaVerou yeah, I've been working on this today, and came to a similar conclusion. 

- `:to(.c)` doesn't work alone because it doesn't match anything
- But `:donut(.a / .c)` would have some potential

I put together a [codepen example](https://codepen.io/mirisuzanne/pen/jOVNJoj) as I was working. It's slightly different from your example, in that I do match the lower-boundary itself, but not descendants of the lower boundary. That's the proposed pattern, used by scoping tools today. 

You can also see some JS there. Given the ability to reference the root `element` with `:scope` in JS, `@scope (.a) to (.c) { * { ... } }` can be represented by `a.querySelectorAll(":not(:scope .c *)")`.

The `@scope` proposal would allow multiple lower-boundaries. I imagine that could be represented by chaining the pseudo-class?

```css
:donut(.a / .c):donut(.a / .x) {
  /* establish both .c and .x as lower boundaries */
}
```

That could also describe nested `@scope` rules, if we wanted to allow them.

> Aside: What does @scope (S) to (S) match, where S is any selector? Does it match nothing?

In my current proposal, lower boundary selectors would only match descendants of the scope, so:

```html
<s>
  <p>This is matched as part of the outer scope</p>
  <s> <!-- lower-boundary of outer scope, and root of inner scope -->
    <p>This is not part of the outer scope, but it does match as part of the inner scope</p>
  </s>
</s>
```

-- 
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-769411542