javascript - 如何监听在子元素的 shadow dom 中触发的事件？

Question

我有两个网络组件，一个类似于列表项，另一个是容器。在列表项中有一个按钮，它调度一个事件 onclick。这两个组件都使用单独的影子域。

<custom-list>
        <custom-list-item></custom-list-item>
        <custom-list-item></custom-list-item>
        <custom-list-item></custom-list-item>
</custom-list>

我如何在“custom-list”中监听“custom-list-item”中的按钮发出的事件？

Answer 1

在容器自定义元素中<custom-list> , 只需收听 click Shadow DOM 根上的元素。 click内部 Shadow DOM 中的元素发出的事件会自然地冒泡到它的容器。

this.shadowRoot.addEventListener( 'click', ev => console.log( ev.target.id ) )

您还可以实现 handleEvent()处理自定义元素内管理的所有事件的方法:

customElements.define( 'custom-list-item', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `<button>Click</button>`             
    }  
} )

customElements.define( 'custom-list', class extends HTMLElement {
    constructor() {
        super() 
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `
                <custom-list-item id=1></custom-list-item>
                <custom-list-item id=2></custom-list-item>
                <custom-list-item id=3></custom-list-item>` 
        this.shadowRoot.addEventListener( 'click', this )
    }
    handleEvent( ev ) {
        console.log( ev.target.id )
    }
} )

<custom-list></custom-list>