Search code examples
polymer-2.x

Firing an event from parent to child element in Polymer 2.0

Can somebody provide an example of sending an event from parent to child in Polymer 2.o custom element?

I tried with following: 

<child-element> 
this.addEventListener('dbinit', this._evdbInitStatus);

and 

<parent-element>
             this.dispatchEvent(new CustomEvent('dbinit', {detail: {kicked: true}}));

The call back does not get invoked.

Solution

  • This is not really related to Polymer itself, as you can see in the documentation on how events work, here, events capturing stops at the element that triggered the event and the event bubbling (as the name suggests, the events bubble up) starts from the element and goes up in the tree.

    So, in other words, an event fired by a parent element won't be captured by a child element. You will need to use a data binding to pass data down.

    To keep a consistent, predictable flow of data, in general, it's better anyway if data travels down via data binding and up via events.