Targeted Events

Because Polymer registers event listeners on the root component, all the events fired inside of the native shadow dom will be retargeted. After a long research, I came to a conclusion that if listeners are attached to the shadow dom root (instead of the component, which is a parent to the shadow dom), events do not need to pierce the shadow dom, hence they keep the original targets. With that knowledge, I was able to attach listeners with the selector filters, so we can listen to dynamically added elements, even without an id (in order for targeted events, Polymer requires elements to have an id and be static in the template).

@template(`<ul class="list"><li class="item">Bob</li><li class="item">Fiona</li></ul>`)
class MyComponent extends TypedPolymer {
  @on("click", ".list > .item")
  doSomething(): void {
    /* ... */
  }
}
MyComponent.register();

Stopping propagation

As with native events, Typed Polymer allows to stop propagation or immediate propagation of the event. The latter has an additional shorthand, the return false;. If an event handler returns false, it will automatically call event.stopImmediatePropagation().