Continuous custom element higlighter

ce_highlight.js

// Continuously higlights the custom elements on the page. This is useful
// if new custom elements are lazy loaded later on or you have a SPA
// that uses other elements.

// CE finding code from: https://gist.github.com/ebidel/4bdbe9db55d8a775d0a4

(function() {
let cache = [];

function highlightCustomElements() {
  if (cache.includes(location.href)) {
    return;
  }

  cache.push(location.href);
  
  let 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('*'));
  
  allCustomElements.forEach(function(el, i) {
    el.style.outline = '1px dashed red';
    el.style.backgroundColor = 'rgba(255,0,0,0.1)';
  });
}

setInterval(highlightCustomElements, 100);
})();