I have two web-ponents, one is something like a list-item and the other one is the container. In the list item there is a button, which dispatches an event onclick. Both ponents use separated shadow-doms.

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

How can I listen in 'custom-list' to the event that gets emitted by the button in 'custom-list-item'?

I have two web-ponents, one is something like a list-item and the other one is the container. In the list item there is a button, which dispatches an event onclick. Both ponents use separated shadow-doms.

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

How can I listen in 'custom-list' to the event that gets emitted by the button in 'custom-list-item'?

• javascript
• html
• web-ponent
• shadow-dom

2 Answers 2

In the container custom element <custom-list>, simply listen to the click element on the Shadow DOM root. The click event emitted by the element in the inner Shadow DOM will naturally bubble to its container.

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

You can also implement the handleEvent() method to process all the events managed inside your custom element:

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>

you can put an onclick event on <custom-list onclick="doSomething()"> ponent and check for event.target === custom-list-item inside the function

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