原生HTML不支持模块化作用域，所谓“原生模块化”实为利用template、customElements.define()和import.meta.url等浏览器原生能力实现封装复用；import无法加载HTML/CSS文件，必须用fetch+text()或template克隆，customElements.define()结合Shadow DOM才能实现真正作用域隔离。
在 html 文档中实现原生模块化作用域">
原生 HTML 本身不提供模块化作用域——所谓“HTML 原生模块化”，实际是指在不依赖构建工具的前提下，用浏览器原生能力（template、customElements.define()、import.meta.url）实现结构、样式、行为的封装与复用。它不是靠 import './xxx.html' 实现的，那会直接报错。
为什么 import './header.html' 会报错
浏览器原生 ESM 只解析 JavaScript 文件。import 语句只能加载 JS 模块，不能加载 HTML 或 CSS。写 import './header.html' 会触发 TypeError: Failed to resolve module specifier，不是路径问题，是类型不被支持。
- ESM 的
import是静态声明，编译期就要求目标是合法 JS 模块（必须以.js结尾，且内容可被 JS 引擎执行） -
import('./header.html')动态导入也无效——它仍会尝试把 HTML 当 JS 执行，抛出语法错误 - 想加载 HTML 字符串，必须用
fetch()+response.text()，再手动注入 DOM
用 <template> + JS 克隆实现轻量模块化
这是最接近“原生 HTML 模块化”直觉的做法：把可复用片段写进 <template id="header-template">，用 JS 克隆、填充、挂载。零构建、零服务器、IE11+ 兼容。
- 模板内避免硬编码内容，改用占位符（如
{{title}}），由 JS 替换 - 克隆必须用
document.importNode(template.content, true)，比cloneNode(true)更安全（尤其含<input>等表单元素时） - 别在
connectedCallback外操作template.content，此时它可能为空文档片段 - 挂载后记得清空占位符节点，否则重复渲染会残留旧内容
用 customElements.define() 实现真正封装
只有自定义元素才能做到 HTML 层级的模块化：结构 + 样式 + 行为打包进一个标签，通过 Shadow DOM 隔离作用域。这才是浏览器原生支持的“模块化作用域”。
立即学习“前端免费学习笔记（深入）”；
- 类必须继承
HTMLElement，且constructor()中第一行写super()，漏掉会报Failed to construct 'CustomElement': Please use the 'new' operator - DOM 操作必须放在
connectedCallback()里，constructor中元素尚未挂载，查不到父节点 - 要响应属性变化（如
<my-card title="Hello">），需定义static get observedAttributes()并实现attributeChangedCallback() - Shadow DOM 内的样式不会泄漏，但外部 CSS 也无法穿透——想暴露接口就得加
:host或::slotted
注意 file:// 协议下所有模块化都失效
Chrome/Firefox 默认禁止从本地文件协议加载模块脚本或 fetch 外部 HTML。双击打开 HTML 文件时，type="module"、fetch('nav.html') 全部失败，报 CORS 错误。
- 开发阶段必须起本地服务器：
npx serve、python3 -m http.server或vite preview -
import.meta.url是获取当前模块路径的唯一可靠方式，用于构造相对资源 URL：fetch(new URL('./data.json', import.meta.url)) - 别依赖
document.currentScript—— 模块脚本中它始终为null
真正难的不是写几个 <template> 或注册一个自定义元素，而是决定哪些逻辑该封装进 Shadow DOM、哪些该暴露为属性/事件、以及如何让多个自定义元素之间通信而不破坏封装——这些设计权衡，没人能替你做。
