标签内容惰性不渲染，需通过 content.clonenode(true) 克隆后插入；直接操作 content 会失败，且不支持内联事件绑定、 在普通 dom 无效；ie 需降级处理；语义和可维护性优于 innerhtml。
Template 标签本身不渲染，必须手动克隆和插入
<template></template> 是浏览器原生的惰性容器，它的内容不会被解析、执行或渲染——哪怕里面写了 <script></script> 或 <img src="broken">。很多人以为把 HTML 写进去就“准备好渲染了”，结果发现页面空白，控制台也没报错，就是因为没走后续步骤。
正确做法是：先用 content 属性取到文档片段（DocumentFragment），再用 cloneNode(true) 复制一份（否则移动一次就没了），最后插入到目标位置：
const tmpl = document.querySelector('template#user-card');
const instance = tmpl.content.cloneNode(true);
instance.querySelector('.name').textContent = '张三';
document.body.appendChild(instance);
- 不调用
cloneNode(true)就直接appendChild(tmpl.content)，第二次操作会失败——因为content是“单次提取”的引用，移走就空了 -
tmpl.content是只读的DocumentFragment，不能直接修改属性或添加事件监听器，得先克隆成普通节点树再操作 - 如果模板里有
<slot></slot>，它只在Shadow DOM中生效；在普通 DOM 里写<slot></slot>不起作用，也不会报错
innerHTML + template.content 混用会丢失脚本和样式绑定
有人想“先用 innerHTML 填充数据，再塞进 template”，比如：tmpl.innerHTML = '<div>{{name}}</div>'.replace(/{{name}}/, '李四');——这完全绕过了 <template></template> 的设计初衷，且存在隐患。
<template></template> 的价值在于保留原始结构语义，支持预编译式复用。一旦用 innerHTML 覆盖，里面原本可能存在的 <style></style>、<script></script>、自定义元素或 data-* 属性绑定都会被丢弃或失效。
- 动态内容建议用纯 JS 遍历填充（如上例中的
querySelector+textContent），而非字符串替换 - 若需复杂逻辑，推荐把模板内容抽成函数，返回
DocumentFragment，避免反复查询和拼接 - 注意：模板中内联
onclick或oninput不会自动绑定事件，必须显式调用addEventListener
IE 不支持 template，但可低成本降级
IE11 及更早版本完全忽略 <template></template> 标签，其子节点会被当作普通 DOM 渲染出来（表现为页面顶部意外出现一堆隐藏结构）。这不是 bug，是规范未实现。
无需引入整个 polyfill 库。一个轻量判断就够了：
const tmpl = document.createElement('template');
if (!('content' in tmpl)) {
// IE fallback：改用 script[type="text/template"] 或隐藏 div
const fallback = document.querySelector('script[type="text/template"][id="user-card"]');
const html = fallback.textContent;
const temp = document.createElement('div');
temp.innerHTML = html;
// 后续同 cloneNode 流程处理 temp.firstElementChild
}
- 不要用
document.implementation.createHTMLDocument()模拟，IE 对该 API 支持也不稳定 - 避免在
<template></template>外层套<div style="display:none"> 降级——这样在现代浏览器里反而会多渲染一次无用节点<li>服务端渲染场景下，可直接输出 <code><template></template>内容为字符串，由客户端 JS 安全解析（需确保无 XSS 风险） - 大量重复节点（如表格行、列表项）用
template更易做局部更新，配合DocumentFragment批量插入还能减少重排 - 如果模板含第三方组件（如
<my-button></my-button>），只有template.content能保证自定义元素生命周期钩子正常触发 - 别为了“性能”放弃语义——现代浏览器对
template的解析已非常快，瓶颈几乎总在 JS 逻辑或样式计算上
template 与 innerHTML 性能差异很小，但语义和维护性差别很大
有人测过，用 innerHTML 插入 100 条记录比 template.cloneNode 快几毫秒——但这不是选型依据。真正影响开发效率的是结构变更时的脆弱性。
比如模板里加了个 class="avatar"，用 innerHTML 方式就得全局搜字符串模板、改所有 .replace() 调用；而 template + querySelector 只需改一处 DOM 操作路径。
真正容易被忽略的是：template 的 content 不会响应 document 级事件代理，比如给 body 绑的 click 监听器，对克隆后插入的节点默认生效，但如果你在克隆前就删了原始 template 节点，又没清理事件委托逻辑，就可能出现监听残留或失效。
