JSFiddle - React, Tailwind, and code Playground

HTML

<script>
customElements.define('my-element', class extends HTMLElement {
  connectedCallback() {
    alert(`Children on connectedCallback: ${this.childNodes.length}`);
    window.addEventListener('DOMContentLoaded', () => {
      alert(`Children on DOMContentLoaded: ${this.childNodes.length}`);
    })
  }
})
</script>
<my-element>Some content</my-element>