不能直接当组件用，因为浏览器解析<template>时跳过其内容，不渲染、不执行脚本、不加载资源，DOM中不可见；它仅是静态结构容器，无生命周期、无响应式、无样式隔离，需手动克隆（推荐document.importNode(tmpl.content, true)）、填充数据并管理状态。
为什么不能直接当组件用
浏览器解析到 <template> 时会跳过其内容，不渲染、不执行脚本、不加载图片，DOM 中完全不可见。常见错误是把它当 Vue 的 <template> 或 Web Component 的 <slot> 用，结果页面空白一片。
更隐蔽的问题包括：innerHTML = template.innerHTML 会丢失 <input checked> 的选中态；cloneNode(true) 复制的 <script> 不会自动执行；模板里写 {{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；对富内容用node.innerHTML = data.content（注意 XSS 风险） - 挂载：
container.appendChild(fragment)，别用innerHTML覆盖已有结构，否则破坏事件监听器
如何让支持属性传参和复用
纯 <template> 没有生命周期或响应式机制，“传参”本质是调用工厂函数时传入对象，再由 JS 映射到 DOM 节点。它适合静态内容或低频交互场景。
立即学习“前端免费学习笔记（深入）”；
- 模板内禁用硬编码 ID（如
id="card-1"），避免多次使用时重复 ID 导致 CSS 或 JS 查询失效 - 用语义化
data-bind属性（如data-bind="author-name"），比 class 名更易维护、不易冲突 - 工厂函数应返回
DocumentFragment或真实 DOM 节点，而非字符串，避免重复解析 - 若需后续更新，缓存首次生成的节点，只更新
textContent或dataset值，不重新克隆整个模板
和 Web Components 相比，方案的边界在哪
<template> 方案不提供封装性、无样式隔离、无属性监听、无生命周期钩子。它适合快速原型验证，但不适合长期维护或跨项目复用。
真正容易被忽略的是：你得亲手管理所有“组件实例”的状态同步。比如一个卡片列表里有 5 个 <template> 克隆体，点击某个按钮要高亮对应项？没有 this 上下文，没有响应式依赖追踪，只能靠手动查 DOM + 绑定事件委托 —— 这部分逻辑一旦复杂，就该考虑升级到 customElements.define() 了。
