<template> 中的 outerHTML 行为

Question

鉴于此<template>：

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

还有 JS：

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

有趣的是它可以在 FireFox 和 Edge 中运行，但在 Chrome 中 outerHTML 需要父元素，否则会在控制台中抛出错误 (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> 

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

我的问题是，Chrome 的行为是否正确？是否应该在 <template> 中设置 outerHTML 不适用于直接子代？为什么其他网络浏览器不将其视为错误？

Answer 1

其他网络浏览器不会将其视为错误，因为它们遵循DOM Parsing and Serialization W3C Candidate Recommendation（这还不是标准）：

在设置 [outerHTML] 时，必须执行以下步骤：

1. 让 parent 成为上下文对象的父级。
2. 如果 parent 为 null，则终止这些步骤。即使运行了剩余的步骤，也无法获得对创建的节点的引用。
3. 如果 parent 是 Document，则抛出名为 "NoModificationAllowedError" 的 DOMException 异常。
4. 如果 parent 是 DocumentFragment，则让 parent 是一个新的 Element，其中 body 作为其本地名称，HTML 命名空间作为其命名空间，上下文对象的节点文档作为它的节点文档。
5. 设片段是调用片段解析算法的结果，新值作为标记，父元素作为上下文元素。
6. 用上下文对象的父级中的片段替换上下文对象。

<template> 的 content 属于 DocumentFragment 类型（步骤 4），但它（在这种情况下）被视为 文档（步骤3) 通过 Chrome 和 Safari。