使用meteor 访问Shadow DOM 聚合物元素

Question

How do I access the paper-button with id='signin' outside of the Polymer constructor. I need to access it from Template.{template-name}.rendered method. Is there a way to use selector for paper-button?

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

Answer 1

The easy, less prone way to breakage... (with shadowRoot you will potentially break in Polyfil'd browsers) get a reference to your 'app-bar' element and from there use the $ property id shortcut. If you cannot find the element via [landing-page].querySelector('app-bar') then try Polymer.dom(landing-page-element.root).querySelector('app-bar'). ($ shortcut only works for elements given an ID in that particular elements template, so for your app-bar this will work with signin. It would not work if the elements/ids were generated by a dom-repeat though.

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