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中搜索.

请注意,您还可以使用this.$$(selector)用于定位动态创建的节点在元素的本地DOM.

所有上述内容都适用于聚合物元素定义.我不认为任何webcomponents ready事件是必要的.