javascript - Polymer automatic node finding with dynamic id value

Question

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
    }
});

Answer 1

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