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()
<html>
<head></head>
<body>
<p id="element-hote"></p>
<script>
// Créé le Shadow DOM dans <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, alors nous pouvons 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éé shadow DOM
var shadow = document.querySelector('#element-hote').attachShadow({mode: "open"});
// 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 :
Element.attachShadow()Element.getDestinationInsertionPoints()Element.shadowRoot- <shadow> élément
- Eléments retirés des standards :
<content>,<element>et<decorator> - Interface API associées :
ShadowRootHTMLContentElementHTMLShadowElement - Sélecteurs CSS :
- Pseudo-classes :
:host:host():host-context() - Pseudo-éléments :
::shadow::content - Combinateur :
>>>(anciennement/deep/)*
- Pseudo-classes :
* L'ancien combinateur sera probablement déprécié dans le futur.