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行为是正确的吗？是否应该outerHTML在直接儿童<template>中无效？为什么其他网络浏览器不会将其视为错误？

Answer 1

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

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


让parent成为上下文对象的父级。

如果父 null ，请终止这些步骤。即使运行了剩余的步骤，也无法获得对创建的节点的引用。

如果parent是 Document ，则抛出名为＆＃34; NoModificationAllowedError＆＃34; 异常的 DOMException 。

如果parent是 DocumentFragment ，则让parent成为新的元素，其中body作为其本地名称，HTML名称空间作为其名称空间，以及上下文对象＆＃39; s节点文档作为其节点文档。

让片段成为调用片段解析算法的结果，其中新值为标记，parent为上下文元素。

将上下文对象替换为上下文对象父级中的片段。

<template> content的类型为 DocumentFragment （步骤4），但它被视为<在这种情况下）< em和Safari将文档（第3步）。

<template>中的outerHTML行为

1 个答案: