HTML本身不支持代码拆分，因其仅负责结构描述；import无法直接加载.html文件，因浏览器原生模块系统只识别JS模块；需借助构建工具（如Vite/webpack）或fetch动态加载并手动处理DOM与脚本执行。
HTML 本身不支持代码拆分——这不是 bug，是设计使然。它只负责结构描述，不参与模块加载或执行时序控制。真正要解决“拆了怎么装回去、装了怎么跑起来”，得绕开 HTML 的限制，从加载机制和构建流程入手。
为什么 import './header.html' 会报错
浏览器原生 import 只认 JavaScript 模块，遇到 .html 后缀直接抛 TypeError: Failed to resolve module specifier。这不是路径写错，是语义不匹配——HTML 文件没有导出接口，也没有执行上下文。
- 想在开发时静态读取 HTML 字符串？Vite 用
import headerHtml from './header.html?raw'，Webpack 配raw-loader或html-loader - 想运行时拉取？必须用
fetch('./header.html')，但要注意：<script>不会自动执行，<img src="logo.png">的相对路径会 404（除非页面已设<base href="/>） - 别把 HTML 片段塞进
<div style="display:none">—— 它仍参与样式计算和 DOM 构建，浪费性能；改用<template>，干净又轻量
fetch 加载后 innerHTML 为啥逻辑不生效
因为 innerHTML = htmlString 只插入 DOM 节点，不触发脚本执行、不重试 CSS 加载、也不解析新插入的 <link rel="stylesheet"> 或 <script> 标签。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 如果片段含
<script>doInit()</script>，得手动提取并eval（不推荐）或创建新<script>元素插入document.head - 如果依赖全局 CSS，确保主页面已加载对应样式表；Shadow DOM 下更麻烦，得显式注入或靠
:host规则 - 更稳的做法：把交互逻辑抽成独立 JS 模块，加载完 HTML 后再调用初始化函数，比如
initHeader(document.querySelector('[data-module="header"]'))
Web Components 真能替代模块化加载吗
不能。自定义元素解决的是封装与复用，不是“如何把 HTML 文件拆开再拼上”。customElements.define() 注册的是类，不是文件路径。
立即学习“前端免费学习笔记（深入）”；
- 你仍然得用
fetch或构建工具把模板字符串喂给组件内部，或者把模板硬编码在connectedCallback里——这反而让 HTML 结构和 JS 耦合更紧 - Shadow DOM 隔离样式是双刃剑：防止污染，但也意味着你没法用父级选择器统一改所有页脚字体，调试成本上升
- 纯展示型模块（如版权栏）用
<template>+cloneNode(true)更快更可控；有复杂交互的才值得上 Web Component
最易被忽略的一点：模块化真正的瓶颈不在技术选型，而在人——没人维护 data-module 和 data-version，没人校验 header-v2.1.html 是否真和文档里写的 API 一致，模块就只是名字好听的文件夹。约束比约定管用，CI 里加一条检查 data-version 是否匹配 CHANGELOG，比写十页规范有用。
