Web Components : la techno sous-cotée que tous les devs devraient connaître

Le Web Components, c’est une technologie native du navigateur qui te permet de créer tes propres balises HTML réutilisables, sans framework, sans dépendance, juste avec du JavaScript pur. Imagine que tu puisses inventer ta propre balise <mon-bouton> ou <carte-produit> et l’utiliser partout sur ton site comme si c’était du HTML classique. C’est exactement ce que les Web Components permettent de faire.

Tout le monde parle de React, de Vue.js ou d’autres frameworks JavaScript. Mais les Web Components, eux, sont directement intégrés dans le navigateur. Pas besoin d’installer quoi que ce soit. Pas besoin de npm, pas besoin de bundle. Et en 2026, leur popularité grimpe vraiment.

C’est quoi exactement un Web Component ?

Un Web Component est un élément HTML personnalisé que tu crées toi-même, encapsulé dans son propre environnement, qui fonctionne dans n’importe quel projet web sans dépendance externe.

Les Web Components reposent sur trois technologies standards :

• Custom Elements : tu définis ta propre balise HTML avec un nom personnalisé (obligatoirement avec un tiret, comme <ma-carte>)
• Shadow DOM : une zone isolée du reste de la page où le CSS et le JS de ton composant ne fuient pas vers l’extérieur
• HTML Templates : une façon de déclarer du HTML réutilisable sans qu’il soit rendu immédiatement par le navigateur

Ces trois briques ensemble te donnent la capacité de construire des composants autonomes, portables et réutilisables. C’est le même concept que les composants React ou Vue, sauf que là, c’est le navigateur lui-même qui gère tout.

Pourquoi les Web Components existent si on a déjà React et Vue ?

Les frameworks comme React ou Vue sont excellents, mais ils créent une dépendance forte : ton composant React ne peut pas être utilisé tel quel dans un projet Vue, et inversement.

Les Web Components résolvent ce problème à la racine. Un composant que tu crées avec cette technologie fonctionne dans React, Vue, Angular, Svelte, et même dans du HTML brut sans framework. C’est ce qu’on appelle l’interopérabilité.

Concrètement, ça veut dire que des entreprises qui ont plusieurs équipes avec des stacks différentes peuvent créer une bibliothèque de composants partagés. Un bouton, une modale, un formulaire de recherche, et tout le monde l’utilise, peu importe la techno.

Des boîtes comme Google, Adobe ou Salesforce ont déjà adopté cette approche à grande échelle. Le design system de Google, Material Web, est entièrement basé sur des Web Components.

Comment créer ton premier Web Component ?

Créer un Web Component de base demande seulement quelques lignes de JavaScript natif, sans aucune installation préalable.

Voici un exemple minimal commenté :

// On crée une classe qui étend HTMLElement
class MonBouton extends HTMLElement {
  constructor() {
    super(); // obligatoire

    // On crée un Shadow DOM isolé
    const shadow = this.attachShadow({ mode: 'open' });

    // On crée le contenu du composant
    const btn = document.createElement('button');
    btn.textContent = 'Clique ici';

    // On ajoute du style encapsulé
    const style = document.createElement('style');
    style.textContent = `
      button {
        background: #00ff88;
        color: #000;
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
      }
    `;

    // On attache tout au Shadow DOM
    shadow.appendChild(style);
    shadow.appendChild(btn);
  }
}

// On enregistre la balise personnalisée
customElements.define('mon-bouton', MonBouton);

Et dans ton HTML, tu l’utilises comme ça :

<mon-bouton></mon-bouton>

Le navigateur reconnaît ta balise, instancie ton composant, et affiche le bouton stylisé. Le CSS défini à l’intérieur ne touchera jamais le reste de ta page. C’est l’isolement du Shadow DOM en action.

C’est quoi le Shadow DOM et pourquoi c’est important ?

Le Shadow DOM est un sous-arbre DOM invisible depuis l’extérieur du composant, qui empêche les styles et les scripts de se mélanger avec le reste de la page.

Si tu as déjà eu le problème où le CSS d’une bibliothèque externe cassait ton design, tu comprends l’intérêt. Avec le Shadow DOM, chaque composant vit dans sa bulle. Ton h1 à l’intérieur du composant ne sera jamais affecté par un h1 { color: red; } défini ailleurs dans ta page.

C’est aussi pour ça que les Web Components sont souvent comparés aux solutions CSS-in-JS : dans les deux cas, l’objectif est d’éviter les conflits de style à grande échelle.

Web Components vs frameworks JavaScript : quel est le bon choix ?

La vérité, c’est que les Web Components et les frameworks ne sont pas vraiment en compétition. Tu peux utiliser des Web Components dans un projet React sans aucun problème. Beaucoup d’équipes font exactement ça : les composants bas niveau (boutons, inputs, badges) en Web Components, la logique applicative dans React ou Vue.

C’est quoi Lit et pourquoi tout le monde l’utilise ?

Lit est une bibliothèque légère créée par Google qui simplifie l’écriture de Web Components en ajoutant un système de templates réactifs et une gestion d’état basique, sans la lourdeur d’un framework complet.

Écrire des Web Components en JavaScript pur, c’est faisable, mais ça devient vite verbeux. Lit résout ce problème. Il pèse moins de 5 Ko, il est rapide, et il utilise les standards natifs sans les trahir.

Voici ce que donne le même composant avec Lit :

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

class MonBouton extends LitElement {
  static styles = css`
    button {
      background: #00ff88;
      color: #000;
      padding: 10px 20px;
      border-radius: 6px;
    }
  `;

  render() {
    return html`<button>Clique ici</button>`;
  }
}

customElements.define('mon-bouton', MonBouton);

Beaucoup plus lisible. Lit est aujourd’hui la référence pour écrire des Web Components en production. Si tu veux aller plus loin après avoir compris les bases, c’est la prochaine étape naturelle.

Les Web Components sont-ils vraiment adaptés aux débutants ?

Les Web Components nécessitent de connaître les bases du JavaScript, du DOM et un peu de CSS, ce qui les rend accessibles à quelqu’un qui a déjà quelques semaines de pratique derrière lui.

Si tu débutes complètement, commence par maîtriser HTML, CSS et JavaScript vanilla. Une fois que tu comprends comment fonctionne le DOM, les Web Components deviennent logiques. Tu n’as pas besoin de connaître un framework au préalable.

Ce qui peut surprendre au début :

• La syntaxe de la classe JavaScript avec extends HTMLElement
• La gestion du Shadow DOM et le concept d’isolement
• Les lifecycle callbacks comme connectedCallback ou attributeChangedCallback

Mais une fois ces trois points compris, tu peux créer des composants réutilisables propres sans toucher à un framework. Et si tu te demandes par où commencer côté JavaScript avant d’aller là, notre article sur Python vs JavaScript pour débutants peut t’aider à clarifier ta direction.

Où utiliser les Web Components concrètement ?

Les Web Components brillent particulièrement dans les contextes où plusieurs équipes ou technologies doivent partager les mêmes éléments d’interface sans se marcher dessus.

Voici des cas d’usage concrets :

• Design systems d’entreprise : un composant <btn-primaire> utilisé dans 5 projets différents
• Widgets embarquables : un chatbot, un formulaire de contact, une bannière cookie intégrables sur n’importe quel site
• CMS et sites statiques : parfait avec des générateurs comme Astro, qui supporte nativement les Web Components
• Micro-frontends : architecture où plusieurs équipes déploient leurs parties d’interface indépendamment

Si tu construis quelque chose avec ton premier site web et que tu veux des composants propres sans tout le poids d’un framework, les Web Components méritent vraiment ta curiosité.

En résumé : les Web Components

Les Web Components sont une technologie native, stable, et supportée par tous les navigateurs modernes. Ils te permettent de créer des balises HTML personnalisées, encapsulées et réutilisables sans aucune dépendance externe. Ils ne remplacent pas React ou Vue pour construire des applications complexes, mais ils sont parfaits pour des composants partagés, des widgets, ou des projets où l’interopérabilité est clé. En 2026, avec la montée des design systems et des micro-frontends, savoir ce que sont les Web Components fait clairement partie de la culture générale d’un développeur web, même débutant.

Questions fréquentes sur les Web Components

Les Web Components fonctionnent dans tous les navigateurs ?

Oui. En 2026, tous les navigateurs modernes supportent les Web Components nativement : Chrome, Firefox, Safari et Edge. Tu n’as besoin d’aucun polyfill pour les cas d’usage courants.

Peut-on utiliser des Web Components dans un projet React ?

Absolument. React peut rendre des Web Components comme n’importe quelle balise HTML. Il y a quelques subtilités sur la gestion des événements personnalisés, mais rien d’insurmontable. C’est même l’un des grands avantages des Web Components.

C’est quoi la différence entre Custom Elements et Web Components ?

Les Custom Elements sont l’une des trois technologies qui composent les Web Components. Les Web Components, c’est l’ensemble : Custom Elements + Shadow DOM + HTML Templates. Le terme « Web Components » désigne souvent l’ensemble du système.

Faut-il apprendre Lit ou les Web Components natifs en premier ?

Commence par les Web Components natifs pour comprendre les concepts fondamentaux : Shadow DOM, Custom Elements, lifecycle callbacks. Ensuite, passe à Lit pour simplifier ton code en production. Apprendre Lit sans comprendre les bases, c’est construire sur du sable.

Les Web Components sont-ils lents par rapport à React ?

Non, au contraire. Les Web Components s’appuient sur des APIs natives du navigateur, ce qui les rend souvent plus performants que des frameworks qui ajoutent une couche d’abstraction. Pour des composants simples, ils peuvent être plus rapides à charger et à rendre.

Où trouver des Web Components prêts à l’emploi ?

Plusieurs sources existent : le catalogue webcomponents.org, les composants Material Web de Google, ou encore les bibliothèques de Shoelace et Open UI. Tu peux aussi chercher des packages npm avec le tag « web-components ».