OuterHTML behavior in <template>

Question

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>";

Interestingly, it works in FireFox and Edge, but Chrome outerHTMLrequires a parent element, otherwise it throws an error in the 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 correct? If the setting outerHTMLdoes not work in <template>for direct children? Why doesn't another web browser consider this a mistake?

Answer 1

- , DOM Parsing and Serialization W3C Candidate Recommendation ( ):

[outerHTML] :

• .
• parent null, . , .
• , DOMException "NoModificationAllowedError".
• parent DocumentFragment, - , HTML node node.
• , - .
• .

<template> content DocumentFragment ( 4), ( ) ( 3) Chrome Safari.