HTML5 模板标签不适用于边缘？

Question

我制作了一个使用模板标签实现某些 JavaScript 功能的网站。而且这个功能在边缘不起作用，我认为这是因为模板标签，因为我过去听说它们之间可能存在一些问题。

但根据 caniuse.com edge 应该支持模板标签，没有列出任何问题。同样根据 MDN：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template Edge 从版本 13 开始就应该得到支持。我已经在版本 20 ov Edge 中进行了测试。

我也没有在边缘控制台中收到任何 javascript 错误，所以我认为这只能是模板标签的问题。

我的问题很简单。 Edge 是否支持模板标签？还是需要解决（shiv 或类似）？

Answer 1

是的，MS Edge 绝对支持模板。但是，在检索文档片段（例如模板的内容）的 firstElementChild 时存在 known issue。使用模板时，最常见的做法是抓取内容的第一个 ElementChild，将其克隆并将其放置在 DOM 中的某个位置，因此乍一看模板在 MS Edge 中可能完全损坏。

此时 post，以下代码将在 MS Edge 中失败：

var clone = template.content.firstElementChild.cloneNode(true);

此代码将在 MS Edge 和所有其他 post MS IE 浏览器中运行：

var clone = template.content.querySelector("*").cloneNode(true);

或者更好的是，您甚至可以容纳 MS IE：

var clone = template.content ? template.content.querySelector("*").cloneNode(true) : template.firstElementChild.cloneNode(true);

在最后的代码片段中，MS IE 等旧版浏览器将正确创建克隆，但标记中的模板将被解析并显示，除非隐藏。该模板可用，但具有 none 的本机性能优势。

HTML5 模板标签不适用于边缘？

HTML5 template tag does not work with edge?

html

microsoft-edge

html5-template