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

考虑以下标记：

<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>

一些内容

我想在脚本中使用“表模板”和“表行模板”作为可重用组件。 （克隆它们并根据需要附加它们） 但当页面加载时，浏览器会解析标记并对其进行变异（将“slot”元素插入“table”元素之前，并剥离“td”和“tr”标记）

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

到目前为止，我已经尝试： 使用隐藏元素， 用“pre”/“code”标签包装，

---

但是没有一个能起作用。

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

说

Foo-bar

但实际上，重用html片段的最佳方法是在Javascript中创建它们，而不会污染DOM

e、 g

var elToReuse=document.createElement（'div'）.innerHTML（'let have title here'）；
//让我们为elToReuse做些事情
var anotherVersion=elToReuse.querySelector（'h1'）.innerText（'My Other title'）；
//现在是附加到DOM的时候了
文件.正文.附件（另一版本）；

您可以尝试使用

…您的表格的html。。。

然后：

警报（$（'#mytemplate'）.html（））；

许多库使用这种方法，例如，

handlebar.js

---

元素可能会获得与更多浏览器版本的兼容性：

因此我对我的问题进行了一些研究，这就是我发现的- “tbody”元素仅将“tr”元素作为子元素。 因此，浏览器将在以某种方式解析标记时“修复”标记。 使用vassiliskrikonis建议的模板标记不适用于“表模板”，但可以解决“表行模板”问题， 使用脚本标记@Mihaly_KR建议将两者都使用，但是当访问模板时，您将得到一个普通字符串来使用（将此字符串注入DOM将使浏览器解析它并再次“修复”它…）

我发现的解决方法是使用其他标记作为我的内容的占位符。 一种方法是使用注释，例如。 但是访问这个comment元素需要使用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>

一些内容

查看HTML。“template”标记修复了“table row template”上的问题，但浏览器（chrome-58）仍会更改“table template”（从表格内部获取“slot”元素并将其附加到模板中）请看这里：“但这确实是在不污染DOM的情况下，在Javascript中重新使用html片段来创建它们的最佳方法”——我不同意这种假设。将html片段注入DOM的过程比克隆现有DOM元素的过程要昂贵得多。。。勾选这个：

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

<script>
  alert($('#mytemplate').html());
</script>

<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>