title: Using querySelector to find nested elements inside a Polymer template returns null
body: <p>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.</p>
  
  <p><strong><em>Element code (without style):</em></strong></p>
  
  <pre><code>&lt;link rel="import" href="../components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../sprint-service/sprint-service.html"&gt;
  &lt;link rel="import" href="../components/paper-tabs/paper-tabs.html"&gt;
  
  &lt;polymer-element name="tab-list" attributes="show"&gt;
    &lt;template&gt;
      &lt;sprint-service id="service" sprints="{{sprints}}"&gt;&lt;/sprint-service&gt;   
      &lt;paper-tabs selected="all" valueattr="name" self-end&gt;
        &lt;paper-tab name="all"&gt;ALL&lt;/paper-tab&gt;
        &lt;template repeat="{{sprint in sprints}}"&gt;
          &lt;paper-tab name="{{sprint.id}}"&gt;{{sprint.id}}&lt;/paper-tab&gt;
        &lt;/template&gt;
      &lt;/paper-tabs&gt;
    &lt;/template&gt;
    &lt;script&gt;
      Polymer('tab-list', {
        ready: function() {
          var tabs = document.querySelector('paper-tabs');
          tabs.addEventListener('core-select', function() {
            list.show = tabs.selected;
          }) 
        } 
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p><strong><em>Index.html code (whitout style):</em></strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;unquote&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"&gt;
    &lt;script src="../components/platform-dev/platform.js"&gt;&lt;/script&gt;
    &lt;link rel="import" href="../components/font-roboto/roboto.html"&gt;
    &lt;link rel="import"
      href="../components/core-header-panel/core-header-panel.html"&gt;
    &lt;link rel="import"
      href="../components/core-toolbar/core-toolbar.html"&gt;
    &lt;link rel="import" href="tab-list.html"&gt;
    &lt;link rel="import" href="post-list.html"&gt;
  &lt;/head&gt;
  
  &lt;body unresolved touch-action="auto"&gt;
    &lt;core-header-panel&gt;
      &lt;core-toolbar&gt;
        &lt;tab-list&gt;&lt;/tab-list&gt;
      &lt;/core-toolbar&gt;
      &lt;div class="container" layout vertical center&gt;
        &lt;post-list show="all"&gt;&lt;/post-list&gt;
      &lt;/div&gt;
    &lt;/core-header-panel&gt;
  
    &lt;script&gt;
  
    var list = document.querySelector('post-list');
  
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>But </p>
  
  <pre><code>querySelector('paper-tabs') = *null*
  </code></pre>
  
  <p>I've tried to put the <code>eventListener</code> in <strong>index.html</strong> but I have the same problem.
  can anyone tell me where the problem is?</p>
  
  <p>Thank you very much!</p>