边缘上的 HTML <模板>答案

【问题标题】：HTML <template> on Edge边缘上的 HTML <模板>
【发布时间】：2018-06-21 00:52:14
【问题描述】：

我需要决定是使用<template> 还是仅使用documentFragment 在Javascript 中构造一个高度嵌套的元素。使用 <template> 会更干净，但边缘支持至关重要，caniuse.com 似乎表明只有部分支持：

https://caniuse.com/#feat=template

不支持模板、嵌套模板或包含模板的元素上的 Document.importNode。

不支持模板、嵌套模板或包含模板的元素上的 Node.cloneNode。

问题在于我无法使用 Edge 进行测试（没有运行 Windows 10，也无法访问浏览器测试套件），而且我在 MDN 或 Microsoft 文档中也找不到任何关于它的在线信息.无法将模板克隆到文档中几乎意味着使用<template> 的标准方式已经失效，这对我来说没有意义，因为这似乎是<template> 的全部意义。

唯一声称这是caniuse.com的地方，但我学会了信任它，这让我不确定使用什么方法。为了安全起见，我可能只使用documentFragment，但我想知道这是否是caniuse.com 上的错误，或者是否有另一种使用<template> 的明智方式，这是显而易见的，我错过了。

【问题讨论】：

我知道已经晚了，但无论如何我都会发布我的答案。我不想把这个“我知道已经晚了”的评论放到答案本身中。
来自github.com/Fyrd/caniuse/issues/3323 看来caniuse的警告确实具有误导性。
@matthecat 我猜，但这似乎是一个 2 年前的问题，除非我遗漏了什么。谢谢你在这里提到它，即使它是。
很抱歉我找到了你的问题。
@matthecat 我希望这不是故意的不尊重......

标签： javascript html templates microsoft-edge clonenode

【解决方案1】：

以下测试文档表明 importNode 和 cloneNode 似乎可以在 Edge 中与 template 正常工作，至少对于版本 15 及更高版本。

<!DOCTYPE html>

<title>&lt;template&gt; testing</title>

<div id="wrapper">
    <template id="outer">lol<template id="inner">wut</template></template>
</div>

<script>
    var wrapper = document.getElementById('wrapper').cloneNode(true);
    var outer = wrapper.querySelector('#outer');
    var clone = outer.cloneNode(true);
    var inner = document.importNode(clone.content.lastChild, true);
    var content = document.importNode(inner.content, true);
    document.body.appendChild(content);
</script>

对于它的价值，您通常不会像问题中提到的那样“将模板克隆到文档中”，而是将模板的内容克隆到文档中：

let template = document.querySelector('template');
document.body.append(document.importNode(template.content, true));

【讨论】：

谢谢。我确实发现它甚至在那时也有效。我做了一个测试页面并使用了browserscope或其他东西。这段时间非常紧张，我忽略了发布我的发现。