title: outerHTML behavior in a <template>
body: <p>Given this <code>&lt;template&gt;</code>:</p>
  
  <pre><code>&lt;template id="my-template"&gt;
      &lt;h1 id="h"&gt;Hello!&lt;/h1&gt;
  &lt;/template&gt; 
  </code></pre>
  
  <p>And JS:</p>
  
  <pre><code>var t = document.querySelector("#my-template");
  var h = t.content.querySelector("h1");
  h.outerHTML = "&lt;h3&gt;AAAAAAAAAAAAAA&lt;/h3&gt;";
  </code></pre>
  
  <p>It's interesting that it works in FireFox and Edge but in Chrome <code>outerHTML</code> requires a parent element, otherwise it throws error in console (<a href="https://chromium.googlesource.com/chromium/blink/+/master/Source/core/dom/Element.cpp#2528" rel="nofollow">https://chromium.googlesource.com/chromium/blink/+/master/Source/core/dom/Element.cpp#2528</a>):</p>
  
  <pre><code>&lt;template id="my-template"&gt;
      &lt;div&gt;
          &lt;h1 id="h"&gt;Hello!&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/template&gt; 
  </code></pre>
  
  <p>See <a href="https://jsfiddle.net/q5fmn186/11/" rel="nofollow">https://jsfiddle.net/q5fmn186/11/</a></p>
  
  <p>My question is, is Chrome behavior the correct one? Should setting <code>outerHTML</code> not work in <code>&lt;template&gt;</code> on direct children? Why aren't the other web-browser treat it like an error?</p>