聚合物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”总是返回空

回答

相关问题