Shadow DOM

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 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.

Étiquettes et contributeurs liés au document

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