javascript - IE 11 的模板标签 polyfill - 不适用于表 tr 和 td

Question

我使用 polyfill js，它允许为不支持它的浏览器处理标签。

jsfiddle上的polyfill源代码

来源问题

但我注意到，在 IE 11 中，这个 polyfill 无法使用包含<tr>和<td>标签的模板

我在jsfiddle上的示例

问题是当我们尝试从模板标签节点获取 childNodes

elPlate.childNodes

它返回除了<tr>和<td>孩子之外的所有内容，就好像里面没有这样的标签一样<template>。

我错过了什么吗？这个问题有什么解决方法吗？

PS 由于缺乏声誉，我无法对源问题添加评论。对此感到抱歉。

Answer 1

发生这种情况是因为<tr>必须在 a<table>内才能成为有效的 HTML。在您的<template>中，您指定了一个<tr>没有<table>父对象的松散对象。IE 将此视为错误并将其从 DOM 中删除。因此，您的模板documentFragment不包含<tr>and <td>。

不幸的事实是：IE 根本没有为 HTML5 模板标签做好准备。微软可能需要很长时间才能实现它，而现有的 IE 浏览器版本已经过时了。只有这样我们才能可靠地开始使用 HTML5 模板标签。

解决方法是：不要使用<template>; 探索使用<script type="template">代替的模板解决方案。我相信他们应该运作良好。一些流行的：

• https://mustache.github.io/
• http://handlebarsjs.com/

Answer 2

如果您真的想<tr>在 IE11 中使用模板，您可以自行解决。

您所做的是，不是<tr>直接将其放入模板中，而是像这样放入整个表格

<template>
   <table>
      <tr>
         //foo bar
      </tr>
   </table>
</template>

这会导致 IE11 不再“更正”您的 HTML 并按原样返回。从模板中克隆 HTML 后，您可以<tr>从表格中正确提取 HTML 并在需要的任何地方使用它。