CustomElementRegistry.define()

La méthode define() de l'interface CustomElementRegistry définie un nouvel élément personnalisé.

Syntaxe

customElements.define(nom, constructeur, options);

Paramètres

nom

Nom du nouvel élément personnalisé.

constructeur

Constructeur du nouvel élément personnalisé.

options Facultatif

Objet qui contrôle la manière dont l'élément est définit. Une option est actuellement supportée:

• extends. Une chaîne de caratères spécifiant le nom de l'élément intégré à étendre. Utilisé pour créer un élément personnalisé intégré.

Valeur retournée

Aucune.

Exemples

Élément personnalisé autonome

Les constructeurs de ces éléments doivent étendre HTMLElement.

class BasicElement extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Juste un élément de base.';
  }
}
customElements.define('basic-element', BasicElement);

<basic-element><basic-element>

Élément personnalisé intégré

Note: Bien que défini dans les spécifications, ce n'est actuellement pas pris en charge dans les navigateurs.

En plus des améliorations que nous ajoutons, ce qui suit se comportera comme un <button>:

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Dessiner des effets d'animation fantaisistes!
    });
  }
}

// L'attribut "extends" est requis pour, et utilisable par,
// les éléments personnalisés intégrés.

customElements.define("plastic-button", PlasticButton, { extends: "button" });

<!-- Ceci *FONCTIONNERA* -->

<button is="plastic-button">Click Me!</button>

<!--
L'élément personnalisé autonome ci-dessous *NE FONCTIONNERA PAS* à cause de notre
définition en JavaScript ci-dessus qui utilise "extends". L'élément ci-dessous
n'obtiendra donc pas le comportement défini ci-dessus ni ne sera différent de tout
autre élément HTML inconnu.
-->

<plastic-button>Click me</plastic-button>

Spécifications

Compatibilité navigateur

[1] Tant que Firefox ne supportera pas customElements.define(), il continuera de supporter la méthode dépréciée document.registerElement().