Javascript all'interno delle migliori pratiche di Shadow Dom

Question

Sto avendo problemi a ottenere JavaScript per funzionare correttamente all'interno degli elementi Shadow Dom, sto definendo.Dato il seguente codice:

<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 restituisce NULL.Se la avvolgo in document. Lololo non getta più l'errore, ma facendo clic sul div non lancia l'avviso, neanche.

.
1. è il documento. Carica il modo corretto da gestire quando il mio codice funziona in questo caso?
2. è questo il modo corretto per incorporare JavaScript per gli elementi Shadow Dom?

Answer 1

Shadow Dom Tree

È necessario associare il tuo EventHandler all'interno del tag del modello a #testElement:

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

.

significato per l'elemento originale / shadowhost. Cioè, perché gli eventi da shadowelements appaiono come se fossero originati dall'ombra shadowhost.

JavaScript non è in realtà non oscillato all'interno degli alberi shadowdom. Vedere Ad esempio questa entrata del blog, che copre esattamente quell'argomento:

.

Ricorda quando ho passato tutto quel tempo spiegando come Shadow Dom CSS è stato incapsulato e protetto dal documento genitore e quanto fosse fantastico? Potresti anche pensare che JavaScript funzioni allo stesso modo, ho fatto all'inizio, ma in realtà non è il caso. [...] http://robdodson.me/blog/2013/09/02 / shadow-dom-javascript /

Come spiegazione per riorganizzare gli eventi all'ombra che l'autore scrive:

.

Questo perché Gli eventi provenienti dai nodi shadow devono essere retartigati altrimenti si rompono l'incapsulamento. Se il bersaglio dell'evento ha continuato a puntare a #shadow-text, chiunque potrebbe scavare all'interno del nostro Dom Shadow Dom e iniziare a scherzare cose sopra. http://robdodson.me/blog/2013/09/02 / shadow-dom-javascript /

Suppongo che sia una buona idea leggere anche altri articoli di questo blog, poiché sembra coprire l'argomento abbastanza bene.

Elementi personalizzati

Con gli elementi HTML personalizzati hai la possibilità di utilizzare JavaScript all'interno di elementi HTML personalizzati, vedere ad esempio Questa risposta Stackoverflow.

Fondamentalmente è necessario creare un nuovo elemento HTML completo. Un tutorial è disponibile su html5rocks . Penso che questo sia come ad esempio il progetto Polymer fornisce i suoi eventi personalizzati .