Simple script to find custom elements on a page

find-custom-element-on-document.js

var foundCustomElements = [];
var foundCustomElementNames = [];

// main function to deeply find all custom elements on a page.
function getAllCustomElements(nodes) {
  nodes.forEach(el => {
    if (el.shadowRoot) getAllCustomElements(node.shadowRoot.querySelectorAll('*'));
	  
    if (el.localName.includes('-') || el.getAttribute('is') && el.getAttribute('is').includes('-')) {
      foundCustomElements.push(el);
    }
  });
}

// To querySelectorAll * to find all custom elements on a page.
getAllCustomElements(document.querySelectorAll('*'));
foundCustomElementNames = foundCustomElements.map(el => el.localName.includes('-') && el.localName || `${el.getAttribute('is')} (${el.localName})`).sort().filter((el, i, a) => i === a.indexOf(el));

// console.log found custom elements.
console.info(`%cDone! %c${foundCustomElementNames.length} custom elements found on the page.`, 'color: #2196F3; font-size: 16px;', 'color: #E91E63; font-size: 16px;');
console.log(foundCustomElementNames, foundCustomElements);