JavaScript dentro de las mejores prácticas de Sombra Dom

Question

Estoy teniendo problemas para obtener JavaScript para correr correctamente dentro de los elementos de Sombra DOM que estoy definiendo.Dado el siguiente código:

<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 está regresando NULL.Si lo envié en el documento. Sin carga, ya no arroja el error, pero al hacer clic en DIV no inicia la alerta, tampoco.

1. es documento. ¿Con carga de la forma correcta de manejar cuando mi código se ejecuta en este caso?
2. es esta la forma correcta de incrustar JavaScript para los elementos de Sombra DOM?

Answer 1

Sombra Dom Tree

Debe unir su evento Dentro de la etiqueta de la plantilla a #testElement:

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

Significado para el elemento original / ShadowHost. Es decir, porque los eventos de las personas de Sombras aparecen como si se originaran en la ShadowHost.

JavaScript en realidad no se encuentra en el interior de los árboles de sombra. Consulte, por ejemplo, esta entrada de blog, que cubre exactamente ese tema:

¿Recuerdas cuando pasé todo el tiempo explicando cómo se encapsulaba y protegía la Sombra DOM CSS del documento principal y lo increíble que era todo eso? También puede pensar que Javascript funciona de la misma manera, lo hice al principio, pero en realidad no es el caso. [...] http://robdodson.me/blog/2013/09/02 / shadow-dom-javascript /

Como explicación para reorganizar los eventos a la ShadowHost, el autor escribe:

Esto se debe a que eventos provenientes de los nodos de la sombra deben ser retargetados, de lo contrario, romperían la encapsulación. Si el objetivo del evento continuó apuntando en #shadow-text, entonces cualquiera podría cavar dentro de nuestra sombra DOM y comenzar a jugar. cosas claras. http://robdodson.me/blog/2013/09/02 / shadow-dom-javascript /

Supongo que es una buena idea leer otros artículos de este blog, ya que parece cubrir el tema bastante bien.

Elementos personalizados

Con elementos HTML personalizados Tiene la capacidad de usar JavaScript dentro de los elementos HTML personalizados, consulte, por ejemplo, esta respuesta en StackOverflow.

Básicamente, debe crear un nuevo elemento HTML completo. Un tutorial está disponible en html5rocks . Creo que esto es cómo, por ejemplo, el proyecto Polymer proporciona sus eventos personalizados .