title: A-Frame appendChild works in Firefox but not Chrome
body: <p>I'm trying to create new entities dynamically in A-Frame using template elements. The helper function looks like this:</p>
  
  <pre><code>function htmlToElement(html) {
      const template = document.createElement('template');
  
      // Never return a text node of whitespace as the result.
      html = html.trim();
  
      template.innerHTML = html;
      return template.content.firstChild;
  }
  </code></pre>
  
  <p>and I use it like this:</p>
  
  <pre><code>document.querySelector('a-scene').addEventListener('loaded', () =&gt; {
    const cube = htmlToElement('&lt;a-box position="0 1 -2"&gt;&lt;/a-box&gt;')
  
    document.querySelector('a-scene').appendChild(cube);
  });
  </code></pre>
  
  <p>This works great in Firefox, but in Chrome the entity doesn't show up. If look at the entity with something like <code>document.querySelector('a-box')</code> there is no <code>object3D</code> property, so I don't think appending the element to the scene is registering the element with A-Frame on Chrome. What am I missing to get this to work in Chrome? Here's a <a href="https://codepen.io/twastvedt/pen/MXgBWW?editors=1011" rel="nofollow noreferrer">pen</a>.</p>
  
  <p>Thanks!</p>