Using querySelector to find nested elements inside a Polymer template returns null

Question

I\'m trying to use paper-tabs inside new element (tabs-list) but after print tabs I can\'t use querySelector to change selected one.

Element code (withou

Answer 1

document.querySelector('paper-tabs');

doesn't find the paper-tabs element, because it is hidden inside the shadow DOM of the tab-list element.

You can simply give paper-tabs an id, say tabs, and access it like so

this.$.tabs

(See http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding.)

There is also the option to access the shadow DOM directly

this.shadowRoot.querySelector('paper-tabs');

If you only want to listen for changes on the paper-tabs selection, you can use a change watcher:

<paper-tabs selected="{{currentTab}}">

Polymer('tab-list', {
  currentTab: 'all',
  currentTabChanged: function() {
    console.log(this.currentTab);
  }
});

(See http://www.polymer-project.org/docs/polymer/polymer.html#change-watchers)

Answer 2

      <template is="dom-repeat" items="{{dataobject}}">
        <div on-tap="_showdetail">
          <iron-collapse id="collapse">??</iron-collapse>
        </div>
      </template>

And to toggle the iron-collapse elements inside the dom-repeat I use

 _showdetail: function(e){
    Polymer.dom(e.currentTarget).querySelector('#collapse').toggle();
},