HTML Imports已被所有现代浏览器移除支持，2026年无法使用；Chrome 73、Firefox 75、Edge 79起彻底移除，Safari从未实现，W3C已于2019年撤回该标准。
HTML Imports 已被所有现代浏览器移除支持，2026 年无法在任何主流浏览器中使用它实现 HTML 模块化。别试了，link[rel="import"] 会静默失败或直接报错。
为什么 HTML Imports 现在完全不可用
Chrome 73、Firefox 75、Edge 79 起已彻底移除该 API；Safari 从未实现。W3C 早在 2019 年就将其从标准中撤回。你现在看到的任何“成功运行”案例，要么是旧版浏览器快照，要么依赖已停止维护的 Polyfill（如 webcomponentsjs 的 html-imports 分支），而这些 Polyfill 在 ES Module 全面普及后早已失效。
常见错误现象：Failed to execute 'import' on 'Document': Cannot import non-module script 或控制台无报错但 document.querySelector('link[rel="import"]').import 返回 null。
- 即使加了
type="module"，link[rel="import"]也不会被识别——两者毫无关系 - 试图用
fetch('header.html')+innerHTML模拟 Imports？这不算 Imports，只是手动加载，且存在 XSS 风险和解析边界问题（比如 script 标签不执行） - 构建工具（如 Webpack/Vite）里写的
import './header.html'是编译期行为，生成的是内联字符串或 JS 函数调用，和原生 HTML Imports 完全无关
替代方案中真正能落地的三种方式
别纠结“导入 HTML”，转而解决“如何复用 HTML 片段”这个本质问题。以下方案均已在 2026 年生产环境验证可行：
立即学习“前端免费学习笔记（深入）”；
-
服务端 includes（SSI/PHP/Jinja 等）：最稳，零 JS 依赖，SEO 友好。Nginx/Apache 开启 SSI 后，
<!--#include file="nav.html" -->即生效，路径解析由服务器完成，无 CORS 问题 -
<template>+ 原生 JS 动态实例化：无需构建、兼容 IE11+。把<template id="header"><header>...</header></template>放在<head>或页面底部，用document.importNode(template.content, true)克隆并挂载，比cloneNode(true)更安全（尤其含表单控件时） -
Web Components（
customElements.define）：唯一真正封装 HTML/CSS/JS 的原生方案。必须继承HTMLElement，在connectedCallback中操作 DOM，用Shadow DOM隔离样式。例如注册后直接写<site-header></site-header>，浏览器原生识别
ES Module 里怎么安全加载 HTML 字符串
如果你坚持用 JS 模块组织逻辑，并需要注入 HTML 内容，import() 动态导入只认 JS 文件，但可以配合 import.meta.url 定位资源：
const html = await fetch(new URL('./header.html', import.meta.url)).then(r => r.text());
document.getElementById('header').insertAdjacentHTML('beforeend', html);
注意点：
- 必须运行在本地服务器（
npx serve、python3 -m http.server等），file://协议下 fetch 会被 CORS 拦截 -
insertAdjacentHTML比innerHTML = html更可控，避免清空已有子节点 - 若 HTML 片段含
<script>，它不会自动执行——这是安全设计，如需执行得手动解析并eval（不推荐）或改用document.createRange().createContextualFragment()后遍历 script 标签
真正麻烦的不是“怎么加载”，而是“怎么让样式、脚本、事件监听都随 HTML 片段一起正确激活”。HTML Imports 曾试图统一解决，但它失败了。现在每个方案都有取舍：SSI 依赖服务器，<template> 需手动绑定事件，Web Components 学习成本高。选哪个，取决于你能否接受对应的约束。
