CODEWITHSUNDEEP
polymershadow-domcustom-event
John Gorter
John Gorter

Reputation: 2424

polymer, shadow dom, events and bubbeling

I have a polymer custom element using shadow dom (v1), this element is inside another polymer custom element, also wrapped in shadow dom..

In my understanding, when the most inner element raises an event, the most outer element (the app) should be able to listen for these events. Is this incorrect?

I have a rating component inside a review component inside an app component. the rating component throws an event: 

this.dispatchEvent(new CustomEvent('custom-event'), { bubbles:true, composed:true });

However, the code below in the app-component never gets fired..

connectedCallback() { 
  super.connectedCallback();
  this.addEventListener('custom-event', () => { console.log('a');});
}

Am I incorrect in assuming the event should bubble all the way up the different shadow doms to the window eventually, unless someone stops the propagation?

Thanx for any answers..

John.

Upvotes: 1

Views: 88

Answers (1)

John Gorter
John Gorter

Reputation: 2424

Found it, I set the options as argument to the dispatchEvent instead of adding the options to the CustomEvent.

so instead of 

this.dispatchEvent(new CustomEvent("event"), { options });

you have to do 

this.dispatchEvent(new CustomEvent("event", { options }));

Upvotes: 2

Related Questions