Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.
CustomElementRegistry
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.
* Some parts of this feature may have varying levels of support.
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
| Specification |
|---|
| HTML # custom-elements-api |
Compatibilidad con navegadores
Enable JavaScript to view this browser compatibility table.