test: Add support for querying shadow DOM

test/common/test-functions.js

@@ -4,12 +4,38 @@
  * These are routines used by our testing code.
  */
 
+/* Detect if we have any shadow DOM */
+window.__haveShadowDom = function() {
+    if (window.__haveShadowDomResult === undefined)
+        window.__haveShadowDomResult = !!Array.from(document.querySelectorAll('*')).find(el => el.shadowRoot);
+
+    return window.__haveShadowDomResult;
+};
+
+// Like querySelectorAll(), but traverses shadow DOM
+window.querySelectorAllDeep = function(query, element) {
+    const result = Array.from(
+        element.shadowRoot
+            ? element.shadowRoot.childNodes
+            : element.nodeName === 'SLOT' ? element.assignedElements() : element.childNodes,
+    )
+            .filter(element => element instanceof Element)
+            .map(element => window.querySelectorAllDeep(query, element))
+            .flat();
+
+    if (element.matches?.(query))
+        result.push(element);
+    return result;
+};
+
 window.ph_select = function(sel) {
     if (sel.includes(":contains(")) {
         if (!window.Sizzle) {
             throw new Error("Using ':contains' when window.Sizzle is not available.");
         }
         return window.Sizzle(sel);
+    } else if (window.__haveShadowDom()) {
+        return window.querySelectorAllDeep(sel, document);
     } else {
         return Array.from(document.querySelectorAll(sel));
     }