HTML5 template元素似乎在HTML输出中破坏了Mustache花括号，特别是在table中：
<template id="test">
<table>
{{#foo}}
<tr><td>{{.}}</td></tr>
{{/foo}}
</table>
</template>
<script>
const html = document.getElementById("test").innerHTML;
</script>内部HTML显示如下：
{{#foo}}{{/foo}}<table><tr><td>{{.}}</td></tr></table>但是，如果我们使用script元素而不是template，则HTML不会被破坏：
<script id="test" type="text/html">
<table>
{{#foo}}
<tr><td>{{.}}</td></tr>
{{/foo}}
</table>
</script>内部HTML是正确的，并且可以由Mustache使用：
<table>{{#foo}}<tr><td>{{.}}</td></tr>{{/foo}}</table>为什么template会出现这种情况？有没有办法禁用这种行为？否则，显然，将它与Mustache这样的模板系统一起使用不是一个好主意？
1条答案
按热度按时间sxpgvts31#
<template>专门用于Web Components，Web Components具有自己的模板机制，该机制集成在Web标准中。<template>元素中的HTML应该被认为是“活的”，并且必须是格式良好的，因此不能在<table>...</table>中插入任意文本而不将其 Package 在<td>...</td>中。虽然
<script type="not-javascript">可能会让人觉得过时，而且可能有点临时性，但它仍然是在HTML文档中嵌入任意模板代码的唯一正确方法。或者，您可以将模板保存在单独的文件中，并在捆绑工具和合适的插件的帮助下将其导入JavaScript模块中。例如，如果你要使用Rollup捆绑你的JavaScript代码，并使用Wontache来呈现你的Mustache模板，你可以使用rollup-plugin-wontache，并按如下方式构建你的代码：
还有类似的插件用于捆绑工具和Mustache渲染引擎的其他组合。