标签本身不支持自动复用，仅作休眠容器；必须通过JavaScript调用cloneNode(true)深拷贝后，再用appendChild()或insertAdjacentHTML()插入DOM才能生效。
纯前端 HTML 模板复用，<template></template> 标签本身不自动复用——它只是个“休眠模具”，必须靠 JS 显式克隆和插入才能生效。没有 JavaScript，<template></template> 就是浏览器直接跳过的注释。
为什么 cloneNode(true) 是复用的起点
<template></template> 内容被解析为 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() 加载后注入，是纯前端、无构建、现代浏览器兼容的底线方案。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 服务端必须允许同源请求；
python -m http.server默认禁用 CORS，换用serve或live-server - 注入时机必须等
DOMContentLoaded，否则document.head或目标容器可能还不存在 - 优先用
insertAdjacentHTML('afterbegin', html)插入，避免覆盖已有<meta>或<link> - 务必加
try/catch，对 404 或网络失败做降级处理（例如console.warn('Failed to load nav.html')），不能让整个导航栏消失导致页面不可用
别把 当 include 用
<slot></slot> 是 Web Components 的内容分发机制，不是 HTML include 的替代品。它依赖 customElements.define() 注册、Shadow DOM 封装，且样式默认不穿透。
立即学习“前端免费学习笔记（深入）”；
-
<my-header>Home</my-header>这种写法，若未注册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
