是构建轻量级UI组件系统的最干净起点，但必须配合document.importNode()克隆、手动数据绑定和DOM挂载才能生效；纯innerHTML会丢状态、不兼容表单、无法响应式更新。
直接说结论： 是构建轻量级、无构建工具依赖的 UI 组件系统的最干净起点，但它本身不是组件——必须配合 document.importNode() 克隆、手动数据绑定和 DOM 挂载逻辑才能生效。纯靠 innerHTML = template.innerHTML 会丢状态、不兼容表单、无法响应式更新。
为什么
浏览器遇到 会跳过解析：里面 <script></script> 不执行、data-* 属性不被识别、 的选中态也不保留。常见错误是把它当 Vue 的 或 Web Component 的
更隐蔽的问题是：用 cloneNode(true) 复制后插入， 的当前选项、 的光标位置、 的文件列表全都会丢失——这些只有 document.importNode() 能正确保留。
document.importNode() 怎么安全克隆并填充数据
核心流程是“取模板 → 克隆片段 → 查找绑定点 → 填充内容 → 挂载”，不是字符串替换。
- 获取模板：
const tmpl = document.getElementById('card-template') - 深克隆内容：
const fragment = document.importNode(tmpl.content, true)（第二个参数必须为true） - 查找绑定节点：
fragment.querySelectorAll('[data-bind]')，比如 - 填充文本内容：
node.textContent = data.title（避免 XSS，禁用innerHTML写用户输入） - 挂载到容器：
container.appendChild(fragment)，不要用innerHTML覆盖已有结构，否则丢失事件监听器和表单状态
如何让
它没有生命周期、不监听属性变更、也不封装样式——所谓“传参”本质是调用工厂函数时传入对象，JS 手动映射到 DOM 节点。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
关键约束：
- 模板内禁止硬编码
id属性（如id="card-1"），多次使用会导致 ID 冲突 - 用语义化
data-bind属性（如data-bind="author-name"），比class="author"更易维护和批量更新 - 工厂函数应返回
DocumentFragment或真实 DOM 节点，而非 HTML 字符串，避免重复解析 - 若需响应式更新，缓存首次生成的节点，后续只更新
textContent或dataset值，不重新克隆整个模板
和 Web Components 比，
它不提供封装性、无样式隔离、无属性响应、无生命周期钩子——这些缺失不是 bug，而是设计选择。适合静态卡片、列表项、弹窗等低频更新、强结构约束的场景；不适合需要频繁重绘、状态联动或主题切换的复杂控件。
最容易被忽略的一点：Safari 对 template.content 在旧版本中支持不稳定，必须加兜底逻辑：if (!tmpl.content) tmpl.content = document.createDocumentFragment()，否则在 iOS 14 及更早版本里会报错或返回 null。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
