Qual é a diferença entre componentes da web e elementos personalizados?

"Componentes da Web" e "elementos personalizados" costumam ser misturados, e as pesquisas na Web pelo título dessa pergunta ainda não produzem muita clareza. Vamos consertar isso.

Os elementos personalizados são uma parte da especificação do padrão Web Components , juntamente com o Shadow DOM, modelos e importações de HTML.

Das especificações:

Os elementos personalizados fornecem uma maneira para os autores criarem seus próprios elementos DOM com todos os recursos. Embora os autores sempre possam usar elementos não padronizados em seus documentos, com o comportamento específico do aplicativo adicionado após o fato por scripts ou similares, esses elementos historicamente não são conformes e não são muito funcionais. Ao definir um elemento personalizado, os autores podem informar ao analisador como construir adequadamente um elemento e como os elementos dessa classe devem reagir às alterações.

História

A especificação está agora na v1 . A versão anterior, v0, era suportada desde o Chrome 33 e tinha uma API diferente, usando document.registerElement- que agora está obsoleto .

Uso

Os elementos personalizados podem ser autônomos (criando um novo elemento a partir do zero (ou seja, estendendo HTMLElement )) ou podem personalizar um elemento HTML existente (como HTMLButtonElement).

// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });

O segundo parâmetro para a customElements.define()chamada é o nome da classe que implementa o comportamento do elemento. Veja os exemplos na especificação para elementos autônomos e para elementos internos personalizados .

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

Os elementos personalizados são suportados de forma nativa em alguns navegadores modernos e podem ser preenchidos em polias para navegadores mais antigos, voltando ao Safari 7+ e IE11. Consulte também o polyfill v1 .

Modelos e DOM da sombra

Usando Templates e Shadow DOM em um elemento personalizado, você pode facilitar o manuseio e a reutilização do elemento.

Os modelos permitem o uso de HTML para declarar a estrutura dos elementos personalizados:

<!-- Template Definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div id="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>

<!-- Custom Element usage -->
<fancy-element></fancy-element>

O Shadow DOM permite que estilos, IDs e classes do conteúdo tenham escopo definido por si próprio. Isso evita o sangramento do CSS ou o acesso aos internos do elemento personalizado de fora dele.

customElements.define('fancy-element', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    const t = document.querySelector('#fancy-element-template');
    const instance = t.content.cloneNode(true);
    shadowRoot.appendChild(instance);
  }
  ...
});

Saber mais

Artigos de desenvolvedores do Google :

• Elementos personalizados v1: componentes da web reutilizáveis
• DOM da sombra: componentes da web independentes