template 标签仅作离线结构存储，不渲染、不执行、不绑定；所有动态行为需 JS 手动克隆、填值、事件绑定与 DOM 插入，无插值、无响应式、无指令解析。
template 标签本身不渲染、不执行、不绑定，它只是个离线结构仓库；所谓“可配置”，全靠 JS 手动克隆、填值、绑定事件、插入 DOM —— 没有插值语法，没有响应式，也没有属性监听。
为什么直接写 {{title}} 或 v-if 在 template 里没用
浏览器跳过 template 内容解析，{{title}} 就是纯文本，v-if 是 Vue 特有指令，在原生 HTML 中完全无效。常见错误是把模板引擎写法硬塞进去，结果页面空白、控制台无报错、调试无头绪。
-
template.content是只读的DocumentFragment，无法被自动求值或替换 - 必须用 JS 主动查找节点，例如
clone.querySelector('.title').textContent = config.title - 图片
src、按钮disabled状态等，都得一行行手动赋值 - 若模板含
<script></script>或内联<style></style>，克隆后也不会执行或生效
如何用 document.importNode() 安全克隆并填充
cloneNode(true) 会丢失表单控件状态（比如 <input checked> 的选中态），而 document.importNode(tmpl.content, true) 能保留状态、兼容 Shadow DOM、正确处理 <select></select> 选项，是更稳妥的选择。
- 获取模板：
const tmpl = document.getElementById('card-template') - 克隆内容：
const fragment = document.importNode(tmpl.content, true) - 绑定数据：遍历
fragment.querySelectorAll('[data-bind]')，按data-bind="title"匹配字段 - 防 XSS：用户输入字段统一用
textContent，富文本才用innerHTML（且需白名单过滤） - 挂载时用
container.appendChild(fragment)，别用innerHTML = ...覆盖已有结构
怎么让配置更新触发重渲染
template 没生命周期，attributeChangedCallback 对 JSON 配置对象无效；实际做法是把配置存在实例属性上，提供 updateConfig() 方法，内部清空容器、重新克隆、填值、绑定、插入。
立即学习“前端免费学习笔记（深入）”；
- 首次渲染必须在
connectedCallback中显式调用this.render()，否则 SSR 注入的属性不会触发初始化 -
updateConfig()内部应做浅比较：if (oldValue === newValue) return，避免无谓重绘 - 交互元素（如按钮）每次克隆后必须重新绑定事件，不能依赖事件委托——尤其在 Shadow DOM 下会失效
- 禁止在
attributeChangedCallback中直接操作 DOM，改用Promise.resolve().then(() => { /* 更新 */ })推迟到微任务末尾
和 Custom Elements 比，template 方案的边界在哪
它不提供封装性、无样式隔离、无属性响应机制，适合静态内容或低频交互场景；一旦需要主题切换、跨组件通信、CSS 变量注入或 Shadow DOM 隔离，就得切到 Custom Elements。
- 类名必须带前缀（如
.c-card__title），禁用泛化名（如.title），否则样式易泄漏 - 模板内禁止硬编码
id，多次复用会导致 ID 重复，破坏 CSS 查询和 JS 定位 - 所有“配置”本质是函数参数，不是 DOM 属性；想用
data-config传对象？得先JSON.parse(this.getAttribute('data-config')) - 真正难的不是克隆，而是把“填值 + 绑定 + 校验 + 错误反馈”这一整套逻辑收口成可维护、可测试的函数
