template.content.cloneNode(true)是唯一合法取值方式，因template.content为只读DocumentFragment且单次消耗，innerHTML恒为空、children为空 NodeList，不加true则丢失嵌套结构，不可缓存复用，需每次重新克隆。
template.content.cloneNode(true) 是唯一合法取值方式
直接读 template.innerHTML 永远返回空字符串，template.children 是空 NodeList，template.firstElementChild 是 null。浏览器解析时就把内部 HTML 全部转成只读的 DocumentFragment，挂载在 content 属性上——这是唯一能访问它的地方。
克隆必须带 true 参数：template.content.cloneNode(true)。不加 true 只克隆顶层节点，嵌套结构（比如
- 不能缓存
template.content复用：它是单次可用的 DocumentFragment，直接appendChild(template.content)后，再调用就“搬家”了，第二次插入会失败 - 每次都要重新调用
.cloneNode(true)，哪怕内容没变 - 批量插入多个实例时，先克隆到一个
DocumentFragment，再一次性append到目标容器，避免反复触发重排
填值必须手动操作，不支持自动绑定
template 里写 或 ，克隆后显示的是初始 HTML 值，不是用户当前输入或运行时状态。它不跟踪、不响应、不更新。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 表单控件要显式初始化：
clone.querySelector('input').value = ''或clone.querySelector('textarea').textContent = '' - 优先用
textContent和value填值，不用innerHTML，防 XSS - 如果模板含占位符如
{{title}}，得自己写替换逻辑，浏览器原生不解析
事件和资源完全“冻结”，克隆后需重建
template 内的 <script></script> 不执行，
不播放，onclick="alert(1)" 属性无效，addEventListener 更不会自动绑定——因为节点根本没进 DOM。
- 克隆后的节点是全新实例，所有事件监听器必须重新绑定
- 推荐用事件委托替代逐个绑定：在父容器监听
click，用event.target.matches('.delete-btn')判断来源 -
attachShadow手动处理
IE 完全不支持，polyfill 风险高
IE 浏览器连 document.createElement('template') 创建的元素都没有 content 属性，template.content 直接是 undefined。
- 官方 polyfill（如 webcomponentsjs）对
cloneNode(true)行为模拟不完整，尤其涉及深层嵌套或表单时容易出错 - 真要兼容 IE，建议构建时预编译成字符串模板，用
innerHTML插入，别依赖运行时templateAPI - 现代项目默认放弃 IE 支持更稳妥；若必须保，应把
template用法隔离在 feature detect 之后
克隆后是否保留用户输入、事件是否自动继承、IE 兼容性边界——这些都不是“顺手写写就能过”的点，而是每次用都得重新确认的硬约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
