title: Polymer 1.0 can't access elements within nested <template> element
body: <p>I am using Polymer 1.0 and I am building a small accordion example. I have data binding to the accordion text fine, I just want to change the icon of the accordion when I click it.</p>
  
  <p>Below is my code</p>
  
  <pre><code>&lt;dom-module id="ab-accordion"&gt;
    &lt;template&gt;
      &lt;iron-ajax              
        auto
        handle-as="json"
        on-response="handleResponse"
        debounce-duration="300"
        id="ajaxreq"&gt;&lt;/iron-ajax&gt;
  
      &lt;template is="dom-repeat" id="accordion" items="{{items}}" as="item"&gt;
        &lt;div class="accordion"  on-click="toggleParentAcc"&gt;
          &lt;div id="accordion_header" class="accordion__header is-collapsed"&gt;
            &lt;i class="icon icon--chevron-down"&gt;&lt;/i&gt;
            &lt;span&gt;{{item.name}}&lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="standard_accordion_body" class="accordion__body can-collapse"&gt;
            &lt;div class="accordion__content"&gt;
              &lt;content id="content"&gt;&lt;/content&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/template&gt;
    &lt;/template&gt;   
    &lt;script&gt;
      Polymer({
        is: "ab-accordion",
        //Properties for the Element
        properties: {
          accordian: Object,
          childaccordions: Object,
          // Param passed in from the element - Set if the accordion is open by default.
          open: String,
          data: String,
          reqUrl: {
            type: String,
            value: "https://example.com/service.aspx"
          },
        },
        ready: function () {
          this.items = [];
        },
        attached: function () {
          // Run once the element is attached to the DOM.
        },
        toggleParentAcc: function (event) { // Toggle the classes of the accordions
          //This is where I want to toggle the  class
          this.$.accordion_header.classList.toggle('is-collapsed');
          if (typeof event !== 'undefined') {
            event.stopPropagation(); // Stop the click from going up to the parent.
          }
        },
        handleResponse: function (e) {
          this.items = e.detail.response.sports;
        }
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>Basically inside the <code>toggleParentAcc</code> function I want to toggle the class of the div with ID <code>accordion_header</code>. But I just get undefined or null. </p>
  
  <p>I have tried the following two lines: </p>
  
  <pre><code>this.$.accordion_header // #1
  this.$$('#accordion_header') // #2
  </code></pre>
  
  <p>How I access that element inside the dom-repeat?</p>
  
  <p><strong>UPDATE:</strong> I can't even access the elements within the  when inside the attached function.</p>
  
  <pre><code>attached: function(){
   this.$.accordion_header // This is null?!
   this.$$('#accordion_header'); // this is also null!
  } 
  </code></pre>