Question

考虑以下标记：

<div hidden id="table-template">
<table>
<tbody>
  <slot></slot>
</tbody>
</table>
</div>
<div hidden id="table-row-template">
<tr>
  <td>
    Some Content
  </td>
</tr>
</div>

我想用＆＃39; table-template＆＃39;和＆＃39; table-row-template＆＃39;作为我脚本中的可重用组件。（克隆它们并按需添加它们）但是当页面加载时，浏览器会解析标记并对其进行变异（采用＆＃39; slot＆＃39;元素并将其插入＆＃39; table＆＃39;元素，然后剥离＆＃39;＆＃39;和＆＃39; tr＆＃39;标签）。

这是合理的（当然不是有效的HTML），但有什么办法可以阻止浏览器解析这些元素吗？

到目前为止，我尝试过：使用隐藏元素，用＆＃39; pre＆＃39; /＆＃39;代码＆＃39;包装标签，但似乎没有工作。

Answer 1

您可以尝试使用Eclipse Marketplace

<script type="text/template"></script>

然后：

<script id="mytemplate" type="text/template">
  ...your table's html...
</script>

许多库使用此方法，例如<script> alert($('#mytemplate').html()); </script>。

handlebar.js元素可能与更多浏览器版本兼容：http://caniuse.com/#feat=template

Answer 2

使用浏览器无法识别的虚构标记。您仍然可以使用Javascript定位它并读取它的文本内容，但浏览器不会解析它。

说<template id="the-template">Foo bar</template>。

但真的是重新使用html片段的最好方法是在Javascript中创建它们而不会污染DOM。

e.g

var elToReuse = document.createElement('div').innerHTML('<h1>Lets have title here</h1>');
// Let's do some things to the elToReuse
var anotherVersion = elToReuse.querySelector('h1').innerText('My another title');

// Now it's the time to append to the DOM
document.body.appendChild(anotherVersion);

Answer 3

所以我对我的问题进行了一些研究，这就是我想到的 - 这个＆＃39; t＆＃39;元素只适用于＆＃39; tr＆＃39;作为孩子的元素。所以浏览器会修复＆＃39;在以某种方式解析它时的标记。使用模板标签作为vassiliskrikonis建议不适用于＆＃39; table-template＆＃39;但是会修复＆＃39; table-row-template＆＃39;问题，使用脚本标记作为@Mihaly_KR建议将适用于两者，但是当访问模板时，您将获得一个简单的字符串（将此字符串注入DOM将使浏览器解析它并“修复”它一次再次...）

我找到的解决方法是使用其他标记作为我的内容的占位符。一种方法是使用评论，例如但访问此注释元素需要使用treeWalker或nodeIterator（其性能远低于querySelector或getElementsByTagName）另一种方法是使用脚本标记作为占位符。浏览器不会更改标记，稍后可以使用querySelector或getElementsByTagName访问它。

所以我的重构代码如下所示：

<template id="table-template">
<table>
<tbody>
  <script type="slot"></script>
</tbody>
</table>
</template>
<template id="table-row-template">
<tr>
  <td>
    Some Content
  </td>
</tr>
</template>

是否可以阻止浏览器解析某些元素？

3 个答案: