fix: allow passing shadow root node to getClosestElement

Author: vursen

packages/component-base/src/dom-utils.js

@@ -74,7 +74,7 @@ export function getClosestElement(selector, node) {
     return null;
   }
 
-  return node.closest(selector) || getClosestElement(selector, node.getRootNode().host);
+  return node.closest?.(selector) || getClosestElement(selector, node.getRootNode().host);
 }
 
 /**

packages/component-base/test/dom-utils.test.js

@@ -45,7 +45,7 @@ describe('dom-utils', () => {
   });
 
   describe('getClosestElement', () => {
-    let element;
+    let element, node;
 
     const tag = defineCE(
       class ShadowElement extends HTMLElement {
@@ -63,28 +63,32 @@ describe('dom-utils', () => {
       },
     );
 
-    it('should return the closest element matching the selector within the shadow root', () => {
+    it('should return closest element matching selector within shadow root', () => {
       element = fixtureSync(`<${tag}></${tag}>`);
-      const node = element.shadowRoot.querySelector('.child');
+      node = element.shadowRoot.querySelector('.child');
       const expected = element.shadowRoot.querySelector('.parent-2');
       expect(getClosestElement('.parent', node)).to.equal(expected);
     });
 
-    it('should return the closest element matching the selector across the shadow root', () => {
+    it('should return closest element matching selector across shadow root', () => {
       element = fixtureSync(`<div class="wrapper"><${tag}></${tag}></div>`);
-      const node = element.querySelector(tag).shadowRoot.querySelector('.parent');
+
+      node = element.querySelector(tag).shadowRoot;
+      expect(getClosestElement('.wrapper', node)).to.equal(element);
+
+      node = element.querySelector(tag).shadowRoot.querySelector('.parent');
       expect(getClosestElement('.wrapper', node)).to.equal(element);
     });
 
     it('should return null when no closest element is found', () => {
       element = fixtureSync(`<${tag}></${tag}>`);
-      const node = element.shadowRoot.querySelector('.child');
+      node = element.shadowRoot.querySelector('.child');
       expect(getClosestElement('.not-existing-class', node)).to.be.null;
     });
 
-    it('should return the passed element if it matches the selector', () => {
+    it('should return passed element if it matches selector', () => {
       element = fixtureSync(`<${tag}></${tag}>`);
-      const node = element.shadowRoot.querySelector('.child');
+      node = element.shadowRoot.querySelector('.child');
       expect(getClosestElement('.child', node)).to.equal(node);
     });
   });