Bookmarklet for highlight custom elements on a page

highlight_custom_elements.js

// 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('*'));

allCustomElements.forEach(function(el, i) {
  el.style.outline = '1px dashed red';
  el.style.backgroundColor = 'rgba(255,0,0,0.1)';
});

highlight_custom_elements_bookmarklet.js

javascript:(function(){var allCustomElements=[];function isCustomElement(el){const isAttr=el.getAttribute('is');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(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)';});})();