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')将搜索整个文档，并在this元素的本地DOM Polymer.dom(this).querySelector('#createButton')。

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

以上所有内容均可在聚合物元素定义中使用。我不认为任何webcomponents ready事件是必要的。