WTF connectedCallback #3

by WebComponents

HTML

<script>
  const LOGDIVs = (el) => {
    document.body.append( el.nodeName, " has ", el.querySelectorAll("div").length, " divs");
  }

  customElements.define("component-1", class extends HTMLElement {
    connectedCallback() {
      setTimeout( () => LOGDIVs( this ) );
    }
  });
</script>
<component-1 id="ONE">
  <div></div>
  <div></div>
  <div></div>
</component-1>
<component-2 id="TWO">
  <div></div>
  <div></div>
  <div></div>
</component-2>
<script>
  customElements.define("component-2", class extends HTMLElement {
    connectedCallback() {
      LOGDIVs( this );
    }
  });
</script>