问题描述
这是我的 html，具有 “现代” Web 组件模板：
<html dir="ltr" lang="en-US">
<body>
<template>
<table>
{{#each items}}
<tr>
<td>
{{email}}
</td>
<td>
{{phone}}
</td>
</tr>
{{/each}}
</table>
</template>
</body>
</html>
这是我在浏览器（Chrome 和 Firefox）中得到的：
<html dir="ltr" lang="en-US"><head></head><body>
<template>
{{#each items}}
{{/each}}
<table><tbody><tr>
<td>
{{email}}
</td>
<td>
{{phone}}
</td>
</tr></tbody></table>
</template>
</body></html>
很明显，车把卷曲标签被吊到顶部。模板不应该保持内部数据完整以备将来渲染吗？那么我们是否只有使用 <script type="shame-on-html"> 而不是直观的 <template> 的唯一选择？
（请忽略这一行：浏览器何时会更多地支持动态网页内容，React 的统治何时结束？）
解决方法
template 标签内容不会被浏览器忽略。
将模板视为存储在文档中供后续使用的内容片段。虽然解析器在加载页面时会处理元素的内容，但它这样做只是为了确保这些内容是有效的；但是，不会呈现元素的内容。
所以内容被解析和验证。 table 元素具有 permitted content 的特定列表和顺序。因此，当解析 template 内容时，将从 table 中删除不受支持的内容。
如果您在表格中使用 p 标签，您会看到相同的行为。
<template>
<table>
<p>
<tr>
<td>
{{email}}
</td>
<td>
{{phone}}
</td>
</tr>
</p>
</table>
</template>
另一种方法是将模板存储在 JavaScript 中，并在将其插入 DOM 之前使用 Handlebars 对其进行处理。
<script>
const template = `<table>
{{#each items}}
<tr>
<td>
{{email}}
</td>
<td>
{{phone}}
</td>
</tr>
{{/each}}
</table>`;
</script>