MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Cette traduction est en cours.

Brouillon
Cette page n'est pas terminée.

Le Shadow DOM permet d'encapsuler du JavaScript et du CSS au sein d'un Web Component. Le Shadow DOM fait en sorte que ces éléments sont séparés du DOM du document principal. Le Shadow DOM est utilisable seul, en dehors du Web component.

Pourquoi rechercher à séparer le code du reste de la page ? La raison principale concerne les sites de tailles importantes, par exemple lorsque le CSS n'est pas correctement organisé, alors les styles de certains composants peuvent impacter d'autres parties du site alors que ce n'était pas souhaité, l'inverse étant également vrai. Quand un site ou une application grandit, cette contrainte doit être évitée.

Les bases du Shadow DOM

Un Shadow DOM doit toujours être lié à un élément existant. L'élément peut être soit un élément au sein d'un fichier HTML, soit un élément du DOM produit par un script. Il peut s'agir d'un élément tel qu'un bloc <div> ou <p>, ou un élément personnalisé tel que <mon-element>. Pour attacher le Shadow DOM à un élément il suffit de faire Element.createShadowRoot() comme le montre l'exemple ci-dessous :

<html>
  <head></head>
  <body>
    <p id="element-hote"></p>
    <script>
      // Créer le Shadow DOM sur l'élément <p>
      var shadow = document.querySelector('#element-hote').attachShadow({mode: "open"});
    </script>
  </body>
</html>

L'exemple ci-dessus insère un Shadow DOM dans l'élément <p> qui n'a aucun contenu, donc rien n'est affiché. Pour continuer avec le même exemple, il est possible d'insérer du texte dans le Shadow DOM comme le montre l'exemple suivant, de telle façon à voir le texte s'afficher sur le navigateur :

shadow.innerHTML = '<p>Ici mon nouveau texte !</p>';

Shadow DOM et le style

Nous utilisons l'élément <style> pour ajouter du CSS au Shadow DOM. Poursuivons avec l'exemple précédent, le code suivant rend le texte en rouge :

<script>
  // Création du Shadow DOM
  var shadow = document.querySelector('#element-hote').attachShadow({mode: "open"});
  // Ajout du texte au shadow DOM
  shadow.innerHTML = '<p>Here is some new text</p>';
  // Transformation du texte en rouge
  shadow.innerHTML += '<style>p { color: red; }</style>';
</script>

Constitution du Shadow DOM

Pour manipuler le Shadow DOM, les éléments suivants sont disponibles :

* L'ancien combinateur sera probablement déprécié dans le futur.

Interfaces

ShadowRoot
Le noeud racine d'un sous-arbre du DOM, rendu séparement de l'arbre du DOM principal d'un document.
HTMLTemplateElement
Permet l'accès au contenu d'un élément HTML <template>.
HTMLSlotElement
Permet l'accès au nom et au noeuds affectés à un élément HTML <slot>.
DocumentOrShadowRoot
Fourni des API partagées entre les documents et "shadow roots".

Specifications

Specification Status Commentaire
Shadow DOM Version de travail Définition initiale.

Compatibilité Navigateur

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support basique 53.0 Pas de support Pas de support 43.0 10.0
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Support basique Pas de support 53.0 Pas de support ? ? ? ? 53.0

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : lotfire24, linsolas, Slaals, thomas-huguenin
 Dernière mise à jour par : lotfire24,