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.

* 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 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.

js
// 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CustomElementRegistry
Customized built-in element support
define
Supports disabledFeatures static property
get
getName
upgrade
whenDefined

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.