polymer - document.querySelector 与 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 中。

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

以上所有内容都适用于 polymer 元素定义。我认为不需要任何 webcomponents ready 事件。