[csswg-drafts] [css-scoping] :host and descendant combinators.

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

== [css-scoping] :host and descendant combinators. ==
https://drafts.csswg.org/css-scoping/#host-selector says:

> The :host pseudo-class, when evaluated in the context of a shadow tree, matches the shadow tree’s shadow host. In any other context, it matches nothing.

And nothing else.

However, this testcase:

```html
<!doctype html>
<div id="host"><span>In host</span></div>
<script>
  let root = host.attachShadow({ mode: "open" });
  root.innerHTML = `
    <style>:host > span { color: red }</style>
    <style>div > span { background: red }</style>
    <span>In root</span>
  `;
</script>
```

Shows red (text, not background) both in WebKit and Blink.

This doesn't make much sense to me, though, I don't see anything in either css-scoping or selectors that specify this behavior.

This means that suddenly for selector-matching you always need to look at the parent element, except for some cases, where you may actually need to cross the shadow boundary, depending on the next selector is.

Could this be clarified? What is the expected behavior of this?

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

Received on Thursday, 8 March 2018 11:05:36 UTC