标签不渲染且需 javascript 激活：其 content 是单次使用的 documentfragment，必须用 clonenode(true) 复制后插入；内部脚本不执行、资源不加载，数据绑定和逻辑需手动处理。
template 标签本身不渲染，但必须用 JavaScript 激活才能生效
<template></template> 是浏览器原生支持的惰性容器，它内部的 HTML 不会解析、不触发脚本、不加载资源（如 <img>）、也不参与 DOM 树。但它不是“注释”或“字符串”，而是一个真实存在的 HTMLTemplateElement 节点——这意味着你不能直接把它 innerHTML 进去，也不能靠 CSS 选中它里面的内容。
真正让它“活过来”的唯一方式是：取出它的 content 属性（一个 DocumentFragment），再用 cloneNode(true) 复制一份，最后挂载到目标位置。
- 漏掉
.content直接appendChild(template)→ 什么都不会显示，控制台无报错，但 DOM 中看不到内容 - 直接修改
template.content后再插入 → 会移动原始 fragment，下次再用就为空了（DocumentFragment是“单次消耗品”） - 用
innerHTML替代content→ 会丢失 script、style 和表单控件状态，且无法保留原始节点引用
动态激活时必须 cloneNode(true)，否则第二次就失效
这是最常踩的坑：template.content 是一个 DocumentFragment，它只能被插入一次。一旦你把它 appendChild() 到某个父节点，它就从 fragment 中被移出，再次调用 appendChild(template.content) 就等于插入一个空 fragment。
正确做法永远是复制：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
const tmpl = document.querySelector('#my-template');
const instance = tmpl.content.cloneNode(true); // ✅ 必须 true，否则不复制子节点
parent.appendChild(instance);
-
cloneNode(false)只克隆<template></template>自身，不包含内部结构 - 如果模板里有
<input>或<select></select>，不cloneNode(true)就没有初始值和事件绑定上下文 - 想反复生成多个实例？每次都要重新
cloneNode(true)，不能缓存tmpl.content直接复用
template 内部脚本不会执行，需手动处理逻辑
<template></template> 中的 <script></script> 标签会被解析为节点，但**完全不会执行**；同理，<style></style> 也不会生效，图片不会加载，src/href 不发起请求。这是设计使然，也是它“惰性”的核心体现。
如果你依赖脚本初始化（比如给按钮绑 click、渲染图表），得在 clone 后手动补上：
const instance = tmpl.content.cloneNode(true);
// 手动查找并绑定
instance.querySelector('button').addEventListener('click', handler);
// 或执行内联 script（需提取并 eval，谨慎！）
Array.from(instance.querySelectorAll('script')).forEach(script => {
if (!script.src) {
const fn = new Function(script.textContent);
fn();
}
});
parent.appendChild(instance);
- 避免在
<template></template>里写<script></script>，优先把逻辑抽到外部函数中 - 如果用框架（如 Vue/React），它们的 template 编译机制和原生
<template></template>无关，别混淆 - 动态插入后，CSS 作用域仍受当前文档影响，
<style></style>需提前注入或用 scoped 方式管理
与 innerHTML 相比，template 更安全、更语义化，但不自动解析属性
用 innerHTML = str 动态插入 HTML 容易 XSS，也绕过 HTML 解析器的校验；而 <template></template> 是声明式、预定义、可复用的 DOM 片段，天然规避拼接字符串的风险。
但注意：它不会帮你解析数据绑定语法（如 {{name}}）、不支持条件或循环——那些都得你自己用 JS 处理：
<template id="item-tmpl"><li class="item"><span>{{label}}</span></li>
</template>
// ❌ 下面这行不会自动替换 {{label}}
instance.querySelector('span').textContent = data.label;
- 变量插值、条件渲染、列表映射……这些都得手写 JS 实现，
<template></template>只提供结构容器 - 若需复杂模板能力，建议搭配轻量库（如
lit-html）而非硬刚原生 - 服务端返回的 HTML 字符串，不要直接塞进
<template></template>的 innerHTML —— 应该用DOMParser解析后再 append 到 content
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
