Detectar se o elemento é um componente da Web

Eu defendo os componentes da Web desde antes de eles se tornarem uma especificação, inspirado principalmente pela estrutura dijit do Dojo Toolkit. Capacitar widgets JavaScript de primeira classe, em vez de uma bagunça de DIVs e modelos, sempre fez mais sentido. Agora que existem componentes da Web e estruturas incríveis como o Ionic são baseadas neles, eu queria descobrir como detectar um componente da Web, em vez de um elemento HTML comum, com JavaScript. Como se vê, é muito mais fácil do que o senhor imagina.

Supondo que o senhor tenha uma referência a um elemento, é tão fácil quanto detectar um traço na tag do elemento:

function isWebComponent(element) {
  return element.tagName.includes("-");
}

A especificação do componente da Web exige um traço na tag HTMLElement‘s tagNameportanto, a detecção de um componente da Web é essencialmente limitada a uma comparação de strings.

Se o senhor ainda não brincou com componentes da Web, espero que encontre tempo para isso. Depois de passar por décadas de “widgets”, aninhamento excessivo de DIVs arbitrários e código ilegível, aprendi a apreciar essas joias!