title: How to wait for appendChild() to update and style the DOM, before trying to measure the new element's width
body: <p>I'm appending a DOM element like this:</p>
  <pre><code>this.store.state.runtime.UIWrap.appendChild(newElement)
  </code></pre>
  <p>When I immediately try to measure the new element's width I get <code>2</code>.</p>
  <p>I tried:</p>
  <ul>
  <li><code>setTimeout()</code></li>
  <li>double nested <code>window.requestAnimationFrame()</code></li>
  <li><code>MutationObserver</code></li>
  </ul>
  <p>The above works very unreliably, like 50% of the time. Only when I set a large timeout like 500ms it worked.</p>
  <p><strong>This happens only on mobile.</strong></p>
  <p>This is the workaround that I'm using, but it's ugly:</p>
  <pre><code>function getWidthFromStyle(el) {
    return parseFloat(getComputedStyle(el, null).width.replace('px', ''))
  }
  function getWidthFromBoundingClientRect(el) {
    return el.getBoundingClientRect().width
  }
  
  console.log(getWidthFromBoundingClientRect(newElement))
  
  while (getWidthFromBoundingClientRect(newElement) &lt; 50) {
    await new Promise(r =&gt; setTimeout(r, 500))
    console.log(getWidthFromBoundingClientRect(newElement))
  }
  </code></pre>
  <p>I tried with both functions <code>getWidthFromStyle()</code> and <code>getWidthFromBoundingClientRect()</code> - no difference. The width gets calculated properly after a couple of cycles.</p>
  <p>I also tried using <code>MutationObserver</code> without success.</p>
  <p><strong>Is there a way to know when the DOM is fully updated and styled before I try to measure an element's width/height?</strong></p>
  <p>P.S. I'm not using any framework. <code>this.store.state.runtime...</code> is my own implementation of a Store, similar to Vue.</p>
  <p><strong>EDIT: The size of the element depended on an image inside it and I was trying to measure the element before the image had loaded. Silly.</strong></p>