Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Forked from ebidel/highlight_custom_elements.js
Last active April 21, 2022 21:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LeaVerou/fc3d61dbda713a4331a61692a8b7edd4 to your computer and use it in GitHub Desktop.
Save LeaVerou/fc3d61dbda713a4331a61692a8b7edd4 to your computer and use it in GitHub Desktop.
Get a list of custom elements used on a page
// Highlights all custom elements on the page.
// 7/31/2016: updated to work with both shadow dom v0 and v1.
// To create a bookmarklet, use http://ted.mielczarek.org/code/mozilla/bookmarklet.html
var allCustomElements = [];
function isCustomElement(el) {
const isAttr = el.getAttribute('is');
// Check for <super-button> and <button is="super-button">.
return el.localName.includes('-') || isAttr && isAttr.includes('-');
}
function findAllCustomElements(nodes) {
for (let i = 0, el; el = nodes[i]; ++i) {
if (isCustomElement(el)) {
allCustomElements.push(el);
}
// If the element has shadow DOM, dig deeper.
if (el.shadowRoot) {
findAllCustomElements(el.shadowRoot.querySelectorAll('*'));
}
}
}
findAllCustomElements(document.querySelectorAll('*'));
let tagNames = [...new Set(allCustomElements.map(el => el.nodeName.toLowerCase()))];
if (tagNames.length > 0) {
console.log("Unique tag names:", tagNames);
console.log("All custom elements:", allCustomElements);
}
else {
console.log("No custom elements found");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment