是浏览器原生惰性 DOM 容器，内容解析但不渲染、不执行脚本、不加载资源；必须置于 或 内，通过 .content 访问 DocumentFragment，克隆后需重置表单属性并深克隆使用。

template 标签不是“写个占位符等 JS 去填”，它是浏览器原生的惰性 DOM 容器——内容被解析但不渲染、不执行脚本、不加载图片，直到你显式克隆它。直接写在 HTML 里就生效，无需额外库或构建步骤。

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

模板必须放在 或 内，且不能嵌套在禁用容器中

浏览器会静默移除位置非法的 template，比如写在 <script></script>、<style></style>、<table>（未包裹 <code><tbody>）或 <code><select></select> 里。

• ✅ 正确位置：<template id="item">...</template>
• ❌ 错误示例：<table><template><tr><td>...</td></tr></template></table> —— <template></template> 会被提到 <table> 外，<code><tr> 可能被自动包进 <code><tbody> <li>⚠️ 注意：<code><template></template> 内部可以写语义上“非法”的结构（如 <p></p> <div>xxx</div>），因为它的内容不走标准渲染流程，只做解析挂起

获取内容只能用 template.content，别碰 innerHTML 或 children

template.innerHTML 永远是空字符串，template.children 永远是空 NodeList —— 因为真实内容藏在只读的 DocumentFragment 里，只能通过 .content 访问。

立即学习“前端免费学习笔记（深入）”；

• ✅ 正确获取：const frag = document.querySelector('#item').content;
• ❌ 错误写法：template.innerHTML.replace(...)、template.firstElementChild、Array.from(template.childNodes)
• ⚠️ 关键点：拿到 frag 后不能直接 append(frag) 多次 —— 第二次会静默失败，因为 DocumentFragment 是移动语义，不是复制语义

每次插入都必须深克隆，优先用 cloneNode(true)

document.importNode(frag, true) 虽然语义更准，但在 Safari 15.4 之前对 <fieldset></fieldset> 或带 required 的表单控件有 bug；cloneNode(true) 兼容性更稳。

• ✅ 推荐写法：const instance = template.content.cloneNode(true);
• ✅ 插入后可安全修改：instance.querySelector('.name').textContent = '张三';
• ⚠️ 表单场景必做：克隆后重设 id、name、for 属性，否则多个实例会冲突；推荐用 crypto.randomUUID().slice(0, 8) 生成唯一 ID
• ⚠️ 图片/iframe 不会预加载，但一旦克隆并插入 DOM，就会立即触发请求 —— 若需懒加载，应延迟赋值 src

模板里写 <style></style> 和 <script></script> 是无效的

template 内部的 <style></style> 不会应用，<script></script> 不会执行，连控制台都不会报错 —— 它们被完全静默处理。这不是 bug，是设计使然。

• ✅ 正确做法：样式写在外部 CSS 中，用 class 控制；交互逻辑统一由 JS 在克隆后绑定事件
• ❌ 不要依赖：<template><script>console.log('never runs')</script></template>
• ⚠️ 容易忽略：如果你把模板用于 Shadow DOM，<slot></slot> 才起作用；纯 cloneNode 场景下，<slot></slot> 就是个普通标签，不会自动分发内容

最常被跳过的一步是：克隆后没重置表单控件的 id 和 name，导致提交时只取到第一个实例的数据，或者点击 label 完全不聚焦输入框 —— 这类问题在 Safari 和 Firefox 中尤其隐蔽。