聚合物 2.0 - "this.shadowRoot.querySelector" 总是 returns 空

Question

我想创建新元素并附加到 connectedCallback 上的 #container 部分。我使用 this.shadowRoot.querySelector("#container") 到 select 元素，但它总是 returns null。我怎样才能 select 影子根中的元素？

<!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>

Answer 1

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

聚合物 2.0 - "this.shadowRoot.querySelector" 总是 returns 空

Polymer 2.0 - "this.shadowRoot.querySelector" always returns null

javascript

web-component

polymer

polymer-2.x