test: Add support for querying shadow DOM

[martinpitt]

Add a querySelectorAll() variant which can transparently pierce and traverse shadow DOMs without having to know their structure (i.e. doing selectors piece-wise and iterating on their .shadowRoot attribute).

As this is more expensive than standard querySelector()`, only use it if the page actually contains any shadow root.

This makes it a lot more convenient to write tests for pages which use web components, like https://patternflyelements.org.

---

cockpit-project/starter-kit#1028 makes use of that.

TODO:

• This makes queries much slower. Provide an opt-in.

[martinpitt]

Apparently this does not work in Firefox

Nope, it's fine. It was just a packaging bug (forgot to include the new npm module into the tarball)

[martinpitt]

The previous commit f11e9e8 always used this "deep" querySelector, and it worked. But I figure it'll be slower, so I reworked this to detect the presence of shadow DOMs, and only use the deep one if there are any.

I adjusted cockpit-project/starter-kit#1028 to pull in this new version.

[jelly]

This seems pretty expensive? Likely it is more performance to write:

for (int x = 0 ; i < querySelector('*').length; i++ )
    if (el.shadowRoot)
         return true;

Alternatively:

let has_shadow_dom = false
document.querySelectorAll('*').forEach(element => {if (element.shadowRoot) { has_shadow_dom = true ;break; }})

Alternatively document.body.contains() would I suppose "work" but requires you to run it every time.

[martinpitt]

Right, I rewrote it using find(). Note that this isn't super-critical, it just runs once for every frame.

I don't see how .contains() could help? that just checks if a node is a child of another node, but I don't have any child node here.