title: How can I determine if the DOM has finished rendering after setting innerHTML?
body: <p>I have a technical programming assignment coming up as part of the interview 
  process for a company. I know it's going to be in Vanilla Javascript but I still want to organize my code properly as if I were using a modern MVC framework. </p>
  
  <p>I'd like to implement a rough way of handling Components where I have a template string corresponding to html for a parent component. Nothing fancy like having the template be custom rendered, simply a chunk of html that will be set to a component's <code>innerHTML</code>. </p>
  
  <p>Essentially each Component will have an <code>init()</code> function that looks roughly as follows:</p>
  
  <pre><code>init(props = {}) {
    this.rootElement = document.querySelector('#app');
  
    // Render component with template
    this.rootElement.innerHTML = this.template;
  
    // Init children
  }
  </code></pre>
  
  <p>I want to be able to initialize the children but only after I know for sure that the <code>this.rootElement.innerHTML = this.template</code> call as successfully rendered the div's that will be queried with <code>querySelector</code> in the children's <code>init</code> function.</p>