Locating elements inside Polymer dom-repeat

Question

I'm using Polymer 1.0 and I'm trying to access items from script in the below template.

I have spent a while with this, and I just can't figure out from the scope of this template, how to access 'my-swiper-icon' elements.

In short, how do I locate "#slide_n #item_m"? That path will not work on a query selector. For completeness #slide_n does work, but it has a #document_fragment child so it isn't useful... right?

<dom-module id="my-swiper">
  <template>
    <style include="my-swiper-import">
      :host {
        display: block;
      }
    </style>

    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <template id="slides_template" is="dom-repeat" items="{{slides}}">
            <div class="swiper-slide" id="slide_{{index}}">
              <div>
                <template id="items_template" is="dom-repeat" items="{{item.items}}">
                  <my-swiper-icon id="item_{{index}}" data="{{item}}"/>
                </template>
              <div>
            </div>
          </template>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

  </template>
  <script>
    (function() {
      'use strict';

      Polymer({
        is: "my-swiper",

        properties: {
          slides: {
            type: Array,
            value: [],
            notify: true,
            observer: '_slidesChanged'
          }
        },

        listeners: {
          'tap': '__tap',
          'resize': '__resized'
        },

        __tap: function(e) {    
          //
        },

        __resized: function(e) {
          // How do I locate "#slide_n #item_m" ????
        },

        _slidesChanged: function(newValue, oldValue) {
          //
        },

        ready: function() {
          this.slides = [                
            {
              items: [
                { hash: 'foobar' },
                { hash: 'foobar' },
                { hash: 'foobar' },
                { hash: 'foobar' }
              ]
            },
            {
              items: [
                { hash: 'barfoo' },
                { hash: 'barfoo' }
              ]
            }
          ];
        },

        attached: function() {
          this.async(function() {
            var swiper = new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              paginationClickable: '.swiper-pagination',
              nextButton: '.swiper-button-next',
              prevButton: '.swiper-button-prev',
              spaceBetween: 30,
              hashnav: true
            });
            this.__resized(null);
            window.addEventListener("resize", this.__resized.bind(this));
          });
        }

      });

    })();
  </script>

</dom-module>

Answer 1

Polymer provides the this$.someId shorthand to access elements in the local DOM of an element but this doesn't work for dynamically created elements (for example within template="dom-if" or template="dom-repeat" or appendNode(), ... For dynamically created nodes use Polymer.dom(this.root).querySelectorAll(selector) instead.