Fondations des WC - Shadow DOM

Dans cette article, nous allons nous intéresser aux fondations des composants web. Cela permettra de comprendre à la fois leur raison d’être et aussi comment ils sont construits.

Nous utiliserons des exemples simples et n'utiliserons pas de polyfill. Pour tester les bouts de code de cet article, le navigateur Google Chrome est le plus approprié.

Pour rappel, les spécifications des Web Components concernent :

  1. Les Templates : Permettent la réutilisation de fragments de code à l'aide de la balise <template>
  2. Le Shadow DOM : Permet l'encapsulation de sous-arbres DOM dans un élément hôte donnée.
  3. Les Custom Elements : Permettent la création et l'enregistrement de nouveaux éléments HTML
  4. Les Imports : Permettent l'importation de contenus dans un document HTML

Le Shadow DOM

C'est quoi au fait ?

Le Shadow DOM est une hiérarchie d'éléments HTML encapsulée dans un élément HTML dit élément hôte. Cette hiérarchie n'est pas accessible au document abritant l'élément. Ce concept est utilisé dans l'implémentation des balise natives HTML. l'exemple le plus parlant est la balise <video>.

Pour voir le Shadow DOM dans Google Chrome, il faut ouvrir DevTools, aller dans paramètres puis activer Show user agent shadow DOM

On voit bien que l'élément <video> est construit à partir d'autres éléments HTML standards. Tous ces éléments sont encapsulés et sont inaccessibles à partir du document.

Comment ajouter un Shadow DOM à un élément hôte ?

On considère le code HTML suivant :

HTML

  1. <h1>Ajout dans le shadow DOM</h1>
  2. <div id="hote"></div>

Nous allons ajouter dans la balise hôte une balise h2

Javascript

  1. // Création d'un élément h2
  2. var h2 = document.createElement('h2');
  3. h2.textContent = 'Je suis dans le Shadow DOM';
  4. // Récupération de la référence de l'élément hôte
  5. var hote = document.querySelector('#hote');
  6. // Création du Shadow DOM
  7. var shadow = hote.createShadowRoot();
  8. // insertion de l'élément h2 dans le shadow dom
  9. shadow.appendChild(h2);

Si on ajoute a la page la feuille de styles CSS suivante, la déclaration n'affectera pas la balise se trouvant dans le Shadow DOM.

CSS

  1. h2 {
  2.     color: orangered;
  3. }

Et si on exécute l'instruction javascript document.querySelectorAll('h2'), la collection retournée sera vide.

Résultat :

Conclusion

Le Shadow DOM permet d'encapsuler un sous-arbre DOM dans un élément HMTL. Ni les styles ni les scripts Javascript n’affecteront pas les éléments de ce sous-arbre. Cependant, il existe des moyens pour percer cette coquille et accéder à l'intérieur de l'élément, à la fois avec les styles CSS et les scripts Javascript.

Commentaires

It is four Km from travels for kodaikanal Bus Stand.

CMS to create amazinjg free hosted websites.

Here is my blog Bonus Web design template (www.Zaizhuli.com)

If you desire to grow your know-how simply keep visiting this web site and be updated with the newest gossip posted Click Here.

Wonderful web site. A lot of helpful information here.

I'm sending it to a few friends ans also sharing in delicious.

And certainly, thank you on your effort!

my website: Social Warfare