首页 文章

Polymer 2.0 - “this.shadowRoot.querySelector”始终返回null

提问于
浏览 次
1

我想在 connectedCallback 上创建新元素并追加到 #container 部分 . 我使用 this.shadowRoot.querySelector("#container") 来选择元素，但它总是返回 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>
javascript polymer web-component polymer-2.x

1 回答

  • 4

    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

    回复于

相关问题