当我尝试查询connectedCallback中的子元素时，我得到一个空的节点列表

Question

<script>
  class SomeClass extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      // returns empty nodelist
      console.log(this.querySelectorAll('.thing'));
    }

  }

  customElements.define('my-component', SomeClass);
</script>

<my-component>
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
</my-component>

当我尝试查询connectedCallback中的子元素时，我得到一个空的节点列表。

如果我将script标签移到<my-component>之后-它开始起作用：

<my-component>
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
</my-component>

<script>
  class SomeClass extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      // returns empty nodelist
      console.log(this.querySelectorAll('.thing'));
    }

  }

  customElements.define('my-component', SomeClass);
</script>

在所有子元素都可用时是否有一些回调触发？ （无论在何处添加<script>）。我真的必须使用诸如document.ready或mutationobserver之类的东西吗？最有效的方法是什么？

Answer 1

浏览器之间的行为似乎有所不同，例如， Firefox，但Chrome（闪烁）需要“突变观察者”。

• https://github.com/w3c/webcomponents/issues/551

---

出于同样的原因，通常DOM也可以正常工作。

• Why does jQuery or a DOM method such as getElementById not find the element?

---

或者在DOM加载后进行customElements.define()调用

<script>
  class SomeClass extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      // returns empty nodelist
      console.log(this.querySelectorAll('.thing'));
    }

  }

  window.addEventListener('DOMContentLoaded', function() {
    customElements.define('my-component', SomeClass);
  });
</script>

<my-component>
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
</my-component>