Skip to content

Instantly share code, notes, and snippets.

@surma
Forked from ebidel/findall_elements_deep.js
Last active October 25, 2020 16:41
Show Gist options
  • Save surma/af49fc6384a1161486667b27790f9e4c to your computer and use it in GitHub Desktop.
Save surma/af49fc6384a1161486667b27790f9e4c to your computer and use it in GitHub Desktop.
Finds all elements on the page, including those within shadow dom — iterator version
/**
* Inspired by ebidel@ (https://gist.github.com/ebidel/1b418134837a7dde7d76ed36288c1d16)
* @author surma@
* License Apache-2.0
*/
function* collectAllElementsDeep(selector = '*', root = document.all) {
for (const el of root) {
if (!el.matches(selector))
continue;
yield el;
// If the element has a shadow root, dig deeper.
if (el.shadowRoot)
yield* collectAllElementsDeep(selector, el.shadowRoot.querySelectorAll('*'));
}
}
@valdrinkoshi
Copy link

valdrinkoshi commented Apr 18, 2018

Shouldn't it keep digging deeper even if the element doesn't match the selector? Basically change the if condition to

  if (el.matches(selector))
    yield el;

@surma
Copy link
Author

surma commented Apr 18, 2018

That’s just as valid. The current behavior is an intended choice by me, but as you say, can easily be changed :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment