document.querySelector vs Polymer.dom(this.$).querySelector

Question

对于下面给定的代码，document.querySelector('createButton')和Polymer.dom(this.$).querySelector('createButton')是否应该返回相同的元素？

如果是这样，哪一个是最佳实践？在第一种情况下，我们不是搜索整个dom树(我的意思是包括主机/根)吗？在第二个元素中，我们只在这个元素的dom树中搜索？

这两种方法在任何时候都可以工作吗？因为我相信我经历过这样的情况，第二种情况只在ready内部工作(我的意思是当web组件就绪事件被激发时)。

​

<dom-module id="bortini-tv-create">
    <template>
        <form>
            <paper-input label="Name" value="{{tv.name}}"></paper-input>
            <paper-input label="Logo" value="{{tv.logo}}"></paper-input>
            <paper-input label="Address" value="{{tv.address}}"></paper-input>
            <paper-input label="Web site" value="{{tv.webSite}}"></paper-input>
            <paper-input label="Registration number" value="{{tv.regNumber}}"></paper-input>
            <br/>
            <br/>
            <paper-button id="createButton" raised on-tap="handleTvCreate">
                <iron-icon icon="redeem"></iron-icon>
                Add
            </paper-button>
            <paper-button id="cancelButton" raised on-tap="handleCancelTvCreate">
                <iron-icon icon="cancel"></iron-icon>
                Cancel
            </paper-button>
        </form>

        <iron-ajax
                id="ironAjax"
                url="/api/tv"
                content-type="application/json"
                handle-as="json"
                method="POST">
        </iron-ajax>

        <paper-toast id="toast"
                     duration="3000"
                     text="TV {{tv.name}} has been created">
        </paper-toast>
    </template>
</dom-module>

​

Answer 1

正如您所说，document.querySelector('#createButton')将搜索整个文档，而Polymer.dom(this).querySelector('#createButton')将搜索this元素的本地DOM。

注意，您也可以在元素的本地DOM中为locating dynamically-created nodes使用this.$$(selector)。

以上所有内容都将在聚合物元素定义内工作。我不认为任何webcomponents ready事件是必要的。