title: MutationObserver not picking up on child nodes
body: <p>Fiddle: <a href="https://jsfiddle.net/7gj26hqu/" rel="nofollow noreferrer">https://jsfiddle.net/7gj26hqu/</a></p>
  
  <p>I would like to have one <code>MutationObserver</code> that can detect all new nodes within itself. In the example, I have set <code>{childList: true, subtree: true}</code>, but <code>div#nested</code> does not appear in the <code>MutationObserver</code> (shown in the console).</p>
  
  <p>How can I have an observer detects any depth of child nodes?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const domObserver = new MutationObserver((records) =&gt; {
    records.forEach((record) =&gt; {
      console.log(record)
    })
  })
  
  domObserver.observe(document.querySelector('#frame'), {childList: true, subtree: true})
  
  // copy child nodes out of #template (as a string) and inject them into #frame for the observer to detect
  document.querySelector('#frame').innerHTML = document.querySelector('#template').innerHTML</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="frame"&gt;&lt;/div&gt;
  
  &lt;div id="template" style="display: none;"&gt;
     &lt;div class="level-1"&gt;
      &lt;div class="level-2"&gt;
  
        &lt;div id="nested"&gt;
          I exist in the DOM but am not being seen by the MutationObserver
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="level-1"&gt;
      &lt;div class="level-2"&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="level-1"&gt;
      &lt;div class="level-2"&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>