HTML5 template元素中table内Mustache花括号移位原因及适配咨询

问题现象 #

在<template>元素内嵌套表格和Mustache模板语法时，获取的innerHTML会出现结构错乱，Mustache的逻辑标签位置被打乱：

使用<template>的示例 #

<template id="test">
    <table>
      {{#foo}}
        <tr><td>{{.}}</td></tr>
      {{/foo}}
    </table>
</template>

<script>
    const html = document.getElementById("test").innerHTML;
</script>

获取的innerHTML结果：

{{#foo}}{{/foo}}<table><tr><td>{{.}}</td></tr></table>

而改用script元素（指定type="text/html"）时，模板结构完全正常：

使用script的示例 #

<script id="test" type="text/html">
    <table>
      {{#foo}}
        <tr><td>{{.}}</td></tr>
      {{/foo}}
    </table>
</script>

获取的innerHTML结果：

<table>{{#foo}}<tr><td>{{.}}</td></tr>{{/foo}}</table>

原因解析 #

核心差异在于浏览器对两种元素内容的处理逻辑：

• <template>的内容会被浏览器按照HTML规则解析并规范化：表格<table>属于特殊元素，它的直接子元素只能是<thead>、<tbody>、<tr>等表格相关标签。Mustache的{{#foo}}这类非表格标签出现在<table>内部的直接位置时，会被判定为无效HTML结构，浏览器会自动将这些“无效内容”移到<table>外部，导致模板语法位置错乱。
• script[type="text/html"]的内容会被当作纯文本处理：只要指定了非可执行的type，浏览器就不会解析内部的HTML结构，直接保留原始文本，因此Mustache语法的结构不会被破坏。

能否禁用该行为？ #

不能直接禁用。浏览器对<template>内容的HTML规范化是HTML5标准规定的核心特性，目的是确保<template>的内容是合法可渲染的HTML片段，后续克隆使用时能正常解析。

适配Mustache的解决方案 #

直接在<template>中写不符合HTML结构的模板语法会出问题，但可以通过以下方式规避：

• 将模板标签放入合法的表格子元素内：比如把{{#foo}}包裹在<tbody>中，因为<tbody>是<table>的合法直接子元素，浏览器不会移动其中的内容：

  <template id="test">
      <table>
        <tbody>
          {{#foo}}
            <tr><td>{{.}}</td></tr>
          {{/foo}}
        </tbody>
      </table>
  </template>
  

• 嵌套纯文本模板容器：如果模板包含大量非HTML结构的语法，可以在<template>内部嵌套一个<script type="text/template">来存放纯文本模板，不过这种方式和直接使用script[type="text/html"]的效果基本一致。

内容的提问来源于stack exchange，提问作者reformed