add support for alternative document for issue #5

Author: Georgegriff

README.md

@@ -43,7 +43,16 @@ const path = require('path');
 
 })()
 ```
+### Provide alternative node
+```javascript
+    // query from another node
+    querySelectorShadowDom.querySelectorAllDeep('child', document.querySelector('#startNode'));
+    // query an iframe
+    querySelectorShadowDom.querySelectorAllDeep('child', iframe.contentDocument);
+```
 
+This library does not allow you to query across iframe boundaries, you will ned to get a reference to the iframe you want to interact with. </br>
+If your iframe is inside of a shadow root you could cuse `querySelectorDeep` to find the iframe, then pass the `contentDocument` into the 2nd argument of `querySelectorDeep` or `querySelectorAllDeep`.
 
 
 ### Chrome downloads page

package.json

@@ -1,6 +1,6 @@
 {
     "name": "query-selector-shadow-dom",
-    "version": "0.2.5",
+    "version": "0.3.0",
     "description": "use querySelector syntax to search for nodes inside of (nested) shadow roots",
     "main": "src/querySelectorDeep.js",
     "scripts": {

src/querySelectorDeep.js

@@ -17,16 +17,16 @@
 * Another example querySelectorAllDeep('#downloads-list div#title-area + a');
 e.g.
 */
-export function querySelectorAllDeep(selector) {
-    return _querySelectorDeep(selector, true);
+export function querySelectorAllDeep(selector, root = document) {
+    return _querySelectorDeep(selector, true, root);
 }
 
-export function querySelectorDeep(selector) {
-    return _querySelectorDeep(selector);
+export function querySelectorDeep(selector, root = document) {
+    return _querySelectorDeep(selector, false, root);
 }
 
-function _querySelectorDeep(selector, findMany) {
-    let lightElement = document.querySelector(selector);
+function _querySelectorDeep(selector, findMany, root) {
+    let lightElement = root.querySelector(selector);
 
     if (document.head.createShadowRoot || document.head.attachShadow) {
         // no need to do any special if selector matches something specific in light-dom
@@ -50,8 +50,8 @@ function _querySelectorDeep(selector, findMany) {
                 // filter out entry white selectors
                 .filter((entry) => !!entry);
             const possibleElementsIndex = splitSelector.length - 1;
-            const possibleElements = collectAllElementsDeep(splitSelector[possibleElementsIndex]);
-            const findElements = findMatchingElement(splitSelector, possibleElementsIndex);
+            const possibleElements = collectAllElementsDeep(splitSelector[possibleElementsIndex], root);
+            const findElements = findMatchingElement(splitSelector, possibleElementsIndex, root);
             if (findMany) {
                 acc = acc.concat(possibleElements.filter(findElements));
                 return acc;
@@ -66,13 +66,13 @@ function _querySelectorDeep(selector, findMany) {
         if (!findMany) {
             return lightElement;
         } else {
-            return document.querySelectorAll(selector);
+            return root.querySelectorAll(selector);
         }
     }
 
 }
 
-function findMatchingElement(splitSelector, possibleElementsIndex) {
+function findMatchingElement(splitSelector, possibleElementsIndex, root) {
     return (element) => {
         let position = possibleElementsIndex;
         let parent = element;
@@ -86,7 +86,7 @@ function findMatchingElement(splitSelector, possibleElementsIndex) {
             if (foundMatch) {
                 position--;
             }
-            parent = findParentOrHost(parent);
+            parent = findParentOrHost(parent, root);
         }
         return foundElement;
     };
@@ -112,9 +112,9 @@ function splitByCharacterUnlessQuoted(selector, character) {
 }
 
 
-function findParentOrHost(element) {
+function findParentOrHost(element, root) {
     const parentNode = element.parentNode;
-    return (parentNode && parentNode.host && parentNode.nodeType === 11) ? parentNode.host : parentNode === document ? null : parentNode;
+    return (parentNode && parentNode.host && parentNode.nodeType === 11) ? parentNode.host : parentNode === root ? null : parentNode;
 }
 
 /**
@@ -124,7 +124,7 @@ function findParentOrHost(element) {
  * @author ebidel@ (Eric Bidelman)
  * License Apache-2.0
  */
-function collectAllElementsDeep(selector = null) {
+function collectAllElementsDeep(selector = null, root) {
     const allElements = [];
 
     const findAllElements = function(nodes) {
@@ -137,7 +137,7 @@ function collectAllElementsDeep(selector = null) {
         }
     };
 
-    findAllElements(document.querySelectorAll('*'));
+    findAllElements(root.querySelectorAll('*'));
 
     return selector ? allElements.filter(el => el.matches(selector)) : allElements;
 }

test/TestComponent.js

@@ -21,5 +21,23 @@ export class TestComponent extends HTMLElement {
     addNested(child) {
         this.shadowRoot.querySelector('p').appendChild(child);
     }
+
+    static get observedAttributes() {
+        return ['child-class-name', 'child-text-content', 'internal-html'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case 'child-class-name':
+                this.childClassName = newValue;
+                break;
+            case 'child-text-content':
+                this.childTextContent = newValue;
+                break;
+            case 'internal-html':
+                this.internalHTML = newValue;
+                break;
+        }
+    }
 }
 customElements.define('test-component', TestComponent);

test/basic.spec.js

@@ -242,6 +242,40 @@ describe("Basic Suite", function() {
             expect(testComponents[1].classList.contains('header-3')).toBeTruthy();
         });
 
+        it('can provide an alternative node', function() {
+            const root = document.createElement('div');
+            parent.appendChild(root);
+
+            createTestComponent(root, {
+                childClassName: 'inner-content'
+            });
+
+            createTestComponent(parent, {
+                childClassName: 'inner-content'
+            });
+            const testComponent = querySelectorAllDeep('.inner-content', root);
+            expect(testComponent.length).toEqual(1);
+
+        });
+
+        it('can query nodes in an iframe', function(done) {
+
+            const innerframe = `<p class='child'>Content</p>`;
+            createTestComponent(parent, {
+                internalHTML: `<iframe id="frame" srcdoc="${innerframe}"></iframe>`
+            });
+            setTimeout(() => {
+                const iframe = querySelectorDeep('#frame');
+                const testComponents = querySelectorAllDeep('.child', iframe.contentDocument);
+                debugger;
+                expect(testComponents.length).toEqual(1);
+                expect(testComponents[0].textContent).toEqual("Content");
+                done();
+            }, 150);
+
+
+        });
+
 
 
         // describe(".perf", function() {

test/index.html

@@ -24,22 +24,17 @@
             import ('../src/querySelectorDeep.js');
             const parent = document.createElement('div');
             document.body.appendChild(parent);
-            const baseComponent = createTestComponent(parent, {
-                childClassName: 'base',
-                childTextContent: 'Base Component'
+            const innerframe = `<p class='child'>Content</p>`;
+            createTestComponent(parent, {
+                internalHTML: `<iframe id="frame" srcdoc="${innerframe}"></iframe>`
             });
-            const testComponent = createTestComponent(parent, {
-                childClassName: 'header-1',
-                internalHTML: '<div class="header-2">Content</div>'
-            });
-            const test2 = createTestComponent(testComponent, {
-                childClassName: 'header-2'
-            });
-            test2.setAttribute('data-test', 'Hello, World')
-            testComponent.classList.add('header-1');
-            const testComponents = querySelectorAllDeep(`.header-1 [data-test="Hello, World"], .george`);
-            window.querySelectorAllDeep = querySelectorAllDeep;
-            window.querySelectorDeep = querySelectorDeep;
+            setTimeout(() => {
+                const iframe = querySelectorDeep('#frame');
+                const testComponents = querySelectorAllDeep('.child', iframe.contentDocument);
+                expect(testComponents.length).toEqual(1);
+                expect(testComponents[0].textContent).toEqual("Content");
+                done();
+            }, 300);
         })();
     </script>
 </body>

test/nopolyfills.spec.js

@@ -38,5 +38,19 @@ describe("No Polyfills Suite", function() {
         expect(querySelectorAllDeep('.testing').length).toEqual(2);
     });
 
+    it('can fallback to query selector when no support and no polyfills with alternative root', function() {
+        const root = document.createElement('div');
+        parent.appendChild(root);
+        const element = document.createElement('a');
+        const element2 = document.createElement('a');
+        element.classList.add('testing');
+        element2.classList.add('testing');
+        root.appendChild(element);
+        parent.appendChild(element2);
+
+        expect(querySelectorAllDeep('.testing', root).length).toEqual(1);
+    });
+
+
 
 });