Heya! Still somewhat new to Polymer so I'm pretty sure I'm doing something wrong with binding, templating, models, etc. But here's what I'd like to do in a nutshell... given a template within another template, I'd like to be able to access elements that are added after initialization by ID. In other words, given this:
<template>
<template repeat="{{a in myList}}">
<span id="element{{a}}">Span {{a}}</span>
</template>
</template>
myList: [1]
I see a span tag with ID element1 and can access it just like I expect to with this.$.element1. However, when I dynamically add subsequent elements to myList (e.g. this.myList.push(2)), I can't seem to access them; this.$.element1 is still mapped correctly, but this.$.element2 is nowhere to be found.
I've put together a
fiddle that describes the problem. Click Add Elements to add elements to the list, the click Test Results and check the console for my thought process.
Is there something additional I need to do to the model to get similar access to this.$.element2? I can access it through this.shadowRoot.querySelector('#element2'), but I'm wondering why I don't need to do that for element1. Thanks!