[csswg-drafts] [css-scoping][css-cascade] :scope in shadowy prelude-less @scope matches nothing (#9178)

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

== [css-scoping][css-cascade] :scope in shadowy prelude-less @scope matches nothing ==
A prelude-less `@scope` rule, e.g. `@scope { ... }` scopes the styles to the [root of the containing tree](https://drafts.csswg.org/css-cascade-6/#scope-limits) if the owner element has no parent element. Example:

```html
<div class=host>
  <template shadowrootmode=open>
    <style>
      @scope {
        /* :scope is the _shadow root_ */
      }
    </style>
  </template>
</div>
```

However, the shadow root can't be matched by `:scope`, because it's replaced by the shadow host for selector purposes. [CSS Scoping 1](https://drafts.csswg.org/css-scoping-1/#host-element-in-tree):

> For the purpose of Selectors, a [shadow host](https://dom.spec.whatwg.org/#element-shadow-host) also appears in its [shadow tree](https://dom.spec.whatwg.org/#concept-shadow-tree), with the contents of the shadow tree treated as its children. (In other words, the shadow host is treated as replacing the [shadow root](https://dom.spec.whatwg.org/#concept-shadow-root) node.)

This makes prelude-less `@scope` rules that exist directly beneath a shadow root mostly non-usable, since the inner selectors either have `:scope` in them somewhere, or get an implicit `:scope` prepended if not.

Not sure what the best fix is here ...

@tabatkins

---

I noticed that https://drafts.csswg.org/css-scoping-1/#shadow-gloss contradicts the other part of the spec:

> The elements in a [shadow tree](https://dom.spec.whatwg.org/#concept-shadow-tree) are not [descendants](https://dom.spec.whatwg.org/#concept-tree-descendant) of the [shadow host](https://dom.spec.whatwg.org/#element-shadow-host) in general (including for the purposes of Selectors like the [descendant combinator](https://drafts.csswg.org/selectors-4/#descendant-combinator)). However, the shadow tree, when it exists, is used in the construction of the [flattened element tree](https://drafts.csswg.org/css-scoping-1/#flat-tree), which CSS uses for all purposes after Selectors (including inheritance and box construction).

But since this doesn't match browser implementations, I assume it's a remnant of a previous spec version.



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


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

Received on Friday, 11 August 2023 12:21:07 UTC