Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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 soit séparés du DOM du document principal. Le Shadow DOM est utilisable seul, en dehors d'un Web component.

Pourquoi rechercher à séparer le code du reste de la page ? Une des raisons est que sur des sites de tailles importantes, par exemple, si le CSS n'est pas correctement organisé, les styles de certains composants peuvent impacter d'autres parties du site bien que ce ne soit pas prévu, et vice-versa. Quand un site ou une application grandit, ce genre de chose est difficile a éviter.

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 natif comme <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.attachShadow() comme dans cet exemple :

<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 ajoute un Shadow DOM dans l'élément <p> qui n'a aucun contenu. Rien n'est encore 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 = '<span>Ici mon nouveau texte !</span>';

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 = '<span>Here is some new text</span>';
  // Transformation du texte en rouge
  shadow.innerHTML += '<style>span { 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
DOM
La définition de 'shadow trees' dans cette spécification.
Standard évolutif  
Shadow DOM Version de travail  

Compatibilité Navigateur

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

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

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