CustomElementRegistry

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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 undefined si el elemento personalizado no está definido.
CustomElementRegistry.getName(): Devuelve el nombre del elemento personalizado ya definido, o null si 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 Promise vací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 Standard # custom-elements-api

Compatibilidad con navegadores

BCD tables only load in the browser