this.$.* isn't set if an element * is inside a dom-if block and the condition evaluates to true

[blasten]

If I have the following code:

<template is="dom-if" if="[[editable]]">
      <paper-input id="input"></paper-input>
</template>

but this.$.input is always undefined even if editable === true. I found a workaround using this.$$('#input').

[zoechi]

This is by design and mentioned in the Polymer docs. $ supports only access to statically added elements (no if/repeat or imperatively added elements) .

[blasten]

oh. I see good to know. Thanks!

[arthurevans]

This is a documented limitation of this.$:

https://www.polymer-project.org/0.8/docs/devguide/local-dom.html#node-finding

(Need to make this clearer; we emphasized it more in the 0.5 docs.)

Apparently we don't document this.$$ (I just heard of it now), so I'm adding that, too.

[blasten]

@arthurevans thanks!

[stevenjb]

I discovered this the hard way. It might be nice to add an additional note in the dom-if and dom-repat documentation warning developers about this, given how common usage of this.$. is in the examples I have seen.