JavaScript innerhalb von Shadow DOM-Best Practices

Question

Ich habe Probleme, JavaScript in von mir definierten Shadow-DOM-Elementen ordnungsgemäß auszuführen.Angesichts des folgenden Codes:

<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>

Dokument.querySelector gibt null zurück.Wenn ich es in ein Dokument einwickle.beim Laden wird der Fehler nicht mehr ausgegeben, aber durch Klicken auf das Div wird die Warnung auch nicht gestartet.

1. Ist Dokument.onload die richtige Vorgehensweise, wenn mein Code in diesem Fall ausgeführt wird?
2. Ist dies der richtige Weg, um Javascript für Shadow-Dom-Elemente einzubetten?

Answer 1

Schatten-DOM-Baum

Sie müssen Ihren EventHandler innerhalb des Vorlagen-Tags an Folgendes binden #testElement:

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

Bedeutung für das ursprüngliche Element / ShadowHost.Das liegt daran, dass Ereignisse von ShadowElements so aussehen, als ob sie vom ShadowHost stammen.

Javascript ist eigentlich nicht innerhalb von ShadowDOM-Bäumen begrenzt.Siehe zum Beispiel diesen Blogeintrag, der genau dieses Thema behandelt:

Erinnerst du dich, als ich die ganze Zeit damit verbracht habe zu erklären, wie Shadow DOM CSS gekapselt und vor dem übergeordneten Dokument geschützt wurde und wie großartig das alles war?Sie könnten auch denken, dass JavaScript genauso funktioniert — ich habe es zuerst getan —, aber das ist eigentlich nicht der Fall.[...] http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

Als Erklärung für die Neuanordnung der Ereignisse auf dem ShadowHost schreibt der Autor:

Dies liegt daran, dass ereignisse, die von Schattenknoten kommen, müssen neu ausgerichtet werden, da sie sonst die Kapselung unterbrechen würden. Wenn das Ereignisziel weiterhin auf zeigt #shadow-text dann könnte jeder in unserem Schattendom herumgraben und anfangen, Dinge durcheinander zu bringen. http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

Ich denke, es ist eine gute Idee, auch andere Artikel dieses Blogs zu lesen, da er das Thema ziemlich gut zu behandeln scheint.

Benutzerdefinierte Elemente

Mit benutzerdefinierten HTML-Elementen haben Sie die Möglichkeit, Javascript innerhalb von benutzerdefinierten HTML-Elementen zu verwenden, siehe zum Beispiel diese Antwort auf Stackoverflow.

Grundsätzlich müssen Sie ein komplett neues HTML-Element erstellen.Ein Tutorial ist verfügbar bei html5rocks.Ich denke, so sieht es zum Beispiel das Polymer-Projekt vor seine benutzerdefinierten Ereignisse.