Add a util to support querySelector with shadow DOM compatible.
This util meant to work as a polyfill for `$$` in polymer as `$$`
won't work in shadow DOM. But this util will only work when
selector is within one shadow host, won't work when selector
is crosing multiple shadow hosts.
Change-Id: Ie9e36dc3fb9c18c89aa1580ccf15523a7fa49c85
diff --git a/polygerrit-ui/app/scripts/util.js b/polygerrit-ui/app/scripts/util.js
index a6ada82..672c43f 100644
--- a/polygerrit-ui/app/scripts/util.js
+++ b/polygerrit-ui/app/scripts/util.js
@@ -95,5 +95,38 @@
return style;
};
+ /**
+ * Query selector on a dom element.
+ *
+ * This is shadow DOM compatible, but only works when selector is within
+ * one shadow host, won't work if your selector is crossing
+ * multiple shadow hosts.
+ *
+ */
+ util.querySelector = (el, selector) => {
+ let nodes = [el];
+ let element = null;
+ while (nodes.length) {
+ const node = nodes.pop();
+
+ // Skip if it's an invalid node.
+ if (!node || !node.querySelector) continue;
+
+ // Try find it with native querySelector directly
+ element = node.querySelector(selector);
+
+ if (element) {
+ break;
+ } else if (node.shadowRoot) {
+ // If shadowHost detected, add the host and its children
+ nodes = nodes.concat(Array.from(node.children));
+ nodes.push(node.shadowRoot);
+ } else {
+ nodes = nodes.concat(Array.from(node.children));
+ }
+ }
+ return element;
+ };
+
window.util = util;
})(window);
