Pourquoi les Web Components

Les frameworks JavaScript évoluent rapidement (React, Vue, Svelte, Solid…), mais les Web Components sont un standard du navigateur. Un composant créé aujourd’hui fonctionnera dans 10 ans, sans migration.

Chez Lueur Externe, nous utilisons les Web Components pour les éléments d’interface qui doivent être partagés entre différents projets et frameworks.

Les 3 piliers

1. Custom Elements

Définissez vos propres balises HTML :

class LueurCTA extends HTMLElement {
  connectedCallback() {
    const text = this.getAttribute("text") || "Découvrir Lueur Externe";
    const url = this.getAttribute("url") || "https://lueurexterne.com";
    
    this.innerHTML = `
      <a href="${url}" class="cta-button" rel="noopener">
        ${text}
      </a>
    `;
  }
}

customElements.define("lueur-cta", LueurCTA);

Utilisation :

<lueur-cta text="Demander un devis" url="https://lueurexterne.com/contact"></lueur-cta>

2. Shadow DOM

Encapsulez le style et le markup pour éviter les conflits CSS :

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

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #eee;
          border-radius: 8px;
          padding: 1.5rem;
        }
        h3 { color: #ff3e51; margin: 0 0 0.5rem; }
        ::slotted(p) { color: #666; }
      </style>
      <h3><slot name="title"></slot></h3>
      <slot></slot>
    `;
  }
}

customElements.define("lueur-card", LueurCard);

3. HTML Templates

Définissez des fragments de markup réutilisables :

<template id="article-template">
  <article>
    <h2></h2>
    <time></time>
    <p></p>
    <a href="">Lire la suite</a>
  </article>
</template>

Cycle de vie

Les Custom Elements disposent de callbacks de cycle de vie :

class MonComposant extends HTMLElement {
  static observedAttributes = ["title", "theme"];

  connectedCallback() {
    // Élément ajouté au DOM
  }

  disconnectedCallback() {
    // Élément retiré du DOM
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // Un attribut observé a changé
  }
}

Intégration avec les frameworks

Avec Astro

Astro supporte nativement les Web Components. Ils s’hydratent côté client sans directive spéciale :

---
// Le composant est défini dans un fichier JS séparé
---
<script src="/components/lueur-cta.js"></script>
<lueur-cta text="Contactez-nous"></lueur-cta>

Avec React

React 19 améliore le support des Custom Elements :

function App() {
  return <lueur-cta text="Découvrir" url="https://lueurexterne.com" />;
}

Cas d’usage pertinents

  • Design system : composants partagés entre projets
  • Widgets embarquables : formulaires, chatbots, CTA
  • Micro-frontends : composants indépendants du framework
  • Progressive enhancement : enrichissement sans JavaScript obligatoire

Limites

  • SSR complexe (pas de Shadow DOM côté serveur)
  • Accessibilité du Shadow DOM à surveiller
  • Pas de système de state management intégré
  • Verbosité par rapport aux frameworks modernes

Conclusion

Les Web Components sont un standard puissant pour les composants réutilisables et pérennes. Ils complètent les frameworks plutôt qu’ils ne les remplacent. Lueur Externe les utilise stratégiquement dans ses projets multi-plateformes.