I'm trying to avoid event capturing in a polymer custom element, so I want to trigger an event only when is provoke by the ['items'] contained in the element.
I have two different custom elements. Both custom elements are extending core-selector. One is wrapping the other.
So I have something like:
<my-parent-element>
<parentItem>I'm a parent
<my-child-element>
<childItem>I'm a child</childItem>
<childItem>I'm a child</childItem>
<childItem>I'm a child</childItem>
</my-child-element>
</parentItem>
<parentItem>I'm a parent</parentItem>
<parentItem>I'm a parent</parentItem>
</my-parent-element>
Custom elements definition
<my-parent-element>has it's own core-Selected event handler.<my-child-element>has no script neither event handlers.
My goal:
- Only when a item from
<my-parent-element>is selected the event is triggered. - I want to maintain the components independence, so I would like not to modify the child.
Situation
Based on this answer I'm stopping the method checking the item received, but I think is not a proper solution...
onCoreSelect: function (event, detail, sender) {
if (!detail.item.classList.contains('child')) {
return; //Dislike!
}
);
...because I would like even not trigger the method.
You can reproduce it in this Plunker. onCoreSelect writes details, but only selecting parents should do it. As you can see, when clicking any children it triggers the event.
Thx!
