ポリマー2.0 - "this.shadowRoot.querySelector"は常にnullを返します

新しい要素を作成し、connectedCallbackの#containerセクションに追加します。私はthis.shadowRoot.querySelector("#container")を使用して要素を選択しますが、常にnullを返します。シャドールートの要素を選択するにはどうすればよいですか？ポリマー2.0 - "this.shadowRoot.querySelector"は常にnullを返します

<!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"は常にnullを返します

答えて

関連する問題