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

Wenn ich versuche die Abfrage Kind-Elemente innerhalb connectedCallback, bekomme ich eine leere nodelist.

Wenn ich verschieben script tag <my-component> - es beginnt zu arbeiten:

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

Gibt es ein callback, der ausgelöst wird, wenn alle child-Elemente vorhanden sind? (egal wo <script> wurde Hinzugefügt). Muss ich wirklich so etwas wie document.bereit oder mutation observer? Was ist der effizienteste Weg?