--- title: Utiliser le shadow DOM slug: Web/Web_Components/Using_shadow_DOM tags: - API - DOM - Guide - Web Components - shadow dom translation_of: Web/Web_Components/Using_shadow_DOM --- {{DefaultAPISidebar("Web Components")}} Un aspect important des composants web est l'encapsulation — être capable de garder la structure de balisage, le style et le comportement cachés et séparés du reste de code de la page tel que différentes parties n'entrent pas en conflit et que le code puisse rester agréable et propre. L'API Shadow DOM est un moyen d'y parvenir, fournissant une manière d'associer à un élément un DOM séparé et caché. Cet article couvre les bases de l'utilisation du DOM fantôme. > **Note :** L'API Shadow DOM est supportée par défaut dans Firefox (63 et suivants), Chrome, Opera, et Safari. Le nouveau Edge basé sur Chromium (75 et suivants) le supportent aussi; le vieux Edge ne le supporte. ## Vue de haut niveau Cet article suppose que vous êtes déjà familier avec le concept de [DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model/Introduction) — une structure arborescente de nœuds connectés représentant les différents éléments et chaines de textes apparaissant dans un document balisé (généralement un document HTML dans le cas de documents web). Par exemple, considérez le fragment HTML suivant : ```html Simple exemple de DOM
Un tyrannosaurus Rex rouge : un dinosaure bipède se tenant debout comme un humain, avec de petits bras et une large gueule à nombreuses dents tranchantes.

Nous ajouterons ici un lien vers la page d'accueil de Mozilla

``` Ce fragment produit la structure DOM suivante : ![](dom-screenshot.png) Le DOM fantôme permet à des arbres DOM cachés d'être associés à des éléments de l'arbre DOM principal — cet arbre DOM fantôme s'ouvre avec une racine fantôme placée sous n'importe quel élément voulu, de la même manière que dans le DOM normal. ![Version SVG du diagramme montrant l'interaction entre le document, la racine fantôme et l'hôte fantôme.](shadowdom.svg) Il y a quelques termes de la terminologie du DOM fantôme que vous devez connaitre : - **Hôte fantôme** : le nœud du DOM principal auquel le DOM fantôme est associé. - **Arbre fantôme** : l'arbre DOM au sein du DOM fantôme. - **Frontière fantôme** : la limite où le DOM fantôme se termine et où le DOM principal commence. - **Racine fantôme** : le nœud racine de l'arbre fantôme. Vous pouvez affecter les nœuds du DOM fantôme exactement de la même manière que pour les nœuds du DOM principal — par exemple en leur ajoutant des éléments enfants ou en leur définissant des attributs, en stylisant des nœuds individuels au moyen de `element.style.propriete`, ou en ajoutant du style à l'arbre DOM fantôme entier via une balise [`