toggle outline styles on all custom elements (without shadow-dom scan)

highlight-custom-element-in-console.es6.js

// Get all elements
const elements = document.querySelectorAll('*')

// Create an array from elements
const elementArray = Array.from(elements)

// Map to node names
const nodeNames = elementArray.map(element => element.nodeName.toLowerCase())

// Filter by which ones are registered
const allCustomElementNames = nodeNames.filter(customElements.get.bind(customElements))

function toggleOutlineStyle() {
  // loop through all custom elements and add outline style
  allCustomElementNames.forEach(elementName => {
    const elements = document.querySelectorAll(elementName)
    elements.forEach(element => {
      console.log(element)

      if (element.style.outline === '') {
        element.style.outline = "1px red dashed"
      } else {
        element.style.outline = ''
      }
    })
  })
}

toggleOutlineStyle()