How to react on first paint/layout after initial slot distribution

Question

I have a custom element, my-el, which in its DOM template (a shadow root) contains a slot element. In a web page, I use my-el by placing additional elements in between the tags <my-el> </my-el> as shown below.

<my-el>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</my-el>

I intend to measure the divs' dimensions placed in my-el as they are in the distributed tree, as soon as (i.e. the first time) they are rendered on the page. According to the spec:

To assign slotables, for a slot slot with an optional suppress signaling flag (unset unless stated otherwise), run these steps:

1. Let slotables be the result of finding slotables for slot.

2. If suppress signaling flag is unset, and slotables and slot’s assigned nodes are not identical, then run signal a slot change for slot.

...

If I have understood correctly, the first distribution of slot slottables does not fire a slotchange event since the suppress signaling flag is set when the slot has not performed an initial distribution, further stated in Shadow DOM v1: Self-Contained Web Components. This means that I cannot make an initial measurement of the children elements in the callback of slotchange. Further, the following approach does not guarantee that at that point the children will be rendered:

connectedCallback() {
  super.connectedCallback();

  requestAnimationFrame(() => {
    // Measure chilren
  });
}

Question

How can I trigger my measurements upon the first time they are rendered after being distributed in the slot in my-el?

Answer 1

You can define a variable in your custom element that will be set the first time your elements are rendered (either in connectedCallback or at slotchange event).

Then check the variable value to decide whether it's a first time rendering.

customElements.define( 'c-e', class extends HTMLElement 
{
    connectedCallback () 
    {
        var sh = this.attachShadow( { mode: 'open' } )
        sh.appendChild( T1.content.cloneNode( true ) )
        
        sh.querySelector( 'button').onclick = ev =>   
            this.appendChild( document.createElement( 'div') ).innerHTML = 'new div'

        sh.querySelector( 'slot' ).addEventListener( 'slotchange', ev => 
            !len && ( len = this.render() ) )

        var len = this.render()
    }

    render () 
    {
        var count = this.querySelectorAll( 'div' ).length
        if ( count )
            console.info( '%s elem. first rendered in %s', count, this.id )
        return count
    }
} )

<c-e id=CE1>
  <div>div 1</div>
  <div>div 2</div>
</c-e>
<c-e id=CE2>
</c-e>

<template id=T1>
  <style>
    :host {
      display: inline-flex;
      flex-direction: column;
      width: 150px;
      border: 1px solid lightblue;
      min-height: 4em;
      margin: 5px;
      background: #f7f7f7;
    }
  </style>
  <div>
    <button>add div</button>
  </div>
  <slot>
  </slot>
</template>