web-dev-qa-db-fra.com

Quelle est la racine de l'ombre

Dans les outils de développement de Google Chrome, je vois un #shadow-root sous l’étiquette <html lang="en">. que fait-il et à quoi sert-il? Je ne le vois pas dans Firefox ni dans IE; est-ce seulement une fonctionnalité spéciale dans Chrome?

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

htmlgoogle-chromedomgoogle-chrome-devtools
79
Andrew

Ceci est un indicateur spécial de l'existence d'un Shadow DOM . Celles-ci existent depuis des années, mais les développeurs n'y ont jamais été dotées d'API jusqu'à récemment. Chrome dispose de cette fonctionnalité depuis un certain temps, mais les autres navigateurs sont en train de le rattraper. Il peut être basculé dans les paramètres de DevTools dans la section "Eléments". Décochez la case "Afficher le DOM fantôme de l'agent d'utilisateur". Cela masquera au moins tous les DOM Shadow créés en interne (tels que des éléments sélectionnés). Je ne sais pas tout de suite si cela affecte les utilisateurs, tels que les éléments personnalisés.

Celles-ci apparaissent également dans des iframes, où vous avez un arbre DOM séparé imbriqué dans un autre.

Le DOM Shadow indique simplement qu’une partie de la page contient son DOM own. Les styles et les scripts peuvent être définis dans cet élément afin que ce qui y est exécuté ne soit exécuté que dans cette limite.

C’est l’une des pièces principales nécessaires au bon fonctionnement de Composants Web . Il s'agit d'une nouvelle technologie permettant aux développeurs de créer leurs propres composants encapsulés qu'ils peuvent utiliser comme n'importe quel autre élément HTML.

83
Garbee

Comme exemple de Shadow DOM, lorsque vous avez une balise <video> sur une page Web, elle ne représente qu’une balise dans le DOM principal, mais si vous activez Shadow DOM, vous pourrez voir le code HTML du lecteur vidéo (player DOM) .

 Shadow DOM

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

58
Rao

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

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

Shadow DOM répond au problème d'encapsulation de l'arborescence DOM.

Par exemple, si vous aviez des balises comme ceci:

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

alors au lieu de

Hello, world!

votre page ressemble à

こんにちは、影の世界!

Non seulement cela, si JavaScript sur la page demande ce que le texte du contenu du bouton est, il ne va pas obtenir “こんにちは、影の世界!”, mais “Hello, world!”car le sous-arbre DOM situé sous la racine de l’ombre est encapsulé.

NOTE: j'ai récupéré le contenu ci-dessus de https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ car cela m'a permis de comprendre un peu mieux le shadow DOM ici. J'ai ajouté du contenu pertinent ici pour aider les autres, mais jetez un coup d'œil au lien pour en savoir plus.

1
Aniket Thakur