[csswg-drafts] [selectors-4] About shadow-including descendants

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

== [selectors-4] About shadow-including descendants ==

For three pseudo-classes ([`:hover`](https://drafts.csswg.org/selectors-4/#the-hover-pseudo), [`:active`](https://drafts.csswg.org/selectors-4/#the-active-pseudo) and [`:focus-within`](https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo)) the spec has a similar text:
> An element also matches :hover if one of its shadow-including descendants matches :hover.

The reference to [*shadow-including descendants*](https://dom.spec.whatwg.org/#concept-shadow-including-descendant) was [introduced back in April 2016 by @tabatkins](https://github.com/w3c/csswg-drafts/commit/eb5e7c1b1546305bda16c6b531bc369de4bc0c81).

However it seems it doesn't match the behavior in either Chrome and Safari.
Using an example from @rune-opera:
```html
  <div id="host">
    <span>Hover me</span>
  </div>
  <script>
    host.attachShadow({mode:"open"}).innerHTML = "<style>#shadowDiv:hover { border: 5px solid green }</style><div id='shadowDiv'><slot></slot></div>";
  </script>
```

In both Blink and WebKit a green border appears on the `shadowDiv` when you hover the `<span>`. This seems the right behavior from the user point of view.
However, the `<span>` is not a shadow-including descendant of the `shadowDiv`. Shouldn't the spec mention the *[flat tree](https://drafts.csswg.org/css-scoping/#flat-tree)* instead?

This discussion started on the [`blink-dev` thread about `:focus-within`](https://groups.google.com/a/chromium.org/d/msg/blink-dev/V3RNBhQelSg/nGRIWjy6CgAJ).

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

Received on Tuesday, 28 March 2017 13:39:24 UTC