Web Components natifs : créer des composants réutilisables sans framework

Introduction

React, Vue, Angular, Svelte… Le monde du développement front-end regorge de frameworks pour créer des composants réutilisables. Pourtant, le navigateur lui-même propose depuis plusieurs années une solution native : les Web Components.

Standardisés par le W3C et supportés par tous les navigateurs modernes depuis 2020, les Web Components permettent de créer des éléments HTML personnalisés avec leur propre encapsulation CSS et comportement JavaScript — sans aucune dépendance externe.

Les trois piliers des Web Components

1. Custom Elements

Les Custom Elements permettent de définir de nouvelles balises HTML :

class UserCard extends HTMLElement {
  constructor() {
    super()
    this.innerHTML = `
      <div class="card">
        <h3>${this.getAttribute('name')}</h3>
        <p>${this.getAttribute('role')}</p>
      </div>
    `
  }
}

customElements.define('user-card', UserCard)

Utilisation :

<user-card name="Marie Dupont" role="Développeuse"></user-card>

Règle importante : le nom d'un Custom Element doit contenir un tiret (convention qui évite les conflits avec les balises HTML existantes et futures).

Cycle de vie

Les Custom Elements disposent de callbacks de cycle de vie :

class MyCounter extends HTMLElement {
  static observedAttributes = ['count']

  connectedCallback() {
    this.render()
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'count') this.render()
  }

  render() {
    const count = parseInt(this.getAttribute('count') || '0')
    this.innerHTML = `<span>Compteur : ${count}</span>`
  }
}

customElements.define('my-counter', MyCounter)

2. Shadow DOM

Le Shadow DOM crée un arbre DOM encapsulé, isolé du reste de la page. Les styles internes n'affectent pas l'extérieur, et les styles externes n'affectent pas l'intérieur.

class StyledButton extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })

    shadow.innerHTML = `
      <style>
        button {
          background: #D4714B;
          color: white;
          border: none;
          padding: 12px 24px;
          font-size: 14px;
          cursor: pointer;
          transition: background 0.2s;
        }
        button:hover {
          background: #C9694A;
        }
      </style>
      <button><slot></slot></button>
    `
  }
}

customElements.define('styled-button', StyledButton)

<styled-button>Cliquez ici</styled-button>

Le <slot> permet de projeter du contenu de l'extérieur vers l'intérieur du Shadow DOM — un mécanisme similaire aux children en React ou aux slots en Vue.

Modes du Shadow DOM

• open : le Shadow DOM est accessible via element.shadowRoot (recommandé)
• closed : le Shadow DOM n'est pas accessible de l'extérieur (rarement utile)

3. HTML Templates

La balise <template> permet de définir du HTML qui n'est pas rendu immédiatement :

<template id="card-template">
  <style>
    .card { border: 1px solid #eee; padding: 16px; }
    .card h3 { margin: 0 0 8px; }
  </style>
  <div class="card">
    <h3><slot name="title">Titre par défaut</slot></h3>
    <p><slot name="content">Contenu par défaut</slot></p>
  </div>
</template>

class TemplateCard extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    const template = document.getElementById('card-template')
    shadow.appendChild(template.content.cloneNode(true))
  }
}

customElements.define('template-card', TemplateCard)

Cas d'usage concrets

Un système de design multi-framework

L'un des plus grands avantages des Web Components : ils fonctionnent partout. Un composant créé en Web Component peut être utilisé dans une application React, Vue, Angular, ou même une page HTML statique.

Des entreprises comme Adobe (Spectrum), SAP (UI5) et ING Bank utilisent les Web Components pour leur système de design, partagé entre des équipes utilisant des frameworks différents.

Des widgets embarquables

Si vous créez un widget destiné à être intégré sur des sites tiers (chatbot, calendrier de réservation, lecteur vidéo), les Web Components sont idéaux : l'encapsulation du Shadow DOM garantit que les styles du site hôte n'interfèrent pas avec votre widget.

Des micro-frontends

Les Web Components sont un excellent choix pour les architectures micro-frontends, où chaque équipe peut développer sa partie de l'application avec la technologie de son choix, encapsulée dans des Web Components.

Les bibliothèques d'aide

Écrire des Web Components en JavaScript pur peut être verbeux. Plusieurs bibliothèques simplifient le processus :

• Lit (Google) : la plus populaire, ajoute un système de templating réactif
• Stencil (Ionic) : compilateur qui génère des Web Components optimisés
• FAST (Microsoft) : bibliothèque performante avec un système de design intégré

Exemple avec Lit :

import { LitElement, html, css } from 'lit'

class MyElement extends LitElement {
  static properties = {
    name: { type: String },
    count: { type: Number }
  }

  static styles = css`
    :host { display: block; padding: 16px; }
    button { background: #D4714B; color: white; }
  `

  constructor() {
    super()
    this.name = 'Monde'
    this.count = 0
  }

  render() {
    return html`
      <h1>Bonjour, ${this.name} !</h1>
      <button @click=${() => this.count++}>
        Clics : ${this.count}
      </button>
    `
  }
}

customElements.define('my-element', MyElement)

Web Components vs Frameworks

Les Web Components ne remplacent pas React ou Vue pour les applications complexes, mais ils les complètent parfaitement pour les composants partagés, les widgets et les systèmes de design.

Conclusion

Les Web Components sont une technologie mature, standardisée et supportée par tous les navigateurs. Ils brillent dans les contextes où l'interopérabilité et l'encapsulation sont essentielles. Même si vous utilisez React ou Vue au quotidien, connaître les Web Components enrichit votre compréhension du web et vous offre un outil supplémentaire quand la situation l'exige.