我正在尝试在新元素（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（参见 www.polymer-project/docs/polymer/polymer.html#automatic-node-finding 。）
还可以选择直接访问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); } });（参见 www.polymer-project/docs/polymer/polymer.html#change-watchers ）
更多推荐
使用querySelector查找Polymer模板内的嵌套元素将返回null
发布评论