|
| 1 | +/** |
| 2 | + * Recursively queries the DOM for an element, traversing through shadow DOMs. |
| 3 | + * |
| 4 | + * @param {Element|ShadowRoot} lookupStartNode The node or shadow root to start the lookup from. |
| 5 | + * @param {string[]} path An array of CSS selectors representing the path to the target element. |
| 6 | + * @returns {Element|null} The target element if found, otherwise null. |
| 7 | + */ |
| 8 | +export function recursivelyQuerySelector(lookupStartNode, path) { |
| 9 | + lookupStartNode = lookupStartNode.shadowRoot ?? lookupStartNode; |
| 10 | + const target = path.reduce((root, selector) => { |
| 11 | + const node = root.querySelector(selector); |
| 12 | + return node.shadowRoot ?? node; |
| 13 | + }, lookupStartNode); |
| 14 | + |
| 15 | + return target; |
| 16 | +} |
| 17 | + |
| 18 | +/** |
| 19 | + * Retrieves a single DOM element, optionally traversing through shadow DOMs to a specified path before the final selection. |
| 20 | + * |
| 21 | + * @param {string} selector The CSS selector for the desired element. |
| 22 | + * @param {string[]} [path=[]] An optional array of CSS selectors to reach the desired shadowRoot or parent element. |
| 23 | + * @param {Element|ShadowRoot} [lookupStartNode=document] The starting node for the lookup. |
| 24 | + * @returns {Element|null} The found element, or null if not found. |
| 25 | + */ |
| 26 | +export function getElement(selector, path = [], lookupStartNode = document) { |
| 27 | + const element = recursivelyQuerySelector(lookupStartNode, path).querySelector(selector); |
| 28 | + return element; |
| 29 | +} |
| 30 | + |
| 31 | +/** |
| 32 | + * Retrieves all DOM elements matching a selector, optionally traversing through shadow DOMs to a specified path before the final selection. |
| 33 | + * |
| 34 | + * @param {string} selector The CSS selector for the desired elements. |
| 35 | + * @param {string[]} [path=[]] An optional array of CSS selectors to reach the desired shadowRoot or parent element. |
| 36 | + * @param {Element|ShadowRoot} [lookupStartNode=document] The starting node for the lookup. |
| 37 | + * @returns {Element[]} An array of found elements. |
| 38 | + */ |
| 39 | +export function getAllElements(selector, path = [], lookupStartNode = document) { |
| 40 | + const elements = Array.from(recursivelyQuerySelector(lookupStartNode, path).querySelectorAll(selector)); |
| 41 | + return elements; |
| 42 | +} |
| 43 | + |
| 44 | +export function forceLayout(body, layoutMode = "getBoundingRectAndElementFromPoint") { |
| 45 | + body ??= document.body; |
| 46 | + const rect = body.getBoundingClientRect(); |
| 47 | + switch (layoutMode) { |
| 48 | + case "getBoundingRectAndElementFromPoint": |
| 49 | + return document.elementFromPoint((rect.width / 2) | 0, (rect.height / 2) | 0); |
| 50 | + case "getBoundingClientRect": |
| 51 | + return rect.height; |
| 52 | + default: |
| 53 | + throw Error(`Invalid layoutMode: ${layoutMode}`); |
| 54 | + } |
| 55 | +} |
0 commit comments