Los elementos personalizados son parte de la especificación del estándar de componentes web , junto con las importaciones de DOM DOM, plantillas e HTML.
De la especificación:
Los elementos personalizados proporcionan una forma para que los autores creen sus propios elementos DOM con todas las funciones. Aunque los autores siempre pueden usar elementos no estándar en sus documentos, con un comportamiento específico de la aplicación agregado después del hecho mediante scripts o similar, dichos elementos históricamente no han sido conformes y no han sido muy funcionales. Al definir un elemento personalizado, los autores pueden informar al analizador cómo construir adecuadamente un elemento y cómo los elementos de esa clase deben reaccionar a los cambios.
Historia
La especificación está ahora en v1 . La versión anterior, v0, había sido admitida desde Chrome 33 , y tenía una API diferente, document.registerElementque ahora está en desuso .
Uso
Los elementos personalizados pueden ser autónomos (creando un nuevo elemento desde cero (es decir, extendiendo HTMLElement ) o pueden personalizar un elemento HTML existente (como HTMLButtonElement).
// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });
El segundo parámetro de la customElements.define()llamada es el nombre de la clase que implementa el comportamiento del elemento. Vea los ejemplos en la especificación para elementos autónomos y para elementos integrados personalizados .
class PlasticButton extends HTMLButtonElement {
constructor() {
super();
this.addEventListener("click", () => {
// Draw some fancy animation effects!
});
}
}
Los elementos personalizados son compatibles de forma nativa en algunos navegadores modernos , y se pueden rellenar para navegadores más antiguos que se remontan a Safari 7+ e IE11. Vea también el v1 polyfill .
Plantillas y Shadow DOM
Mediante el uso de plantillas y Shadow DOM en un elemento personalizado, puede hacer que el elemento sea más fácil de manejar y reutilizable.
Las plantillas permiten usar HTML para declarar la estructura de 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>
Shadow DOM permite que los estilos, los identificadores y las clases del contenido se definan a sí mismos. Esto evita el sangrado de CSS o el acceso a los elementos internos del elemento personalizado desde el exterior.
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);
}
...
});
Aprende más
Artículos de desarrolladores de Google :
