Shadow DOM

Cette traduction est en cours.

Brouillon
Cette page n'est pas terminée.

Le Shadow DOM permet d'encapsuler du JavaScript, CSS, et de réaliser des templates au sein d'un Web Component. Le Shadow DOM vise à séparer le 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 sont les sites de tailles importantes, par exemple lorsque le CSS n'est pas organisé, les styles peuvent déborder sur des parties du site alors que ce n'était pas souhaité, et vice-versa. Quand un site ou une application grandi, 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 être un élément tel qu'une bloque <div> ou <p>, ou un élément personnalisé tel que <mon-element>. Pour attacher 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éé le Shadow DOM dans <p>
      var shadow = document.querySelector('#element-hote').createShadowRoot();
    </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, alors nous pouvons voir le texte s'afficher sur le navigateur.

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

Shadow DOM et le style

You use the <style> element to add CSS to shadow DOM. Using the same example, this code will make the shadow DOM text red:

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éé shadow DOM
  var shadow = document.querySelector('#element-hote').createShadowRoot();
  // Ajoute du texte au shadow DOM
  shadow.innerHTML = '<p>Here is some new text</p>';
  // Transforme le texte en rouge
  shadow.innerHTML += '<style>p { color: red; }</style>';
</script>

Manipulationd du Shadow DOM

Pour manipuler le Shadow DOM :

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

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Slaals
 Dernière mise à jour par : Slaals,