feat(shadow-dom): getClosestElement to traverse up the shadow root …

…host

src/queries.ts

@@ -22,3 +22,18 @@ export function closest(
 
     return null;
 }
+
+/**
+ * `Node.parentNode` as method which traverses tree up when `ShadowRoot` is encountered
+ */
+export function getParentNode(node: Node): Node['parentNode'] {
+    if (node.parentNode || !getConfig().includeShadowDom) {
+        return node.parentNode;
+    }
+
+    if (isShadowRoot(node)) {
+        return node.host;
+    }
+
+    return null;
+}

src/utils.ts

@@ -41,8 +41,10 @@ export function getClosestElement(node: Node): Element | null {
         return node;
     }
 
-    if (node.parentNode) {
-        return getClosestElement(node.parentNode);
+    const parentNode = queries.getParentNode(node);
+
+    if (parentNode) {
+        return getClosestElement(parentNode);
     }
 
     return null;

test/utils.test.ts

@@ -1,7 +1,58 @@
 import { configure } from '../src/config';
-import { getTextContent, isInDOM } from '../src/utils';
+import { getClosestElement, getTextContent, isInDOM } from '../src/utils';
 import { appendToRoot } from './utils';
 
+describe('getClosestElement', () => {
+    test('returns itself when element', () => {
+        const element = document.createElement('div');
+
+        expect(getClosestElement(element)).toBe(element);
+    });
+
+    test('returns parent element of text node', () => {
+        const element = document.createElement('div');
+        const text = document.createTextNode('Hello world');
+        element.appendChild(text);
+
+        expect(getClosestElement(text)).toBe(element);
+    });
+
+    test('returns null when node has no parent', () => {
+        const text = document.createTextNode('Hello world');
+
+        expect(getClosestElement(text)).toBe(null);
+    });
+
+    test('returns null when node has parentless node as parent', () => {
+        const parentNode = { parentNode: null } as Node;
+        const text = { parentNode } as Node;
+
+        expect(getClosestElement(text)).toBe(null);
+    });
+
+    test('returns parent of element inside shadow root', () => {
+        configure({ includeShadowDom: true });
+
+        const text = document.createTextNode('Hello world');
+        const root = document.createElement('div');
+
+        root.attachShadow({ mode: 'open' }).appendChild(text);
+
+        expect(getClosestElement(text)).toBe(root);
+    });
+
+    test('does not traverse shadow dom when config.includeShadowDom is false', () => {
+        configure({ includeShadowDom: false });
+
+        const text = document.createTextNode('Hello world');
+        const root = document.createElement('div');
+
+        root.attachShadow({ mode: 'open' }).appendChild(text);
+
+        expect(getClosestElement(text)).toBe(null);
+    });
+});
+
 describe('getTextContent', () => {
     let root: HTMLElement;