polymer, shadow dom, events and bubbeling

Question

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.

Does it fire if placed in the ready() method? I ask not from experience, but from looking at the Shop app, where shop-app includes shop-cart which includes shop-cart-item. The latter dispatches 'set-cart-item', the event listener for which is added in shop-app's ready(). — Thad
i have a setup explaining the problem: github.com/JohnGorter/polymerevent — John Gorter

John Gorter John Gorter · Accepted Answer · 2018-03-19T11:51:24

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 }));

polymer, shadow dom, events and bubbeling

1 Answers