Webkomponenten, Shadow DOM Event hinzufügen?

Question

Ich habe drei Seiten. Die erste Seite ist die Indexseite, die zweite Seite ist die Komponente für den Index. Drittens ist es die Komponente für die zweite Seite.

Der Hauptcode ist unten: 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 

Die Frage ist, wie Event für btn1 in Shadow DOM hinzufügen.

Answer 1

Sie können das Element von ShadowRoot.querySelector abfragen. Somit sollte die Antwort sein:

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

Hinweis: ich die direkte E-Mail über diese Frage aus dem Plakate erhalten, weil das Plakat meinen Namen auf dem Schatten DOM-Spezifikation gefunden. Also antworte ich hier.