Re: [csswg-drafts] [css-scoping] Light-DOM "slots" (donut holes within donuts) (#6574)

The spec already works in the way you describe as "recursive". A single scope description (`<<scope-start>>` and optional `<<scope-end>>` selectors) will create **multiple nested scopes on the page**. For every element that is matched by the "from clause" (`<<scope-start>>`), that element becomes the root `:scope` for it's own subtree, which continues until any lower boundaries are encountered. So, if the framework is generating classes in the way you describe:

```html
<div class="outer">Outer</div>
<div class="inner">
  <div>Inner</div>
  <div class="outer">Outer (slotted)</div>
  <div>Inner</div>
</div>
<div class="outer">Outer</div>
```

There are three "outer" scopes created, one for each instance of the `.outer` class, and each scope applies to itself and any descendants, until the `.inner` class is reached _from that starting point_. 

Currently, the spec _does not include_ any way for scoped selectors to "cross the lower boundary". The boundary is there to prevent exactly that behavior, so selectors that are meant to apply more deeply should not be in a scope with lower boundaries. In that case you would want a second scope with the same root, but without lower boundaries. Unlike most tools, my proposal does not impose a single-scope-per-dom-fragment. So it may be true that the framework wants to scope some selectors differently from others -- some with and some without lower boundaries.

---

This does raise a slightly different issue that I think we need to clarify. It might be a mistake for the spec to say that `:scope` is prepended as an ancestor to scoped selectors, unless otherwise used in the selector. The difference being:

```css
@scope (.my-scope) {
  .select { … }
}
```

Does this behave like…
1. `.my-scope .select` -- only selecting nested instances (current spec)
2. `.my-scope.select` as well as `.my-scope .select` -- selecting any match that is in-scope, including the scope root (my initial intent)

That becomes important for e.g. `.red div` in this resulting html:

```html
<div class="scope red">
  <div class="slot">
    <p class="scope">Red</p>
  </div>
</div>
```

Then:

```css
@scope (.scope) to (.slot) {
  .red p {
    /* not a match if we assume ":scope .red p" (option 1) */
    /* matched if we allow any ".red p" that is also in a ".scope" context (option 2) */
  }
}
```


-- 
GitHub Notification of comment by mirisuzanne
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6574#issuecomment-912145352 using your GitHub account


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

Received on Friday, 3 September 2021 00:10:08 UTC