[selectors-4] About shadow-including descendants

[mrego]

For three pseudo-classes (:hover, :active and :focus-within) 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 was introduced back in April 2016 by @tabatkins.

However it seems it doesn't match the behavior in either Chrome and Safari.
Using an example from @rune-opera:

  <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 instead?

This discussion started on the blink-dev thread about :focus-within.

[ghost]

Note that the Blink implementation walks the layout tree for :hover/:active, not the flat tree, so there can be subtleties.

I've reported https://crbug.com/705984 for display:contents. Firefox also has an invalidation problem with :hover and display:contents https://bugzilla.mozilla.org/show_bug.cgi?id=1351339

[ghost]

cc editors @tabatkins @fantasai

[tabatkins]

Hm, I didn't realize that "shadow-including descendants" doesn't include that case. That's annoying. The intention is definitely that they run on the flat tree.

[tabatkins]

Suggested edit (for all of the relevant classes, and fixing #1141 too):

An element also matches '':hover''
if one of its descendants in the flat tree
(including non-element nodes, such as text nodes)
matches the above conditions.

Sound good?

[mrego]

Yeah, it sounds good. Thanks @tabatkins!

[mrego]

So this has just been fixed by @tabatkins at 9d0024d

Thanks!