template标签是离线容器，不渲染不执行；必须用content.cloneNode(true)获取内容，innerHTML为空；填值优先用textContent/value防XSS；批量插入需用DocumentFragment优化性能；slot和内联事件在普通DOM中无效。
template 标签本身不渲染、不执行、不绑定，它只是个离线容器。想靠它实现“轻量级渲染”，必须手动克隆 + 填值 + 插入，没有自动更新或响应式逻辑。
为什么 template.content.cloneNode(true) 是唯一可靠入口
很多人卡在第一步：用 document.querySelector('template').innerHTML 拿不到内容，返回空字符串。这是因为 template 的真实子节点被包裹在 DocumentFragment 里，只能通过 content 属性访问。
-
template.innerHTML永远为空，别用 -
template.textContent返回所有文本（含换行缩进），但无法操作 DOM 结构 - 不加
true是浅克隆：子元素事件监听器、input光标位置、表单状态全丢
填值时别碰 innerHTML，优先用 textContent 和 value
用 innerHTML 拼接字符串填值，等于主动引入 XSS 风险，还会意外销毁已绑定的事件监听器（比如模板里原本有 button，克隆后 onclick 就没了）。
- 纯文本内容：
el.querySelector('.title').textContent = data.title - 表单控件：
el.querySelector('input').value = data.value，不是textContent - 需要保留 HTML 结构？先对用户输入做转义（如
text.replace(/&/g, '&')），再塞进innerHTML - 模板中含
<script></script>或？cloneNode(true)不会执行脚本，也不会重复加载样式
批量插入必须用 DocumentFragment，否则性能崩得快
循环里每轮都 container.appendChild(cloned)，等于让浏览器反复重排重绘。100 条数据可能就明显卡顿；500 条基本卡死。
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
- 用
const frag = document.createDocumentFragment()创建中间容器 - 循环中调用
frag.appendChild(cloned) - 循环结束后，只调一次
container.appendChild(frag) -
frag是轻量中间容器，不能被查到，也不在 DOM 树中
slot 在普通 DOM 里不生效，别混用 Web Components 逻辑
想存 ID 或索引？data-id 可以保留在克隆节点上，但不会自动变成 JS 对象属性；想用 slot 分发内容？原生 template 不激活 slot 机制——它没挂载到 Shadow DOM，slot="xxx" 根本不解析。
- 错误示范：
cloned.querySelector('[slot="title"]').textContent = 'xxx'，实际无效 -
- 内联
onclick或oninput不会自动绑定事件，必须显式调用addEventListener
最容易被忽略的是：每次克隆后都要重新绑定事件，且不能依赖模板里的内联事件；另外 IE11 及更早版本完全忽略 template 标签，其子节点会被当作普通 DOM 渲染出来——这不是 bug，是规范未实现，需单独降级处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
