使用 querySelector 在 Polymer 模板中查找嵌套元素返回 null答案

【问题标题】：Using querySelector to find nested elements inside a Polymer template returns null使用 querySelector 在 Polymer 模板中查找嵌套元素返回 null
【发布时间】：2014-08-28 21:48:15
【问题描述】：

我正在尝试在新元素 (tabs-list) 中使用纸质标签，但在打印标签后我无法使用 querySelector 更改选定的元素。

元素代码（无样式）：

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../sprint-service/sprint-service.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">

<polymer-element name="tab-list" attributes="show">
  <template>
    <sprint-service id="service" sprints="{{sprints}}"></sprint-service>   
    <paper-tabs selected="all" valueattr="name" self-end>
      <paper-tab name="all">ALL</paper-tab>
      <template repeat="{{sprint in sprints}}">
        <paper-tab name="{{sprint.id}}">{{sprint.id}}</paper-tab>
      </template>
    </paper-tabs>
  </template>
  <script>
    Polymer('tab-list', {
      ready: function() {
        var tabs = document.querySelector('paper-tabs');
        tabs.addEventListener('core-select', function() {
          list.show = tabs.selected;
        }) 
      } 
    });
  </script>
</polymer-element>

Index.html 代码（无样式）：

<!doctype html>
<html>

<head>
  <title>unquote</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <script src="../components/platform-dev/platform.js"></script>
  <link rel="import" href="../components/font-roboto/roboto.html">
  <link rel="import"
    href="../components/core-header-panel/core-header-panel.html">
  <link rel="import"
    href="../components/core-toolbar/core-toolbar.html">
  <link rel="import" href="tab-list.html">
  <link rel="import" href="post-list.html">
</head>

<body unresolved touch-action="auto">
  <core-header-panel>
    <core-toolbar>
      <tab-list></tab-list>
    </core-toolbar>
    <div class="container" layout vertical center>
      <post-list show="all"></post-list>
    </div>
  </core-header-panel>

  <script>

  var list = document.querySelector('post-list');

  </script>
</body>

</html>

但是

querySelector('paper-tabs') = *null*

我尝试将eventListener 放在 index.html 中，但我遇到了同样的问题。谁能告诉我问题出在哪里？

非常感谢！

【问题讨论】：

标签： javascript polymer shadow-dom

【解决方案1】：

document.querySelector('paper-tabs');

找不到 paper-tabs 元素，因为它隐藏在 tab-list 元素的影子 DOM 中。

你可以简单地给 paper-tabs 一个 id，比如 tabs，然后像这样访问它

this.$.tabs

（见http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding。）

还有直接访问shadow DOM的选项

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

如果您只想监听 paper-tabs 选项的更改，您可以使用更改观察器：

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

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

（见http://www.polymer-project.org/docs/polymer/polymer.html#change-watchers）

【讨论】：

您的解决方案适用于静态创建的节点，但不适用于在 dom-repeat 中动态创建的节点。知道如何访问动态创建的节点吗？（至少 Polymer 1.0 文档声明：注意：使用数据绑定动态创建的节点（包括 dom-repeat 和 dom-if 模板中的节点）不会添加到 this.$ 哈希中。哈希仅包括静态创建的本地 DOM 节点（即元素最外层模板中定义的节点）。）
我在文档中进一步阅读到 this.$$(selector) 将是要走的路，但我无法让它工作......
我认为this.shadowRoot 现在只是this.root

【解决方案2】：

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

并切换我使用的 dom-repeat 中的 iron-collapse 元素

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

【讨论】：