javascript - 当我尝试查询 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 或突变观察者之类的东西吗？什么是最有效的方法？

Answer 1

浏览器之间似乎有不同的行为，例如Firefox，但 Chrome (Blink) 需要“Mutation Observers”。

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