<!doctype html>
<template id=t>
<div>
<button id=a>a</button>
</div>
<div>
<button id=b>b</button>
</div>
</template>
<script>
customElements.define("ele-ment", class extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: "open" }).append(
document.querySelector("#t").content.cloneNode(true)
)
this.addEventListener("click", eve => {
console.log("this listener", eve.target)
})
this.shadowRoot.addEventListener("click", eve => {
console.log("shadow listener", eve.target)
})
}
})
</script>
<ele-ment></ele-ment>
ele-ment タグの this と shadowRoot にクリックつける
ele-ment 内のボタンを押すと
shadow listener <button id="b">b</button>
this listener <ele-ment>…</ele-ment>
shadowRoot の方が内側にあるので先にキャプチャする
shadowDOM の内側だから shadow listener の方では button 要素が target
shadowDOM の外側になる this では自身がイベントの target
