原生 <template> 标签内容被浏览器跳过解析，需用 document.importNode() 安全克隆并手动绑定数据，支持属性传参但无响应式、无封装、无样式隔离，适用于静态或低频场景。
为什么不能直接当组件用
浏览器解析到 <template> 时会跳过其内容，不渲染、不执行脚本、不加载图片，DOM 中完全不可见。常见误操作是把它当 Vue 的 <template> 或 Web Component 的 <slot> 用，结果页面一片空白。
直接 innerHTML = template.innerHTML 会丢失表单状态（比如 <input checked> 的选中态）；用 cloneNode(true) 复制含 <script> 或 <style> 的模板，这些节点不会自动执行或生效；模板里写 {{title}} 这类插值语法，原生 HTML + JS 完全不识别，必须手动替换。
怎么安全克隆并填充内容
核心是用 document.importNode() 替代 cloneNode()，它能保留表单控件状态、正确处理 <select> 选项、兼容 Shadow DOM 场景。
- 获取模板：
const tmpl = document.getElementById('card-template') - 克隆内容：
const fragment = document.importNode(tmpl.content, true)（第二个参数true表示深克隆） - 查找绑定点：遍历
fragment.querySelectorAll('[data-bind]')，根据data-bind="title"找对应节点 - 填充数据：对文本节点用
node.textContent = data.title，对 HTML 内容用node.innerHTML = data.content（注意 XSS 风险） - 挂载：
container.appendChild(fragment)，不要用innerHTML覆盖已有结构
如何让支持属性传参和复用
纯 <template> 没有生命周期或属性监听机制，“传参”本质是调用工厂函数时传入对象，再由 JS 映射到 DOM 节点。它适合静态内容或低频交互场景。
立即学习“前端免费学习笔记（深入）”；
- 定义模板时用语义化
data-bind属性，而非 class 名（data-bind="author-name"比class="author"更易维护） - 工厂函数返回真实 DOM 节点，而非字符串，避免重复解析（
createCard({ title: 'Hello' })返回DocumentFragment） - 若需响应式更新，得手动实现：缓存首次生成的节点，后续调用时只更新
textContent或dataset值，不重新克隆 - 禁止在模板内硬编码 ID（如
id="card-1"），会导致多次使用时 ID 重复，影响 CSS 或 JS 查询
和Web Components相比，方案的边界在哪
它不提供封装性、无样式隔离、无属性监听、无生命周期钩子。所有逻辑必须外置，所有更新必须手动触发。
真正卡住效率的从来不是“会不会用 <template>”，而是没意识到：模板只是容器，数据来源、错误边界、更新时机这三处没对齐，再好的模板也白搭。
