使用querySelector查找Polymer模板内的嵌套元素将返回null

本文介绍了使用querySelector查找Polymer模板内的嵌套元素将返回null的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在新元素（tabs-list）中使用paper-tabs但是在打印选项卡之后我无法使用querySelector来更改所选的。

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

<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代码（whitout样式）：

Index.html code (whitout style):

<!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 中，但我遇到了同样的问题。
谁能告诉我问题在哪里？

I've tried to put the eventListener in index.html but I have the same problem.can anyone tell me where the problem is?

非常感谢！

推荐答案

document.querySelector('paper-tabs');

找不到 paper-tabs 元素，因为它是隐藏的在 tab-list 元素的shadow DOM内。

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

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

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

this.$.tabs

（参见。）

还可以选择直接访问shadow DOM

There is also the option to access the shadow DOM directly

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

如果您只想在 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);
  }
});

（参见）

这篇关于使用querySelector查找Polymer模板内的嵌套元素将返回null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！