JavaScript dans les meilleures pratiques de Shadow DOM

Question

J'ai du mal à faire fonctionner JavaScript correctement dans les éléments Shadow DOM que je définis.Étant donné le code suivant :

<template id='testTemplate'>
 <div id='test'>Click to say hi</div>
 <script>
  var elem = document.querySelector('#test');
  elem.addEventListener('click', function(e) {
     alert("Hi there");
  });
</script>
</template>

<div id="testElement">Host text</div>

<script>
  var shadow = document.querySelector('#testElement').createShadowRoot();
  var template = document.querySelector('#testTemplate');
  shadow.appendChild(template.content.cloneNode(true));
</script>

document.querySelector renvoie null.Si je l'enveloppe dans document.onload, cela ne génère plus l'erreur, mais cliquer sur le div ne lance pas non plus l'alerte.

1. Document.onload est-il la bonne façon de gérer l'exécution de mon code dans ce cas ?
2. Est-ce la bonne façon d'intégrer du javascript pour les éléments shadow dom ?

Answer 1

Arbre DOM fantôme

Vous devez lier votre eventHandler à l'intérieur de la balise de modèle pour #testElement:

var elem = document.querySelector('#testElement');

Signification pour l'élément d'origine / ShadowHost.En effet, les événements de ShadowElements apparaissent comme s'ils provenaient du ShadowHost.

Javascript n'est en fait pas inclus dans ShadowDOM-Trees.Voir par exemple cette entrée de blog, qui couvre exactement ce sujet :

Vous vous souvenez quand j'ai passé tout ce temps à expliquer comment le CSS Shadow DOM était encapsulé et protégé du document parent et à quel point tout cela était génial ?Vous pourriez aussi penser que JavaScript fonctionne de la même manière (c’était mon cas au début), mais ce n’est en réalité pas le cas.[...] http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

Pour expliquer la réorganisation des événements sur ShadowHost, l'auteur écrit :

Ceci est dû au fait les événements provenant des nœuds fantômes doivent être reciblés, sinon ils briseraient l'encapsulation. Si la cible de l'événement continuait à pointer vers #shadow-text alors n'importe qui pourrait fouiller à l'intérieur de notre Shadow DOM et commencer à tout gâcher. http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

Je suppose que c'est également une bonne idée de lire d'autres articles de ce blog, car ils semblent assez bien couvrir le sujet.

Éléments personnalisés

Avec les éléments HTML personnalisés, vous avez la possibilité d'utiliser Javascript à l'intérieur d'éléments HTML personnalisés, voir par exemple cette réponse sur Stackoverflow.

Fondamentalement, vous devez créer un nouvel élément HTML complet.Un tutoriel est disponible sur html5rocks.Je pense que c'est ainsi que, par exemple, le projet Polymer propose ses événements personnalisés.