聚合物2.0 - 「this.shadowRoot.querySelector」總是返回空

我想創建新元素並將其追加到#container部分connectedCallback。我使用this.shadowRoot.querySelector("#container")來選擇元素，但它總是返回null。我如何選擇影子根目錄中的元素？聚合物2.0 - 「this.shadowRoot.querySelector」總是返回空

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script> 
 
    <link rel="import" href="https://polygit.org/components/polymer/polymer-element.html"> 
 
</head> 
 

 
<body> 
 
    <dom-module id="dom-element"> 
 

 
    <template> 
 
     <div id="container"> 
 
      <p>I'm a DOM element. This is my shadow DOM!</p> 
 
     </div> 
 
     </template> 
 

 
    <script> 
 
     class DomElement extends Polymer.Element { 
 
     connectedCallback() { 
 
      this.attachShadow({ 
 
      mode: "open" 
 
      }) 
 

 
      console.log(this.shadowRoot.querySelector("#container")) 
 
     } 
 

 
     static get is() { 
 
      return "dom-element"; 
 
     } 
 
     } 
 
     customElements.define(DomElement.is, DomElement); 
 
    </script> 
 

 
    </dom-module> 
 
    
 
    <dom-element></dom-element> 
 
</body> 
 

 
</html>

來源

2017-05-27 G.C Sun

的Polymer.Element已經附着了一層陰影根，所以你不需要做自己connectedCallback()。更重要的是，您的定製connectedCallback()必須調用super.connectedCallback()才能正常運行。它應該是這個樣子：

connectedCallback() { 
    super.connectedCallback(); // DO THIS 
    // this.attachShadow(...) // DON'T DO THIS 

    console.log('container', this.shadowRoot.querySelector("#container")); 
}

demo

來源

2017-05-27 06:25:39 tony19

謝謝@ tony19它的工作，高分子官方快速瀏覽並沒有提到那還是我錯過，非常感謝。 –

@ G.CSun沒問題:) – tony19

聚合物2.0 - 「this.shadowRoot.querySelector」總是返回空

回答

相關問題