CustomElementRegistry
Baseline
Ampliamente disponible
*
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde enero de 2020.
* Algunas partes de esta característica pueden tener distintos niveles de compatibilidad.
La interfaz CustomElementRegistry proporciona métodos para registrar elementos personalizados y consultar elementos registrados. Para obtener una instancia, usa la propiedad window.customElements.
Métodos de instancia
CustomElementRegistry.define()-
Define un nuevo elemento personalizado.
CustomElementRegistry.get()-
Devuelve el constructor del elemento personalizado nombrado, o
undefinedsi el elemento personalizado no está definido. CustomElementRegistry.getName()-
Devuelve el nombre del elemento personalizado ya definido, o
nullsi el elemento personalizado no está definido. CustomElementRegistry.upgrade()-
Actualiza un elemento personalizado directamente, incluso antes de que se conecte a su shadow root.
CustomElementRegistry.whenDefined()-
Devuelve un
Promisevacío que se resuelve cuando un elemento personalizado se define con el nombre dado. Si dicho elemento personalizado ya está definido, la promesa devuelta se cumple de inmediato.
Ejemplos
El siguiente código está tomado de nuestro ejemplo word-count-web-component (véalo también en vivo). Observe cómo usamos el método CustomElementRegistry.define() para definir el elemento personalizado después de crear su clase.
// Crear una clase para el elemento.
class WordCount extends HTMLParagraphElement {
constructor() {
// Siempre llama super primero en el constructor
super();
// contar palabras en el elemento padre del elemento
const wcParent = this.parentNode;
function countWords(node) {
const text = node.innerText || node.textContent;
return text
.trim()
.split(/\s+/g)
.filter((a) => a.trim().length > 0).length;
}
const count = `Palabras: ${countWords(wcParent)}`;
// Crear una shadow root
const shadow = this.attachShadow({ mode: "open" });
// Cree un nodo de texto y agrega el recuento de palabras
const text = document.createElement("span");
text.textContent = count;
// Añádalo a al shadow root
shadow.appendChild(text);
// Actualizar el recuento cuando cambia el contenido del elemento
setInterval(() => {
const count = `Palabras: ${countWords(wcParent)}`;
text.textContent = count;
}, 200);
}
}
// Definir el nuevo elemento
customElements.define("word-count", WordCount, { extends: "p" });
Nota:
CustomElementRegistry está disponible a través de la propiedad Window.customElements.
Especificaciones
| Especificación |
|---|
| HTML # custom-elements-api |