CustomElementRegistry.define()

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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 aue 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

Spécification Statut Commentaire
HTML Living Standard
La définition de 'customElements.define()' dans cette spécification.
Standard évolutif Définition initiale.

Compatibilité navigateur

Fonctionnalité Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base Pas de support[1] 59.0 Pas de support 47.0 10.1
Éléments personnalisés intégrés Pas de support Pas de support Pas de support Pas de support Pas de support
Fonctionnalité Firefox Mobile (Gecko) Chrome for Android IE Mobile Opera Mobile Safari Mobile
Support de base Pas de support 56.0 Pas de support 47.0 10.1
Éléments personnalisés intégrés Pas de support 56.0 Pas de support 47.0 Pas de support

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

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : masonlouchart
 Dernière mise à jour par : masonlouchart,