Polymer Access Element Inside of Nested Template by Id

nested, polymer

Solution

Using `this.$.<id>` syntax does work with inner templates. The problem in your example is that the inner `<template>` is inert, and it isn't rendered. I've rewritten your example so that the inner `<template>` is rendered, and you can see that the `this.$.<id>` syntax works for both the outer and inner `<template>`s:

<polymer-element name="my-element">
  <template>
    <div id="foo">
      <p>Old foo</p>
      <template if="{{showBar}}">
        <div id="bar">
          <p>Old bar</p>
        </div>
      </template>
    </div>
    <button on-tap="{{changeContent}}">Change Content</button>
  </template>
  <script>
    Polymer({
      showBar: true,
      changeContent: function() {
        this.$.foo.querySelector('p').textContent = 'New foo';
        this.$.bar.querySelector('p').textContent = 'New bar';
      }
    });
  </script>
</polymer-element>

Pressing the "Change Content" button finds the `#foo` and `#bar` `<div>`s and updates the text of the contained `<p>`s.

You can try out the answer at http://jsbin.com/roceta/edit.

Problem

Polymer provides access to elements by id via `this.$['foo']`. However, I find that I am unable to access elements by id that are in nested templates. ``` <template> <div id="foo"></div> <template> <div id="bar"></div> </template> </template> ``` In this situation `this.$.foo` works but `this.$.bar` does not. Are you able to access elements inside of a nested template by id and if so how? In my code I'm using a conditional template to include some html if a attribute is true. I was providing this functionality in javascript by editing the html but think that conditional templates more clearly show what is going on and I would prefer to use this method.

Original source