页面空白是因为<template>内容默认不渲染，须用document.importNode()克隆后插入；它无响应式、无样式隔离、无生命周期，仅作HTML预置，动态数据需JS手动绑定，状态与可访问性须显式维护。
用 替换硬编码 HTML 片段时，为什么页面一片空白
因为 <template> 的内容默认不解析、不渲染、不执行脚本、不加载图片——浏览器直接跳过它。常见错误是把 <template> 当成 Vue 的 <template> 或 Web Component 的 <slot> 直接写在 DOM 里，结果什么也不显示。
必须显式克隆并插入：用 document.importNode(tmpl.content, true) 获取可挂载的 DocumentFragment，再 appendChild() 到目标容器。别用 innerHTML = tmpl.innerHTML，会丢失 <input checked> 状态和 <select> 选中项。
- 模板内写
{{title}}插值语法？纯 HTML + JS 不识别，得手动遍历querySelectorAll('[data-bind]')替换 - 模板里带
<script>或<style>？importNode()不会自动执行或生效，需额外处理 - 禁用硬编码
id="card-1"，多次实例化会导致 ID 冲突，影响 CSS 查询和 JS 操作
如何让 组件支持动态数据与复用逻辑
<template> 本身没有属性、生命周期或响应式机制，“传参”本质是调用 JS 工厂函数时传入对象，再映射到 DOM 节点。适合低频更新或静态内容场景。
推荐做法：定义 data-bind="title" 这类语义化属性，而非靠 class 名（如 class="card-title"）定位；工厂函数返回真实 DocumentFragment，不是字符串，避免重复解析。
立即学习“前端免费学习笔记（深入）”；
- 首次生成后缓存节点，后续只更新
textContent或dataset值，不重新克隆，性能更可控 - 若需表单交互反馈（如点击切换状态），得手动绑定事件并维护内部状态，
<template>不提供封装边界 - 不要指望它自动隔离样式——CSS 仍作用于全局，命名空间前缀（如
.c-card__title）必须手写
替换旧 div 块时，怎么避免破坏现有样式和 JS 行为
直接把一堆 <div class="header"> 换成 <template id="header-tpl"> 并不行。原有 CSS 和 JS 很可能依赖 class 名、层级关系或 ID，而 <template> 是“不可见”的，原选择器查不到它。
重构路径要分两步走：先保留旧结构运行，用 JS 动态注入新模板内容；等所有样式、事件、无障碍属性（如 aria-label、tabindex）验证无误，再移除旧 DOM。
- 旧代码里有
document.querySelector('.nav')？得同步改或加兼容层，比如在克隆后给容器加相同 class - 原有 CSS 用
.header h1选中标题？新模板里<h1>在 fragment 内部，需确保插入后结构层级一致 - 移动端适配、焦点管理、键盘导航这些细节容易被忽略，尤其当模板里含
<button>或<input>时
和 Web Components 比， 方案的硬性边界在哪
<template> 是轻量级占位符，不是组件系统。它不提供 Shadow DOM 隔离、无样式封装、无属性监听、无生命周期钩子、无内置响应式更新——这些都得自己补。
如果你的系统已有大量 jQuery 操作、CSS 全局污染严重、或者需要跨框架复用（比如 React 页面里嵌 Vue 组件），<template> 只能做内容预置，不能替代 Custom Elements。
- 想让组件自带主题切换？得靠 CSS 变量 + 手动 setProperty，没有
:host或part伪类 - 要支持 SSR 或构建时预渲染？
<template>在服务端不生效，得配合构建工具（如 posthtml-include）或模板引擎 - 多人协作项目里，缺乏约束易导致模板滥用——比如在模板里写
onclick="doSomething()"，破坏关注点分离
<input type="checkbox"> 被克隆后是否还保留 checked 态？document.importNode() 能保，但 cloneNode() 不能；当前步骤是否设了 aria-current="step"？这些细节不验证，上线后就卡在无障碍测试环节。 
