シャドウDOMベストプラクティス内のJavaScript.

Question

シャドウDOM要素内でJavaScriptを正しく実行するのに問題があります。次のコードを考えると：

<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がNULLを返しています。Document.Onloadでラップするとエラーが発生しなくなりましたが、DIVをクリックするとアラートが起動しません。

1. はDocument.onloadこのケースでコードが実行されたときに処理する適切な方法は？
2. シャドウDOM要素のJavaScriptを埋め込むための適切な方法は？

Answer 1

シャドウDOMツリー

#testElementにテンプレートタグの内側にBindHandlerをバインドする必要があります。

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

.

元の要素/ shadowhostに意味します。つまり、ShadowElementsからのイベントはShadowhostによって発生したかのように表示されます。

JavaScriptは実際にはShadowDOM-Treeの内側にはスコープされていません。次のトピックを正確にカバーするこのブログエントリの例：

シャドウDOM CSSがどのようにカプセル化され、親文書からどのように保護されていたか、およびすべてがすべてのことをどのようにあったかを説明したときのすべての時間を忘れないでください。また、JavaScriptが同じように機能すると考えるかもしれません - 私は最初にしましたが、実際にはそうではありません。 [...] http://robdodson.m/blog/2013/09/02. / shadow-dom-javascript /

著者のShadowhostへのイベントを並べ替えるための説明：

シャドウノードからのイベントは、それ以外の場合はカプセル化を解除する必要があるためです。イベントターゲットが#shadow-textを指し続けている場合は、どなたでも私たちのシャドウDOMの内側を掘り下げてめちゃくちゃを開始できます。物事を立てます。 http://robdodson.m/blog/2013/09/02. / shadow-dom-javascript /

このブログの他の記事を読むことをお勧めします。トピックをかなりよくカバーしているようです。

カスタム要素

カスタムHTML要素を使用するカスタムHTML要素の中でJavaScriptを使用する機能をお持ちです。たとえば、この回答 ON StackOverflow。

基本的に完全な新しいHTML要素を作成する必要があります。チュートリアルが利用可能です html5rocks 。これは、例えばPolymerプロジェクトがどのようにして提供されると思いますそのカスタムイベント。