Run a function after lit-element paint

Question

I'm looking to run a function after changes to two lit-elements have been painted/rendered to the screen.

I've come up with the following but I am wondering: (a) is it correct? (have I used requestAnimationFrame correctly?) (b) is there a better way?

changeElementPropertiesWhichCauseRedraw(this.ele1, this.ele2);

Promise.all([this.ele1.updateComplete, this.ele2.updateComplete])
  .then(() => window.requestAnimationFrame(() => setTimeout(() => afterPaint())));

Answer 1

Luckily, there is out-of-the-box lifecycle method that does exactly what you need. In your lit-element component you need to implement the following:

  firstUpdated() {
    super.firstUpdated();
    // your code goes here
  }

Called when your element has rendered for the first time. Called once in the lifetime of an element. Useful for one-time setup work that requires access to the DOM.

Reference: https://open-wc.org/guides/knowledge/lit-element/lifecycle/