聚合物：在自定義元素中使用querySelector而不是「this。$」。

編輯：剛剛找到這個鏈接，這解釋它以某種方式。 Using querySelector to find nested elements inside a Polymer template returns null

儘管如此，我會很感激我對這個特定代碼的問題的答案。

/編輯

我覺得相當直截了當和簡約的問題：

我有在聚合物中的自定義元素：

<polymer-element name="my-test"> 
    <template> 
     <div id="content"> 
      <h3 id="test">My Test</h3> 
      <p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dolore consectetur, mollitia eos molestias totam ea nobis voluptatibus sed placeat, sapiente, omnis repellat dolores! Nihil nostrum blanditiis quasi beatae laborum quisquam ipsum!</p> 
      <button id="button">Clicke Me!</button> 
     </div> 

    </template> 
    <script> 
    Polymer('my-test', { 
     ready: function() { 
      var button = this.$.button; 
      button.addEventListener("click", function() { 
       alert("alert"); 
      }); 
     } 
    }); 
    </script> 
</polymer-element>

的事情是，我寧願使用

var button = document.querySelector(#button);

代替

var button = this.$.button;

因爲它看起來更直觀和聲明。但每當我這樣做，我得到一個錯誤，說：

"Uncaught TypeError: Cannot read property 'addEventListener' of null " in Chrome and 

Firefox instead says: "TypeError: button is null"

所以任何幫助表示讚賞！ :)

來源

2014-11-08 LoveAndHappiness

您的按鈕位於您的Polymer元素內部，並且由於Polymer元素在其影子DOM中包含其內容，因此無法以此方式找到元素。如果您的<my-test>元素不在其他元素的陰影DOM內，則可以使用this.shadowRoot.querySelector('#button');或document.querySelector('* /deep/ #button');或document.querySelector('my-test::shadow #button');。 /deep/穿透所有陰影DOM邊界::shadow只是通過一個。

來源

2014-11-08 22:34:12

非常感謝Günter，是否從文檔中獲得了所有這些信息？或者你可以推薦其他資源？ – LoveAndHappiness 2014-11-09 13:59:54

我遵循聚合物開發一年多的時間，不斷地收集各種信息，所以我不知道我在哪裏閱讀它，但Polymer-project.com頁面非常全面。 – 2014-11-09 14:59:15

以下行實際上：

var button = document.querySelector(#button);

應該是：

var button = document.querySelector('#button');

注意引號。

來源

2014-11-08 22:09:24

聚合物：在自定義元素中使用querySelector而不是「this。$」。

回答

相關問題