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

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>

我想在我的脚本中使用“table-template”和“table-row-template”作为可重复使用的组件。(克隆它们并按需附加它们)但是当页面加载时，浏览器会解析标记并对其进行修改(获取“slot”元素并将其插入到“table”元素之前，并剥离“td”和“tr”标签)。

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

到目前为止，我已经尝试过:使用隐藏元素，用'pre'/'code'标签包装，但似乎都不起作用。

Answer 1

您可以尝试使用 <script type="text/template"></script>

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

然后:

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

许多图书馆都使用这种方法，handlebar.js例如。

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