feat: considerations for elements within ShadowRoot

Author: tbiethman

src/index.js

@@ -248,7 +248,11 @@ export default function unique( el, options={} ) {
     if (isUniqueSelector) {
       return maybeUniqueSelector
     }
-    currentElement = currentElement.parentNode
+
+    // Using parentElement here (rather than parentNode) to
+    // filter out any document/document fragment nodes that may
+    // be ancestors to elements within Shadow DOM trees.
+    currentElement = currentElement.parentElement
    }
 
   return null;

src/isUnique.js

@@ -8,7 +8,11 @@ export function isUnique( el, selector )
 {
   if( !Boolean( selector ) ) return false;
   try {
-    var elems = el.ownerDocument.querySelectorAll(selector);
+    // Using getRootNode here to scope checks to any parent
+    // ShadowRoot. getRootNode will otherwise return the
+    // document associated to the elements page/frame (like
+    // the ownerDocument property would).
+    var elems = el.getRootNode().querySelectorAll(selector);
     return elems.length === 1 && elems[0] === el;
   } catch (e) {
     return false

test/unique-selector.js

@@ -299,4 +299,50 @@ describe( 'Unique Selector Tests', () =>
       expect( uniqueSelector ).to.equal( 'span' );
     })
   })
+
+  describe('shadow dom', () => {
+    it( 'builds expected selector inside and outside shadow context', () => {
+      $( 'body' ).append( '<div id="shadow-host" class="shadow-host-class"></div>' );
+
+      const hostNode = $( '#shadow-host' ).get( 0 );
+  
+      const shadowRoot = hostNode.attachShadow({ mode: "open" })
+      const shadowElement = hostNode.ownerDocument.createElement('div')
+      shadowElement.innerHTML = `
+        <div id="inner-shadow-container">
+          <button id="shadow-button" class="shadow-button-class">Click Me</button>
+        </div>
+      `
+      shadowRoot.appendChild(shadowElement);
+    
+      const uniqueSelectorForHost = unique( hostNode );
+      expect( uniqueSelectorForHost ).to.equal( '#shadow-host' );
+    
+      const uniqueSelectorForShadowContent = unique ( shadowElement.querySelector('#shadow-button') )
+      expect( uniqueSelectorForShadowContent ).to.equal( '#shadow-button' );
+    })
+
+    it( 'builds unique selector scoped to shadow root', () => {
+      $( 'body' ).append( '<div id="shadow-host" class="shadow-host-class"></div>' );
+      $( 'body' ).append( '<button class="shadow-button-class">Click Me Third</button>' );
+
+      const hostNode = $( '#shadow-host' ).get( 0 );
+  
+      const shadowRoot = hostNode.attachShadow({ mode: "open" })
+      const shadowElement = hostNode.ownerDocument.createElement('div')
+      shadowElement.innerHTML = `
+        <div id="inner-shadow-container">
+          <button class="shadow-button-class">Click Me First</button>
+          <button class="shadow-button-class">Click Me Second</button>
+        </div>
+      `
+      shadowRoot.appendChild(shadowElement);
+        
+      const uniqueSelectorInRootDocument = unique( $( 'body' ).find( '.shadow-button-class' ).get( 0 ) );
+      expect( uniqueSelectorInRootDocument ).to.equal( '.shadow-button-class' );
+
+      const uniqueSelectorForShadowContent = unique ( shadowElement.querySelectorAll('.shadow-button-class')[0] )
+      expect( uniqueSelectorForShadowContent ).to.equal( '#inner-shadow-container > :nth-child(1)' );
+    })
+  })
 } );