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 (without style): ``` ``` Index.html code (whitout style): ```

Accepted Answer

```
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)

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

Solution

Problem