Custom Elements

Definition

API native du navigateur permettant de définir de nouvelles balises HTML avec leur propre comportement. Le nom doit contenir un tiret pour éviter les collisions avec les éléments natifs.

Analogie

Comme créer une nouvelle pièce de Lego sur mesure qui s'emboîte parfaitement avec les pièces standard.

Exemple de code

class UserAvatar extends HTMLElement {
  connectedCallback() {
    const name = this.getAttribute('name');
    this.innerHTML = `<img alt="${name}">`;
  }
}
customElements.define('user-avatar', UserAvatar);

Cas d'usage

Construire des composants framework-agnostic partageables entre React, Vue et Angular.

Anti-pattern

Termes lies