Polymer automatic node finding with dynamic id value
javascript, polymer
Solution
It's true that a JavaScript hash can be accessed using either dot `.` or array `[]` notation. If you have a literal name, you can use dot notation `this.$.some_id`. If you have an indirection, like `this.id = 'some_id'`, then you can use array notation `this.$[this.id]` to find the same value.
The tricky part is that Polymer only populates `$` array after first stamping the template, which happens before `ready`. If you had an external binding to `this.id`, `this.$.[this.id]` would work, but since you are setting `this.id` in `ready` it's too late for the `$` convenience.
In this case, you can instead query your shadowRoot directly:
`this.shadowRoot.querySelector('#' + this.id)`
Pro tip: at some point a subclass may supply a new template, in which case `this.shadowRoot` will point to the new shadow-root and not the superclass version. For this reason, it's best to install a named div you can query against, e.g. `this.$.id_div.querySelector('#' + this.id')`.
Problem
How can I access node that have dynamic id value using Polymer node finding by id? For example ``` <template> <div id="{{ id }}"></div> </template> ``` and in js ``` Polymer("my-element", { ready: function() { if (!this.id) { this.id = 'id' + (new Date()).getTime(); } console.log(this.$.id); // this part needs to find my div element } }); ```