Using a listener for a tap inside a dom-if

Question

I have a simple button that I want to trigger something when pressed. I gave the button an id and created a listener for id.tap . This works fine, but when I put my button inside a template[is=dom-if] it stops working. Is this meant to work like this? How do I solve this?

Answer 1

Elements inside a dom-if don't exist yet when the element is created, so they're not accessible using this.$ . Either give the element an on-tap attribute, or use Polymer.dom(this.root).querySelector to find the element.

Answer 2

FYI, the documentation recommends against the liberal use of dom-if .

Since it is generally much faster to hide and show elements rather than destroy and recreate them, conditional templates are only useful to save initial creation cost when the elements being stamped are relatively heavyweight and the conditional may rarely (or never) be true in given usages. Otherwise, liberal use of conditional templates can actually add significant runtime performance overhead.

Using hidden$=condition might be the best solution.