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 :
