Le Shadow DOM fait partie des technologies les plus puissantes du développement web moderne, pourtant beaucoup de développeurs débutants passent complètement à côté. Son objectif est simple : créer des composants HTML totalement isolés, avec leur propre CSS et leur propre structure, sans risquer de casser le reste du site. Et quand on a déjà perdu du temps à cause d’un conflit CSS difficile à comprendre, on réalise vite à quel point cette technologie peut devenir précieuse.
Dans ce tutoriel, vous allez découvrir comment fonctionne le Shadow DOM, pourquoi il est utilisé dans les Web Components et comment créer vos propres composants réutilisables étape par étape. Même si le concept peut sembler impressionnant au premier abord, vous verrez qu’il est finalement beaucoup plus accessible qu’il n’y paraît.
- Comprendre pourquoi certains styles CSS “cassent” un site et comment le Shadow DOM permet enfin d’isoler proprement ses composants web.
- Créer des éléments HTML modernes et réutilisables avec leur propre structure, leur propre design et un comportement totalement indépendant.
- Passer d’un simple composant statique à un mini projet concret capable de fonctionner sur n’importe quel site sans provoquer de conflits visuels.
Le développement web moderne évolue vite. Très vite. Entre les frameworks JavaScript, les composants réutilisables et les interfaces toujours plus complexes, les développeurs cherchent constamment des solutions pour mieux organiser leur code. Et justement, le Shadow DOM fait partie de ces technologies qui changent la manière de construire des interfaces web.
À la fin de ce tutoriel, vous serez capable de créer vos propres composants web encapsulés, avec un style totalement indépendant du reste de la page.
- Qu’est-ce que le Shadow DOM ?
- Le DOM classique vs le Shadow DOM
- Comment créer un Shadow DOM ?
- Ajouter du CSS dans le Shadow DOM
- Les avantages du Shadow DOM
- Les limites du Shadow DOM
- Les pseudo-sélecteurs spéciaux
- Le sélecteur :host
- Le sélecteur ::slotted
- Comprendre les slots
- Les Custom Elements et le Shadow DOM
- Créer un vrai composant moderne
- Rendre un composant dynamique
- Shadow DOM et frameworks JavaScript
- Cas concret : créer un bouton réutilisable
- Shadow DOM et sécurité
- Faut-il utiliser le Shadow DOM partout ?
Qu’est-ce que le Shadow DOM ?
Le Shadow DOM est une technologie native du navigateur qui permet de créer une zone HTML isolée à l’intérieur d’un élément.
Dit autrement :
Vous pouvez créer un mini DOM privé qui ne sera pas influencé par le reste de votre page.
Oui, cela peut sembler un peu abstrait au début. Prenons donc une image simple.
Imaginez une maison avec plusieurs pièces. Dans une maison classique, tout le monde peut entrer partout et déplacer les meubles. Résultat : chaos garanti.
Le Shadow DOM fonctionne comme une pièce verrouillée. Ce qu’il y a à l’intérieur reste protégé du reste de la maison.
En développement web, cela signifie que :
- votre CSS reste isolé,
- vos composants ne cassent pas le style global,
- le code devient plus modulaire,
- les conflits entre styles disparaissent presque totalement.
Le Shadow DOM fait partie des technologies des Web Components avec :
- les Custom Elements,
- les Templates HTML,
- les ES Modules.
C’est l’un des piliers du web moderne.
Pourquoi le Shadow DOM existe-t-il ?
Avant son apparition, les développeurs avaient un problème récurrent : les conflits CSS.
Imaginez ce code CSS :
button {
background: red;
color: white;
}Sur une petite page, aucun souci. Mais sur un gros projet ? Catastrophe potentielle…
Tous les boutons du site deviennent rouges, même ceux d’un plugin, d’une bibliothèque ou d’un composant tiers.
- Le Shadow DOM a été créé pour résoudre ce problème.
Grâce à lui, un composant peut avoir :
- son propre HTML,
- son propre CSS,
- son propre comportement JavaScript.
Et surtout : tout cela reste encapsulé.
C’est exactement ce que font les navigateurs avec certains éléments natifs.
Par exemple, un champ <input type="range"> possède déjà son propre Shadow DOM interne.
Le navigateur utilise donc lui-même cette technologie depuis longtemps.
Le DOM classique vs le Shadow DOM
Avant d’aller plus loin, il est important de comprendre la différence entre le DOM classique et le Shadow DOM.
Le DOM classique
Quand vous créez une page HTML, tous les éléments appartiennent au même arbre DOM :
<body>
<h1>Bienvenue</h1>
<button>Cliquer</button>
</body>Tout le CSS de la page peut modifier ces éléments.
Le Shadow DOM
Avec le Shadow DOM, vous créez une sorte de sous-arbre isolé.
Exemple :
<mon-bouton></mon-bouton>À l’intérieur de ce composant, vous pouvez avoir :
<button>Mon bouton privé</button>Mais ce bouton est protégé du CSS global.
C’est là toute la magie.
Comment créer un Shadow DOM ?
Passons maintenant à la pratique.
Pour créer un Shadow DOM, JavaScript fournit une méthode appelée :
attachShadow()Voyons cela étape par étape. Prenons un premier exemple simple.
Commençons par créer un fichier HTML.
Étape 1 : le HTML
<div id="composant"></div>Étape 2 : le JavaScript
const composant = document.getElementById("composant");
const shadow = composant.attachShadow({
mode: "open"
});
shadow.innerHTML = `
<h2>Bonjour depuis le Shadow DOM</h2>
`;Décomposons tranquillement ce code.
Sélection de l’élément
const composant = document.getElementById("composant");On récupère simplement un élément HTML classique.
Création du Shadow DOM
const shadow = composant.attachShadow({
mode: "open"
});Ici, on crée le Shadow DOM.
Le paramètre mode peut avoir deux valeurs :
openclosed
Mode open
Le mode open permet d’accéder au Shadow DOM depuis JavaScript :
console.log(composant.shadowRoot);Mode closed
Le mode closed bloque cet accès.
mode: "closed"Dans ce cas :
console.log(composant.shadowRoot);renvoie null.
- Pour apprendre, utilisez toujours
open.
Ajouter du CSS dans le Shadow DOM
Le véritable intérêt apparaît ici.
Essayons ceci :
<style>
h2 {
color: red;
}
</style>
<div id="composant"></div>Puis :
const composant = document.getElementById("composant");
const shadow = composant.attachShadow({
mode: "open"
});
shadow.innerHTML = `
<h2>Titre dans le Shadow DOM</h2>
`;Le titre ne sera PAS rouge. Pourquoi ?
- Parce que le CSS global ne traverse pas le Shadow DOM.
C’est un peu comme essayer de crier à travers une porte blindée.
Ajouter un style interne
Pour styliser votre composant, il faut ajouter un <style> directement dans le Shadow DOM.
shadow.innerHTML = `
<style>
h2 {
color: blue;
font-size: 30px;
}
</style>
<h2>Titre isolé</h2>
`;- Cette fois, le style fonctionne.
Les avantages du Shadow DOM
Le Shadow DOM apporte énormément d’avantages.
Isolation du CSS
C’est l’avantage principal.
Vos composants deviennent indépendants.
Vous évitez :
- les conflits de styles,
- les effets de bord,
- les bugs visuels incompréhensibles.
Et franchement… quand on a déjà passé plusieurs minutes à chercher pourquoi un bouton est soudainement devenu violet, on apprécie énormément cette isolation.
Réutilisation des composants
Un composant Shadow DOM peut être utilisé partout.
- Même sur un autre site.
- Même dans un autre projet.
- Même dans WordPress.
Maintenance plus simple
Le code devient modulaire.
Chaque composant possède :
- sa structure,
- son style,
- son comportement.
C’est beaucoup plus propre.
Compatibilité native
Le Shadow DOM est supporté par tous les navigateurs modernes.
- Pas besoin de framework.
- Pas besoin de bibliothèque externe.
Les limites du Shadow DOM
Le Shadow DOM n’est pas parfait non plus.
Il faut connaître ses limites.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?Le CSS global ne passe plus
Cela peut devenir gênant.
Par exemple :
- vos polices globales,
- vos variables CSS,
- vos thèmes,
- vos styles utilitaires,
ne s’appliquent pas automatiquement.
Il faut parfois les réinjecter.
Le débogage peut être plus complexe
Quand un composant possède plusieurs niveaux de Shadow DOM, le code devient moins lisible dans les outils développeur.
Le référencement SEO
Bonne nouvelle : Google comprend le Shadow DOM.
Mais certains moteurs ou outils plus anciens peuvent avoir des difficultés.
Les pseudo-sélecteurs spéciaux
Le Shadow DOM possède quelques sélecteurs CSS spécifiques.
Le sélecteur :host
:host cible le composant lui-même.
Exemple :
shadow.innerHTML = `
<style>
:host {
display: block;
border: 2px solid black;
padding: 20px;
}
</style>
<p>Bonjour</p>
`;Ici, le style s’applique à l’élément parent du Shadow DOM.
Le sélecteur ::slotted
Ce sélecteur permet de styliser le contenu injecté via un slot.
Oui, cela semble technique.
Mais on va voir cela simplement.
Comprendre les slots
Les slots servent à injecter du contenu dans un composant :
<ma-carte>
<p>Texte injecté</p>
</ma-carte>Composant :
shadow.innerHTML = `
<slot></slot>
`;Le paragraphe apparaît dans le composant.
Exemple complet avec slot
class MaCarte extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({
mode: "open"
});
shadow.innerHTML = `
<style>
div {
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
}
::slotted(p) {
color: blue;
font-weight: bold;
}
</style>
<div>
<slot></slot>
</div>
`;
}
}
customElements.define("ma-carte", MaCarte);HTML :
<ma-carte>
<p>Bonjour le slot</p>
</ma-carte>Les Custom Elements et le Shadow DOM
Le Shadow DOM est souvent utilisé avec les Custom Elements.
Un Custom Element permet de créer ses propres balises HTML.
Exemple :
<mon-profil></mon-profil>C’est très puissant.
Créer un vrai composant moderne
Passons maintenant à quelque chose de plus concret.
Nous allons créer une carte utilisateur.
Structure du composant
class CarteUtilisateur extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({
mode: "open"
});
shadow.innerHTML = `
<style>
.card {
border: 1px solid #ddd;
padding: 20px;
border-radius: 12px;
width: 250px;
font-family: Arial;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h2 {
margin-top: 0;
}
button {
background: royalblue;
color: white;
border: none;
padding: 10px 15px;
border-radius: 6px;
cursor: pointer;
}
</style>
<div class="card">
<h2>Jean Dupont</h2>
<p>Développeur Frontend</p>
<button>Voir le profil</button>
</div>
`;
}
}
customElements.define(
"carte-utilisateur",
CarteUtilisateur
);HTML :
<carte-utilisateur></carte-utilisateur>Pourquoi ce composant est intéressant ?
Même si votre site possède déjà :
button {
background: red;
}Le bouton du composant restera bleu.
Le Shadow DOM protège totalement le style interne.
Rendre un composant dynamique
Ajoutons maintenant des attributs.
HTML :
<carte-utilisateur
nom="Alice"
metier="Développeuse JS">
</carte-utilisateur>JavaScript :
class CarteUtilisateur extends HTMLElement {
constructor() {
super();
const nom = this.getAttribute("nom");
const metier = this.getAttribute("metier");
const shadow = this.attachShadow({
mode: "open"
});
shadow.innerHTML = `
<style>
.card {
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
}
</style>
<div class="card">
<h2>${nom}</h2>
<p>${metier}</p>
</div>
`;
}
}
customElements.define(
"carte-utilisateur",
CarteUtilisateur
);Et voilà.
Votre composant devient réutilisable.
Shadow DOM et frameworks JavaScript
Même si vous ne le voyez pas toujours directement, de nombreux frameworks utilisent des concepts proches du Shadow DOM.
Par exemple :
- Angular peut utiliser l’encapsulation de vue,
- Lit repose énormément dessus,
- Ionic utilise les Web Components,
- certains composants de Chrome utilisent un Shadow DOM interne.
Cela signifie qu’apprendre cette technologie vous aide aussi à mieux comprendre le développement frontend moderne.
Cas concret : créer un bouton réutilisable
Terminons avec un mini projet complet.
Objectif : Créer un bouton moderne réutilisable avec :
- un style isolé,
- un effet hover,
- un texte personnalisable.
Le HTML
<mon-bouton texte="Envoyer"></mon-bouton>
<mon-bouton texte="Télécharger"></mon-bouton>Le JavaScript complet
class MonBouton extends HTMLElement {
constructor() {
super();
const texte = this.getAttribute("texte");
const shadow = this.attachShadow({
mode: "open"
});
shadow.innerHTML = `
<style>
button {
background: linear-gradient(
45deg,
royalblue,
dodgerblue
);
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
}
button:hover {
transform: scale(1.05);
}
</style>
<button>
${texte}
</button>
`;
}
}
customElements.define(
"mon-bouton",
MonBouton
);Pourquoi ce mini projet est utile ?
Parce qu’il représente exactement ce que font les bibliothèques modernes.
Vous créez un composant autonome.
Et vous pouvez le réutiliser partout :
- sur votre site,
- dans un projet client,
- dans WordPress,
- dans une application web,
- dans une interface d’administration.
Shadow DOM et sécurité
Attention cependant, le Shadow DOM n’est pas une sécurité contre les hackers.
Il cache simplement la structure visuelle.
Un utilisateur peut toujours inspecter le code via les outils développeur. Il ne faut donc jamais y stocker des informations sensibles.
Faut-il utiliser le Shadow DOM partout ?
Non.
Et c’est important de le comprendre.
Le Shadow DOM est très utile pour :
- les composants réutilisables,
- les bibliothèques UI,
- les systèmes de design,
- les widgets indépendants,
- les interfaces complexes.
Mais pour une simple page HTML classique, ce serait souvent inutile.
Comme toujours en développement web : il faut choisir le bon outil au bon moment.
Comment s’entraîner avec le Shadow DOM ?
Le meilleur moyen de progresser consiste à créer de petits composants.
Par exemple :
- une carte produit,
- un système d’onglets,
- un accordéon,
- un lecteur audio,
- une notification,
- un bouton animé,
- une popup personnalisée.
Petit à petit, vous comprendrez réellement la logique des Web Components.
Et honnêtement, le moment où l’on voit son premier composant totalement autonome fonctionner sans casser le CSS du site… procure une petite satisfaction de développeur difficile à expliquer.
Le Shadow DOM remplace-t-il les frameworks JavaScript ?
Non, il ne remplace pas React, Vue ou Angular. Le Shadow DOM est une technologie native du navigateur qui peut être utilisée seule ou avec certains frameworks pour créer des composants isolés et réutilisables.
Peut-on utiliser le Shadow DOM dans WordPress ?
Oui, le Shadow DOM peut parfaitement être utilisé dans WordPress, notamment pour créer des widgets, des interfaces d’administration ou des composants personnalisés sans provoquer de conflits CSS avec le thème ou les extensions.
Le Shadow DOM fait partie des technologies qui rendent le développement frontend moderne plus propre, plus modulaire et beaucoup plus fiable.
Grâce à lui, vous pouvez créer des composants isolés avec leur propre HTML, leur propre CSS et leur propre logique JavaScript, sans craindre les conflits avec le reste du site.
Même si le concept paraît un peu impressionnant au départ, vous avez probablement remarqué qu’il repose finalement sur des bases assez simples. Une fois la logique comprise, tout devient beaucoup plus naturel.
Et surtout, cette technologie ouvre énormément de portes. Les Web Components, les bibliothèques modernes et même certains frameworks utilisent des principes proches du Shadow DOM.
{ « @context »: « https://schema.org », « @type »: « WebPage », « @id »: « https://blog.crea-troyes.fr/15351/shadow-dom-creation-de-composant-web-isole/ », « url »: « https://blog.crea-troyes.fr/15351/shadow-dom-creation-de-composant-web-isole/ », « isPartOf »: { « @type »: « CollectionPage », « name »: « Apprendre le Frontend : HTML, CSS et JavaScript expliqués simplement », « url »: « https://blog.crea-troyes.fr/apprendre-le-frontend-html-css-et-javascript-expliques-simplement/ » } }
Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi