Webコンポーネント、Shadow DOMイベントを追加しますか？

Question

私は3ページあります。 最初はインデックスページ、2ページ目はインデックスのコンポーネントです。 3番目のページのコンポーネントを3番目に配置します。

メインのコードは以下の通りです： main.htmlと：

<link class="abc" rel="import" tag="linkHtml" href="child.html /> 
<say-hi name="aaaa"></say-hi> 
<shadow-element> 
<span>(I'm in the light span dom)</span> 
<div>(I'm in the light div dom)</div> 
</shadow-element> 

のchild.html：

<template id="t1"> 
.... 
<my-search value="Search"></my-search> 
<content select="div"></content> 
</template> 

サブのchild.html：

<template id="t2"> 
Search:<input type="text" id="txt1" /> 
<input type="button" id="btn1" value="Search" /> 
<template id="t2"> 

<script> 
//mainDoc 
var importDoc_sub = document.currentScript.ownerDocument; 

var proto3 = Object.create(HTMLElement.prototype); 

proto3.createdCallback = function(){ 

    var template = importDoc_sub.querySelector("#t2"); 

    var clone = document.importNode(template.content,true); 

    var root = this.createShadowRoot(); 
    root.appendChild(clone); 
} 

document.registerElement("my-search",{prototype:proto3}); 

//it can not register click event for btn1 button 
document.addEventListener("click",function(e){ 
    console.log(e.target.id); 
},false); 

//how to add event for the btn1 
//todo 

の質問はどのようにありますShadow DOMにbtn1のイベントを追加する。

Answer 1

ShadowRoot.querySelectorで要素をクエリできます。したがって、答えは次のようになります。

root.querySelector('#btn1').addEventListener("click", ....); 

注： ポスターはシャドウDOM仕様に私の名前を見つけたので、私はポスターからこの問題について直接メールを受け取りました。したがって、私はここに答えています。