outerHTML behavior in a <template>

Given this <template>:

<template id="my-template">
    <h1 id="h">Hello!</h1>
</template> 

And JS:

var t = document.querySelector("#my-template");
var h = t.content.querySelector("h1");
h.outerHTML = "<h3>AAAAAAAAAAAAAA</h3>";

It's interesting that it works in FireFox and Edge but in Chrome outerHTML requires a parent element, otherwise it throws error in console (https://chromium.googlesource.com/chromium/blink/+/master/Source/core/dom/Element.cpp#2528):

<template id="my-template">
    <div>
        <h1 id="h">Hello!</h1>
    </div>
</template> 

See https://jsfiddle.net/q5fmn186/11/

My question is, is Chrome behavior the correct one? Should setting outerHTML not work in <template> on direct children? Why aren't the other web-browser treat it like an error?