typescript - Kör en funktion efter lit-elementets målning

Jag vill köra en funktion efter att förändringar i två lit-element har målats/renderats på skärmen.

Jag har kommit på följande men jag undrar: (a) är det korrekt? (har jag använt requestAnimationFrame korrekt?) (b) finns det ett bättre sätt?

changeElementPropertiesWhichCauseRedraw(this.ele1, this.ele2);

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

Svar #1

Som tur är finns det en färdig livscykelmetod som gör exakt vad du behöver. I din lit-element-komponent behöver du implementera följande:

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

Kallas när ditt element har renderats för första gången. Kallas en gång under ett elements livstid. Användbart för engångsinställningsarbete som kräver åtkomst till DOM.

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