JavaScript nas práticas recomendadas do Shadow DOM

Question

Estou tendo problemas para fazer o JavaScript funcionar corretamente nos elementos Shadow DOM que estou definindo.Dado o seguinte 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á retornando nulo.Se eu envolvê-lo em document.onload, o erro não será mais gerado, mas clicar no div também não iniciará o alerta.

1. Document.onload é a maneira correta de lidar com a execução do meu código neste caso?
2. Esta é a maneira correta de incorporar javascript para elementos shadow dom?

Answer 1

Árvore DOM de sombra

Você deve vincular seu eventHandler dentro da tag template para #testElement:

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

Significado para o elemento original / ShadowHost.Isto é, porque os eventos do ShadowElements aparecem como se tivessem sido originados pelo ShadowHost.

Na verdade, o Javascript não tem escopo dentro do ShadowDOM-Trees.Veja, por exemplo, esta entrada de blog, que cobre exatamente esse tópico:

Lembra quando passei todo esse tempo explicando como o Shadow DOM CSS foi encapsulado e protegido do documento pai e como tudo isso foi incrível?Você também pode pensar que o JavaScript funciona da mesma maneira – eu fiz no início – mas na verdade não é o caso.[...] http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

Como explicação para reorganizar os eventos no ShadowHost, o autor escreve:

Isto é porque eventos provenientes de nós de sombra precisam ser redirecionados, caso contrário, quebrariam o encapsulamento. Se o alvo do evento continuasse apontando para #shadow-text então qualquer um poderia vasculhar nosso Shadow DOM e começar a bagunçar as coisas. http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

Suponho que seja uma boa ideia ler também outros artigos deste blog, pois parece cobrir muito bem o assunto.

Elementos personalizados

Com elementos HTML personalizados você tem a capacidade de usar Javascript dentro de elementos HTML personalizados, veja por exemplo esta resposta no Stackoverflow.

Basicamente você deve criar um novo elemento HTML completo.Um tutorial está disponível em html5rocks.Acho que é assim que, por exemplo, o projeto Polymer fornece seus eventos personalizados.