Веб-компоненты, добавьте событие Shadow DOM?

Question

У меня есть три страницы. Первый - это индексная страница, вторая страница - это компонент для индекса. В-третьих, это компонент для второй страницы.

Основной код ниже: 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> 

Sub-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 

Вопрос заключается в том, как добавить событие для btn1 в Shadow DOM.

Answer 1

Вы можете запросить элемент ShadowRoot.querySelector. Таким образом, ответ должен быть:

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

Примечания: я получил по электронной почте письмо об этом вопросе от плаката, потому что плакат нашел свое имя на спецификации Shadow DOM. Таким образом, я отвечаю здесь.