Apprendre à créer un Web Component basique

Vous avez peut-être entendu parler des Web Components, ces composants HTML réutilisables, natifs et encapsulés, qui peuvent fonctionner sans framework.

Ils sont possibles grâce à une technologie clé du navigateur : le Shadow DOM.

Nous allons voir comment créer votre propre Web Component en JavaScript pur, avec son style, sa structure et sa logique embarquée.

Qu’est-ce qu’un Web Component ?

Un Web Component est une balise HTML personnalisée, que vous définissez vous-même. Une fois créée, vous pouvez l’utiliser comme n’importe quelle balise HTML dans votre page.

Voici un exemple de base :

<gift-box></gift-box>

Derrière cette simple balise se cache un composant autonome, qui peut contenir du HTML, du CSS, du JavaScript… le tout isolé du reste de la page.

Étape 1 : Créer une classe JavaScript

Un Web Component commence forcément par une classe qui étend HTMLElement :

class Gift extends HTMLElement {
  constructor() {
    super();
  }
}

Ensuite, on l’enregistre avec customElements.define :

customElements.define("gift-box", Gift);

customElements est une API fournie nativement par les navigateurs modernes !

La balise <user-badge> est maintenant reconnue par le navigateur.

Étape 2 : ajouter un Shadow DOM

Pour encapsuler notre composant, on utilise la méthode attachShadow :

constructor() {
  super();
  this.shadow = this.attachShadow({ mode: "open" });
}

Le mode "open" permet d’accéder au Shadow DOM depuis l’extérieur via .shadowRoot.

Mais on peut utiliser "closed" pour le rendre totalement privé.

Si vous n’êtes pas familier avec le concept de Shadow DOM, voici un article détaillé pour tout comprendre : https://code-garage.com/blog/comprendre-le-shadow-dom

Étape 3 : Créer un template HTML

On peut maintenant construire le contenu de notre composant :

this.shadow.innerHTML = `
  <style>
    .gift {
      display: inline-block;
      padding: 8px 12px;
      background-color: #eee;
      border-radius: 8px;
      font-weight: bold;
    }
  </style>
  <button class="gift">🎁 (cliquez pour ouvrir)</button>
`;

Le style est local au Shadow DOM : il n’affecte pas les autres éléments, et ne peut pas être affecté par des styles globaux.

Étape 4 : Ajouter de l’interaction JavaScript

On peut ajouter des événements comme dans un composant classique :

const gift = this.shadow.querySelector(".gift");
gift.addEventListener("click", () => {
  gift.textContent = "🌸🌹🌻 (voilà des fleurs)";
});

Le tout reste contenu dans le composant, sans dépendance ni pollution globale.

Exemple complet

class Gift extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: "open" });

    this.shadow.innerHTML = `
      <style>
        .gift {
          padding: 8px 12px;
          background-color: #eee;
          border-radius: 8px;
          font-weight: bold;
          cursor: pointer;
        }
      </style>
      <button class="gift">🎁 (cliquez pour ouvrir)</button>
    `;

    const gift = this.shadow.querySelector(".gift");
    gift.addEventListener("click", () => {
      gift.textContent = "🌸🌹🌻 (voilà des fleurs)";
    });
  }
}

customElements.define("gift-box", Gift);

Et dans votre HTML :

<gift-box></gift-box>

Pourquoi utiliser les Web Components ?

Les Web Components permettent de :

• Créer des interfaces réutilisables sans dépendance à un framework
• Encapsuler le HTML, le CSS et la logique
• Réduire les risques de conflits de styles
• Intégrer facilement des composants dans n’importe quel projet

Ils sont supportés par tous les navigateurs modernes, et peuvent cohabiter avec React, Vue ou Angular sans problème.