Trigger event after component is connected and rendered?

[tamis-laan]

I would like to trigger a function once my component is added to the DOM and completely rendered. How can I achieve this using lit-element?

Right now I set a timeout of 200 ms within ConnectedCallback and call my function. I also use await updateComplete as I thought this ment waiting until the render process completes.

  async connectedCallback() {
    super.connectedCallback()
    await this.updateComplete;
    // Apply scalling
    setTimeout(_=>{this.scaling()},200)
  }

[sorvell]

The component is completely rendered when the updateComplete promise resolves. You should not need the setTimeout.

[tamis-laan]

The component is completely rendered when the updateComplete promise resolves. You should not need the setTimeout.

Does that include the sub-components contained in the <slot></slot> ?

My function this.scalling() checks the height of my component in pixels and then adds a transform: scale(...) to the styling of the component. However the height in pixels is wrong hence the timeOut to make sure the component is completely drawn.

[sorvell]

No, it does not. For children in your shadowRoot, you can implement _getUpdateComplete() to await any specific elements you care about. However, this is probably not great for slotted content. Rather than use setTimeout, it's better to use requestAnimationFrame which should be sufficient.

async connectedCallback() {
  super.connectedCallback()
  await new Promise((resolve) => requestAnimationFrame(resolve));
  this.scaling()
}

Hope that helps. Feel free to re-open if more info is needed.

[tamis-laan]

hm... that doesn't solve my issue either, waiting for await new Promise((resolve) => requestAnimationFrame(resolve)) produces similar effects as await this.updateComplete. It still triggers the this.scale() function before the correct pixel height of the component is calculated.

[user1207504]

You can implement firstUpdated() to help in this scenario. This is executed only once in the lifecycle and after the first render.

[justinfagnani]

Generally, unless some scheduling is customized, firstUpdated() should be called before the requestAnimationFrame after connectedCallback.

In this case if you're trying to respond to the size of the element, I'd use ResizeObserver so that it happens dynamically any time the size changes.

Otherwise, it'd be good in any particular case to debug and see what order connected/rAF/paint is done in (it should be that order), and see what else is effecting the size, but I know that a lot of times with async issues, people try to just be "more async". In that case you could wait an setTimeout(0). If that isn't working and you have to go back to setTimeout(200), then there's something really late happening that's messing with the size like a font or CSS loading, and then ResizeObserver is the only robust way to handle it.