[css-scoping] :has-shadow pseudo-class

[LeaVerou]

It is currently impossible to detect elements with a shadow root without direct traversal and checking element.shadowRoot for every single element, which is costly.

This is useful for a variety of DOM traversal use cases, so they can identify which elements they need to do extra work on. For example fetching elements of a particular type across the entire flattened tree, or even cloning a subtree that may contain declarative shadow roots (which disappear with regular cloning).

It’s probably pretty easy to add a pseudo-class for this that matches if the element has an open shadow root. Not sure if matching a closed shadow root is desirable. Combined with #11001, this becomes even more powerful.

[sorvell]

It probably makes sense that this would not match closed shadowRoots? If it did, it would leak that detail, which might be unacceptable. It'd also match built-ins with shadowRoot which is likely undesirable.

And for comparison to the slower, more verbose code one might have now:

• today: Array.from(document.querySelectorAll('*')).filter(n => n.shadowRoot)
• with this: document.querySelectorAll(':has-shadow')