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

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').

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

oh. I see good to know. Thanks!

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.

@arthurevans

@arthurevans thanks!

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.

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

zoechi commented on May 11, 2015

blasten commented on May 11, 2015

arthurevans commented on May 11, 2015

blasten commented on May 12, 2015

stevenjb commented on Nov 30, 2015

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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