标签本身不支持自动复用，仅作休眠容器；必须通过JavaScript调用cloneNode(true)深拷贝后，再用appendChild()或insertAdjacentHTML()插入DOM才能生效。
纯前端 HTML 模板复用， 标签本身不自动复用——它只是个“休眠模具”，必须靠 JS 显式克隆和插入才能生效。没有 JavaScript， 就是浏览器直接跳过的注释。
为什么 cloneNode(true) 是复用的起点
内容被解析为 DocumentFragment，不挂载、不执行脚本、不加载图片或 iframe。想让它出现在页面上，唯一可靠方式就是调用 cloneNode(true) 创建深拷贝，再用 appendChild() 或 insertAdjacentHTML() 插入目标位置。
- 不 clone 直接
appendChild(template.content)会导致内容被“搬走”：第二次插入时template.content已为空 -
cloneNode(true)复制所有子节点和事件监听器（如果已绑定），但不会复制父级上下文（比如this指向） - 若模板含
<script></script>，克隆后仍不会自动执行；需手动eval()或createScript()，但极不推荐——有安全与执行时序风险
fetch + template 是静态页最现实的复用路径
把公共片段（如 nav.html、footer.html）抽成独立文件，用 fetch() 加载后注入，是纯前端、无构建、现代浏览器兼容的底线方案。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 服务端必须允许同源请求；
python -m http.server默认禁用 CORS，换用serve或live-server - 注入时机必须等
DOMContentLoaded，否则document.head或目标容器可能还不存在 - 优先用
insertAdjacentHTML('afterbegin', html)插入，避免覆盖已有或 - 务必加
try/catch，对 404 或网络失败做降级处理（例如console.warn('Failed to load nav.html')），不能让整个导航栏消失导致页面不可用
别把 当 include 用
customElements.define() 注册、Shadow DOM 封装，且样式默认不穿透。
-
Home MyHeader类，浏览器就当无效标签处理，DOM 中可见但无行为 - Shadow DOM 隔离样式：外部 CSS 无法影响组件内部，统一改颜色得进组件源码改，反而增加维护成本
- 项目没用 Custom Elements 全套机制时，单独引入一个自定义标签，属于过度设计——多写三行 JS 就能完成的事，不必搭整套 Web Components 基础设施
容易被忽略的三个硬伤：路径、编码、静默失败
复用逻辑跑通后，真正上线时最容易崩在细节：
-
相对路径失效：模板里写的
./images/logo.png，在被fetch加载后，浏览器按当前页面 URL 解析，不是按模板文件所在路径——统一改用绝对路径或 base 标签控制 - 编码不一致：模板文件保存为 GBK 而页面是 UTF-8，中文会乱码；确保所有 HTML 文件用 UTF-8 无 BOM 保存
-
错误静默：
fetch()失败不抛异常，response.ok === false却没判断，结果页面某块空白，连控制台都不报错——必须显式检查response.status和response.redirected
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
