如何监听在子元素的阴影 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 onclick="doSomething()"> 组件上放置一个 onclick 事件并在函数内检查 event.target === custom-list-item

doSomething(event) {
  event.target === custom-list-item
  // do what you want to do
}

Answer 2

在容器自定义元素 <custom-list> 中，只需在 Shadow DOM 根上监听 click 元素。内部阴影 DOM 中的元素发出的 click 事件将自然地冒泡到其容器。

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>

如何监听在子元素的阴影 dom 中触发的事件？

How to listen to events that got fired in shadow dom of child element?

html

javascript

web-component

shadow-dom