Qu'est-ce que la racine d'ombre

99

Dans les outils de développement de Google Chrome, je vois une balise #shadow-rootjuste en dessous <html lang="en">. que fait-il et à quoi sert-il? Je ne le vois ni dans Firefox ni dans IE; uniquement dans Chrome, est-ce une fonctionnalité spéciale?

Si je l'ouvre, il affiche <head>et <body>et un lien à côté de named reveal, en cliquant, il pointe vers le <head>et <body>, rien d'autre.

html google-chrome dom google-chrome-devtools Andrew
la source

Réponses:

97

Ceci est un indicateur spécial de l'existence d'un DOM Shadow . Celles-ci existent depuis des années, mais les développeurs n'ont jamais reçu d'API jusqu'à récemment. Chrome a cette fonctionnalité depuis un certain temps, les autres navigateurs sont toujours en train de rattraper leur retard. Il peut être basculé dans les paramètres DevTools sous la section "Éléments". Décochez la case "Afficher le DOM Shadow de l'agent utilisateur". Cela masquera au moins tous les DOM Shadow créés en interne (comme les éléments sélectionnés.) Je ne suis pas sûr tout de suite si cela affecte ceux créés par l'utilisateur, tels que les éléments personnalisés.

Celles-ci apparaissent également dans des choses comme les iframes, où vous avez une arborescence DOM distincte imbriquée dans une autre.

Le DOM Shadow dit simplement qu'une partie de la page a son propre DOM. Les styles et les scripts peuvent être définis dans cet élément, de sorte que ce qui y est exécuté ne s'exécute que dans cette limite.

C'est l'un des principaux éléments nécessaires au fonctionnement des composants Web . Il s'agit d'une nouvelle technologie permettant aux développeurs de créer leurs propres composants encapsulés que les développeurs peuvent utiliser comme n'importe quel autre élément HTML.

Garbee
la source
C'est donc une question évidente: comment utiliser ces éléments personnalisés ou composants Web créés pour n'importe quel projet? Disons que j'utilise Polymer ...
Kushal Jayswal
62

À titre d'exemple de Shadow DOM, lorsque vous avez une <video>balise sur une page Web, elle est affichée comme une seule balise dans le DOM principal, mais si vous activez Shadow DOM, vous pourrez voir le HTML du lecteur vidéo (lecteur DOM).

DOM de l'ombre

Ceci est expliqué avec justesse dans cet article, http://webcomponents.org/articles/introduction-to-shadow-dom/

Nagendra Rao
la source
Je reçois un avertissement de sécurité de Firefox lorsque je suis le lien webcomponents.org, une sorte de problème de certificat.
Sebastian Norr
1
Ouais, on dirait que leur certificat SSL doit être renouvelé. Vous pouvez toujours afficher le site en ignorant l'avertissement.
Nagendra Rao
5

Dans le cas des composants Web, il existe un problème fondamental qui rend les widgets construits à partir de HTML et JavaScript difficiles à utiliser.

Problème : l'arborescence DOM à l'intérieur d'un widget n'est pas encapsulée à partir du reste de la page. Ce manque d'encapsulation signifie que votre feuille de style de document pourrait s'appliquer accidentellement à des parties à l'intérieur du widget; votre JavaScript pourrait accidentellement modifier des parties à l'intérieur du widget; vos identifiants peuvent chevaucher des identifiants à l'intérieur du widget et ainsi de suite.

Shadow DOM résout le problème d'encapsulation de l'arborescence DOM .

Par exemple, si vous aviez un balisage comme celui-ci:

<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>

puis au lieu de

Hello, world!

votre page ressemble à

こんにちは、影の世界!

Non seulement cela, si JavaScript sur la page demande quel est le contenu textContent du bouton, il n'obtiendra pas “こんにちは、影の世界!”, mais “Hello, world!” parce que le sous-arbre DOM sous la racine de l'ombre est encapsulé .

REMARQUE : J'ai repris le contenu ci-dessus sur https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ car cela m'a aidé à comprendre un peu mieux le shadow DOM que les réponses déjà ici. J'ai ajouté du contenu pertinent ici afin qu'il aide les autres, mais jetez un œil au lien pour une discussion détaillée à ce sujet.

Aniket Thakur
la source