使用流星访问阴影DOM聚合物元素

Access Shadow DOM polymer elements with meteor

本文关键字：DOM 聚合物 元素 阴影 访问 流星      更新时间：2023-09-26

如何在聚合物构造函数之外访问id='signin'的纸质按钮。我需要从Template.{Template -name}访问它。呈现方法。是否有一种方法来使用选择纸按钮?

    <!-- 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>

最简单，最不容易破损的方法…(与shadowRoot你可能会打破在Polyfil'd浏览器)得到一个引用到你的"app-bar"元素，并从那里使用$ property id快捷方式。如果你不能通过[landing-page]. queryselector ('app-bar')找到元素，那么试试Polymer.dom(landing-page-element.root). queryselector ('app-bar')。($ shortcut只适用于在特定元素模板中给定ID的元素，所以对于你的app-bar，这将与signin一起工作。但是，如果元素/id是由dom-repeat生成的，则无法工作。

document.querySelector('landing-page').querySelector('app-bar').$.signin;
相关文章：