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

Question

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

但是根据caniuse.com边缘应该支持template-tag，没有列出任何问题。另外根据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，例如模板的内容。在使用模板时，最常见的是抓取内容的firstElementChild，克隆它，并将其放在DOM中的某个位置，这样看起来模板在MS Edge中乍一看就完全被破坏了。

在本文发布时，以下代码将在MS Edge中失败：

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

此代码适用于MS Edge和所有其他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这样的旧浏览器会正确创建克隆，但除非隐藏，否则将解析和显示标记中的模板。该模板是可用的，但它没有本机性能优势。