light dom availability

[jstrimpel]

I do not think this is the correct place for this question, but if someone could point me in the right direction that would be great. Thanks.

Is there a deterministic approach for querying the light dom of a custom element? In the following example this.children is empty in the console.log, but the console.log wrapped in the setTimeout has 2 children.

customElements.define('my-element', class MyElement extends HTMLElement {
  constructor() {
    super();        
    const shadowRoot = this.attachShadow({ mode: 'open' });           
  }
  
  connectedCallback() {
    console.log(this.children)
    setTimeout(() => { console.log(this.children); });      
  }
});

<my-element>
  <div>First Child</div>
  <div>Second Child</div>
</my-element>

[rniwa]

You can't rely on your children to be present due to the way HTML parser works (it can add more children as the streamed content arrives). Instead, you should be doing work in child node's connectedCallback. If that's not possible, I'd suggest using MutationObserver to observe the changes to the child nodes. In general, there is no callback for when all children are inserted since there could be more children being inserted by DOM manipulation. See #619

[jstrimpel]

@rniwa That makes sense. Thanks for the replying and linking to the ticket that provides a bit of history and context.

[robdodson]

Also related if you're using a slot to distribute the content.
whatwg/dom#447