使用流星访问 Shadow DOM 聚合物元素答案

【问题标题】：Access Shadow DOM polymer elements with meteor使用流星访问 Shadow DOM 聚合物元素
【发布时间】：2015-10-03 10:04:54
【问题描述】：

如何在 Polymer 构造函数之外访问 id='signin' 的纸质按钮。我需要从 Template.{template-name}.rendered 方法访问它。有没有办法将选择器用于纸张按钮？

    <!-- Code -->
    <dom-module id="app-bar">
    <template>

        <link rel="import" href="bower_components/iron-media-query/iron-media-query.html">
        <iron-media-query query="min-width: 1008px" query-matches="{{largeScreen}}">
        </iron-media-query>
        <template is="dom-if" if="{{largeScreen}}">
            <span class="separator">
                <link rel="import" href="bower_components/paper-button/paper-button.html">

            <paper-button id="signin" on-click="login" raised>Sign in</paper-button>
            </span>
        </template>
        <template is="dom-if" if="{{!largeScreen}}">
           <span class="title"></span>
        </template>
    </template>
    <script>
    Polymer({
        is: "app-bar",
        login: function() {
            FlowRouter.go('/login');
        }
    });
    </script>
</dom-module>


<!-- In the landing-page.html -->

<landing-page>
<link rel="import" href="app-bar.html">
<app-bar></app-bar>
</landing-page>

【问题讨论】：

这就是我可以访问纸张按钮document.querySelector('landing-page').shadowRoot.querySelector('paper-drawer-panel').querySelector('app-bar').shadowRoot.querySelector('#signin');

标签： javascript meteor polymer shadow-dom

【解决方案1】：

简单、不易损坏的方法...（使用 shadowRoot，您可能会在 Polyfil 的浏览器中损坏）获取对“app-bar”元素的引用，然后使用 $ 属性 ID 快捷方式。如果您无法通过 [landing-page].querySelector('app-bar') 找到元素，请尝试 Polymer.dom(landing-page-element.root).querySelector('app-bar')。（$ 快捷方式仅适用于在该特定元素模板中给定 ID 的元素，因此对于您的应用栏，这将适用于登录。但如果元素/ID 是由 dom-repeat 生成的，它将不起作用。

document.querySelector('landing-page').querySelector('app-bar').$.signin;

【讨论】：

它没有用。我尝试了两种选择，但都没有成功。