<template> 本身不支持内容复用，仅作休眠容器；复用需JS调用cloneNode+appendChild/insertAdjacentHTML实现；跨文件引用不可行，无变量替换，fetch+template是静态页底线方案；误用slot或自定义元素会导致过度设计、SEO差、样式隔离等问题。
<template> 标签本身不“支持”内容复用——它只是个容器，不渲染、不执行、不加载资源，但它是实现复用最轻量、最原生、最安全的起点。
真正让复用发生的，是 JavaScript 对 cloneNode(true) 的调用 + insertAdjacentHTML 或 appendChild 的插入动作。没有 JS，<template> 就是段被浏览器忽略的注释。
为什么直接用 <template> 不能自动复用
浏览器解析 HTML 时，<template> 内容会被存入文档片段（DocumentFragment），但不会加入主 DOM 树，也不触发任何脚本、图片加载或样式计算。它就像一个“休眠的模具”，得手动唤醒。
- 写在页面里的
<template id="header"><h1>My Site</h1></template>，对其他页面完全不可见 - 无法跨文件引用：
about.html里定义的<template>，contact.html拿不到 - 没有内置变量替换机制：不能像模板引擎那样写
{{title}}，得靠 JS 手动填值
fetch + <template> 是静态页最可行的复用组合
把公共片段（如 head.html、nav.html）抽成独立文件，用 fetch 加载后注入对应位置。这是纯前端、无构建、兼容现代浏览器的底线方案。
立即学习“前端免费学习笔记（深入）”；
- 必须确保服务端允许跨源或同源请求；
python -m http.server默认不支持，会触发 CORS，换用serve或live-server - 加载时机要等
DOMContentLoaded，否则document.head可能还不存在 - 注入时优先用
insertAdjacentHTML('afterbegin', html)，避免覆盖已有<meta>或<link> - 务必加
try/catch和console.warn：文件 404 或网络失败时，不能让整个页面白屏或功能异常
别误用 <slot> 或自定义元素来“复用静态 HTML”
<slot> 是为 Web Components 设计的内容分发机制，依赖 customElements.define() 注册和 Shadow DOM 封装。它不是拿来替代 include 的快捷键。
-
<my-header><span slot="title">Home</span></my-header>这种写法，需要先定义MyHeader类并注册，否则标签就是无效 HTML - Shadow DOM 会隔离样式，外部 CSS 不会穿透进去——想统一改导航栏颜色？得进组件内部改，反而增加维护成本
- SEO 友好性差：搜索引擎可能无法索引 Shadow DOM 内容，尤其对纯静态营销页很致命
- 如果项目没用到 Custom Elements 全套机制，单独引入一个自定义标签，属于过度设计
容易被忽略的关键点：路径、编码、错误静默
90% 的复用失败不是逻辑问题，而是环境细节没对齐。
- 相对路径以当前 HTML 文件为基准，不是以 JS 脚本位置为准；
fetch('components/nav.html')在子目录页（如/blog/post.html）会请求/blog/components/nav.html - 确保
nav.html文件保存为 UTF-8 无 BOM 编码，否则中文可能乱码，fetch().text()返回的是原始字节流 - 错误处理不能只写
catch(e) { }，至少要console.warn('Failed to load nav.html:', e.message)，否则调试时根本不知道哪步断了 -
<template>里不能放<script>标签——即便克隆插入，里面的脚本也不会执行；需用eval或动态创建script元素（不推荐），或把逻辑移到主页面 JS 中
