标签是原生惰性dom片段容器，不解析变量或语法，须用.content.clonenode(true)手动克隆插入；innerhtml为空、直插无效、ie不支持，重复使用必克隆。
template 标签不是模板引擎，它不解析变量、不支持条件语法、不自动绑定数据——它只是一个浏览器原生的「惰性 DOM 片段容器」。你不能像 Handlebars 或 Vue 模板那样写 {{name}} 然后让它自动替换，所有动态逻辑都得靠 JS 手动处理。
为什么直接 innerHTML 或 append(template) 没反应
常见错误现象：document.querySelector('template').innerHTML 返回空字符串；template.children 是空 NodeList；把 template 元素直接 appendChild 到页面，什么也不显示。
-
template.innerHTML是只读属性，始终为空，必须走template.content -
template.content返回的是一个DocumentFragment，不是普通元素节点，不能直接插入多次 - 直接
container.appendChild(template.content)只能成功一次，第二次会静默失败（fragment 已被移走） - 想重复使用，每次都要
cloneNode(true)或importNode(template.content, true)
克隆后怎么安全填入动态内容
模板里有 id="user-card"、onclick="doSomething()" 或内联样式？别直接克隆就插——ID 重复、事件绑定失效、样式污染都是坑。
- 克隆后立即重置唯一属性：
clone.querySelector('.card').id = 'card-' + Date.now() - 避免内联事件，改用
addEventListener：克隆后clone.querySelector('button').addEventListener('click', handler) - 不要在
template内写<style></style>标签——它会被解析但不生效；CSS 应该外置或用<link>加载 - 填充文本优先用
textContent，不是innerHTML，防止 XSS（除非你明确信任数据源）
和 script[type="text/template"] 的关键区别
老项目里常用 <script type="text/template"><div>{{name}}</script> 存字符串，但这和 template 完全不是一回事。
-
script[type="text/template"]是纯文本，浏览器不解析 HTML 结构，编辑器无法校验嵌套、自动闭合、引号转义全靠人盯 -
template内容被 HTML 解析器真正解析过，支持<slot></slot>、合法嵌套、自动修复（比如<p></p> <div></div>不报错） -
template.content是真实 DOM 片段，可直接用querySelector、dataset操作；而 script 模板要先innerHTML解析，才有潜在 XSS 风险 - 兼容性上，IE 完全不支持
template，但script[type]无兼容问题——如果还要保 IE，就得降级
最容易被忽略的一点：template 不是“写完就能用”，它的 content 是只读且单次可用的 DocumentFragment。很多人第一次克隆成功就以为搞定了，结果批量渲染时第二项开始空白——那是因为忘了每次都要 cloneNode(true)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
