L'interfaceShadowRoot, relative à l'APIShadow DOM, représente la racine d'un sous-arbre du DOM dont le rendu est effectué séparément de celui du DOM de l'arbre principal.

Il est possible de récupérer une référence à la racineshadow d'un élément via la propriétéElement.shadowRoot si la racine a été créée avec la méthodeElement.attachShadow() et l'optionmode qui valaitopen.

Propriétés

ShadowRoot.delegatesFocusLecture seuleNon standard

Cette propriété renvoie un booléen qui indique si l'optiondelegatesFocus a été activée lors de la liaison avec la racineshadow (cf.Element.attachShadow()).

ShadowRoot.hostLecture seule

Cette propriété renvoie une référence à l'élément DOM auquel la racineShadowRoot est attachée.

ShadowRoot.innerHTMLNon standard

Cette propriété permet de définir ou de récupérer le sous-arbre DOM contenu à l'intérieur de la racineShadowRoot.

ShadowRoot.modeLecture seule

Cette propriété renvoie le mode utilisé pour la racineShadowRoot :open ouclosed. Cette valeur indique si les fonctionnalités internes à la racine sont accessibles depuis JavaScript.

Propriétés incluses viaDocumentOrShadowRoot

L'interfaceShadowRoot inclut les propriétés suivantes grâce au mixinDocumentOrShadowRoot. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interfaceDocument.

DocumentOrShadowRoot.activeElementLecture seule

L'élément (Element) au sein du sous-arbreshadow qui a le focus.

DocumentOrShadowRoot.styleSheetsLecture seule

Une listeStyleSheetList d'objetsCSSStyleSheet qui référencent les feuilles de styles liées explicitement ou embarquées dans le document.

Méthodes

L'interfaceShadowRoot inclut les méthodes suivantes qui proviennent du mixinDocumentOrShadowRoot. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interfaceDocument.

DocumentOrShadowRoot.getSelection()

Cette méthode renvoie un objetSelection représentant le fragment de texte sélectionné par l'utilisateur ou la position courante du curseur.

DocumentOrShadowRoot.elementFromPoint()

Cette méthode renvoie l'élément le plus haut situé aux coordonnées passées en arguments.

DocumentOrShadowRoot.elementsFromPoint()

Cette méthode renvoie un tableau de tous les éléments situés aux coordonnées passées en arguments.

DocumentOrShadowRoot.caretPositionFromPoint()

Cette méthode renvoie un objetCaretPosition contenant le nœud DOM sur lequel est le curseur ainsi que la position du curseur sur ce nœud.

Exemples

Les fragments de code suivants sont extraits de l'exemplelife-cycle-callbacks (voir le résultat enlive) qui crée un élément affichant un carré avec une taille et une couleur fournies par les attributs de l'élément.

Dans la définition de la classe pour l'élément<custom-square>, on ajoute certainscallbacks permettant de gérer le cycle de vie de l'élément avec un appel à une fonction externeupdateStyle() qui applique la taille et la couleur à l'élément. On lui passe l'argumentthis (c'est-à-dire l'élément lui-même).

connectedCallback() {  console.log("Le carré personnalisé a été ajouté à la page.");  updateStyle(this);}attributeChangedCallback(nom, ancienneValeur, nouvelleValeur) {  console.log("Les attributs du carré ont changé.");  updateStyle(this);}

Quant à la fonctionupdateStyle(), voyons ici son fonctionnement. On récupère une référence aushadow DOM avecElement.shadowRoot. Ensuite, on utilise un parcours pour le sous-arbre afin de trouver l'élément<style> présent dans leshadow DOM et on met à jour le CSS pour cet élément :

function updateStyle(elem) {  var shadow = elem.shadowRoot;  var childNodes = shadow.childNodes;  for (var i = 0; i < childNodes.length; i++) {    if (childNodes[i].nodeName === "STYLE") {      childNodes[i].textContent =        "div {" +        "width: " +        elem.getAttribute("l") +        "px;" +        "height: " +        elem.getAttribute("l") +        "px;" +        "background-color: " +        elem.getAttribute("c") +        ";" +        "}";    }  }}

Spécifications

Compatibilité des navigateurs