HTML本身不支持模块化，import无法直接加载HTML文件，因ES模块规范仅解析JS资源；浏览器会报错，需用fetch+innerHTML、template克隆或Web Components等JS方案实现复用。
HTML 文档本身不支持模块化加载，所有“HTML 模块化”方案都必须通过 JavaScript 控制，或依赖服务端预处理；你写 import './nav.html'，浏览器直接报错或当普通字符串处理。
为什么 import 不能直接导入 HTML 文件
ES 模块规范只定义了对 JavaScript 资源的解析逻辑，import 语句的静态分析器不识别 .html 后缀，也不提供 HTML 内容提取机制。Vite/Webpack 等构建工具能“假装支持”，其实是靠插件把 header.html 编译成导出字符串的 JS 模块，例如：
export default `<header><h1>My Site</h1></header>`
这带来几个实际限制：
- 构建时确定内容，无法运行时动态选模板（比如根据用户角色加载不同 header）
- 返回的是纯字符串，
<script></script>标签不会执行， - Vite 的 HMR（热更新）不感知 HTML 文件变更，改了
header.html不会触发页面刷新 - 路径必须显式带
.html后缀，且用相对路径（./header.html），写成header或header.html?raw都会失败
fetch() 动态加载 HTML 片段的坑点
这是最轻量、无需构建的方案，但容易忽略关键细节：
- 必须确保目标 HTML 是纯片段（不含
、外壳），否则innerHTML = html可能被浏览器自动修正，破坏结构 -
fetch('nav.html')在file://协议下必然失败（CORS），开发阶段必须起本地服务器（npx serve或vite preview） - 脚本不会自动执行：即使片段里有
<script>console.log("hi")</script>，注入后也静默丢弃；如需执行，得用DOMParser解析再遍历<script></script>标签并动态创建（⚠️仅限可信源） - 重复调用可能造成内存泄漏：若在单页应用中频繁加载/卸载同一片段，要手动清理
IntersectionObserver、定时器、事件监听器
Web Components 是唯一原生级 HTML 模块化路径
只有 customElements.define() 注册的自定义元素（如
- 必须继承
HTMLElement并在constructor()中调用super()，漏掉就报Failed to construct 'CustomElement' - DOM 操作只能在
connectedCallback()中进行（此时元素已挂载），不能在constructor()里操作this.innerHTML - 属性变更监听需显式声明
static get observedAttributes()，否则传入 - Shadow DOM 默认启用样式隔离，但若想穿透到宿主页面 CSS，得用
:host-context()或开放part属性，不能靠全局 class
代码拆分不是模块化的前提，但决定它是否实用
你可以把所有组件都打包进一个 JS 文件，也能叫“模块化结构”，但没解决加载效率问题。真正影响用户体验的是资源调度：
- 首屏强依赖的导航栏，适合内联为
+document.importNode()克隆，避免额外网络请求 - 交互后才出现的弹窗、表单，用
await import('./dialog.js')动态导入，Vite 自动打成独立 chunk，配合提前下载 - 第三方组件（地图、图表）优先查 ESM 版本；若只有 UMD，用
import('https://unpkg.com/chart.js@4')，注意 CSP 和跨域限制 - 别用
document.currentScript.src获取当前路径——模块脚本里它永远是null，改用import.meta.url
最容易被跳过的其实是资源卸载：Custom Element 实例从 DOM 移除时，disconnectedCallback 必须手动清理定时器、事件监听器和 IntersectionObserver，否则比 jQuery 插件还容易内存泄漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
