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:

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

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