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事件是必要的。