根本原因是路径解析基准变为当前页面URL而非源文件位置，导致相对路径失效；绝对路径或服务端统一前缀可解决。
为什么组件内 src 路径在动态加载后失效
fetch 或 innerHTML 注入 HTML 片段后，其中的 <img src="logo.png">、<script src="util.js"></script> 看似写对了，却 404 或静默失败——根本原因是路径解析基准变了。原始 HTML 文件里的相对路径（如 ./assets/js/main.js）以该文件所在目录为起点；而注入后的片段，浏览器仍按**当前页面 URL** 解析，不是按源 HTML 文件位置。
常见错误现象：fetch('/components/header.html') 返回 <img src="../images/logo.svg">，但当前页在 /admin/dashboard.html，浏览器就去请求 /admin/../images/logo.svg → /images/logo.svg，而非预期的 /components/../images/logo.svg。
- 绝对路径（以
/开头）最稳定，但需确保部署时网站根目录结构一致 - 协议相对 URL（
//cdn.example.com/lib.js）适用于 CDN，但在file://下直接失败 - 注入前用正则或 DOMParser 重写路径：把
src="../images/替换为src="/components/images/，前提是路径可预测 - 服务端返回时统一用 Web 绝对路径（
/static/前缀），前端无需改写
fetch + v-html 里 <script> 不执行怎么办
这是设计使然，不是 bug。浏览器对 innerHTML 或 Vue 的 v-html 内容做安全限制：<script> 标签被忽略，不会解析也不会执行。强行执行需手动提取并注入，但风险极高。
- 仅限可信源：确认 HTML 片段完全由你控制，无用户输入，否则
eval()或createElement('script')会引发 XSS - 推荐做法：把逻辑抽成独立 JS 模块，用
import()动态加载，再调用对应函数绑定事件 - 若必须 inline 脚本，可用
DOMParser解析字符串，遍历script元素，用document.createElement('script')创建并设置textContent，最后 append 到目标容器 - 注意：动态 script 默认异步，且不继承当前作用域变量；需显式暴露全局函数或用闭包封装依赖
懒加载图片在组件片段里突然失效
给动态注入的 <img loading="lazy"> 加了 loading="lazy"，但滚动时图片仍立即加载——因为 Intersection Observer 在元素插入 DOM 前未激活，或浏览器不支持该属性。
立即学习“前端免费学习笔记（深入）”；
- Chrome 76+、Firefox 75+、Safari 15.4+ 支持
loading="lazy"，旧版 Safari 和部分安卓 WebView 需降级 - 必须设置
width和height属性，否则触发 CLS（布局偏移），且懒加载可能失效 - 注入后手动触发：用
IntersectionObserver监听新插入的img，并在进入视口时设置src（从data-src取值） - 不要同时写
src和loading="lazy"：浏览器可能提前发起请求，造成重复加载
如何让组件内 CSS 样式不污染全局
直接注入含 <style> 的 HTML 片段，样式会全局生效，与主页面冲突。这不是“加载问题”，而是作用域缺失。
-
<style scoped>仅 Vue SFC 支持，纯 HTML 片段无效 - 方案一：CSS Modules —— 构建时自动哈希类名，要求服务端返回的 HTML 已预处理好 class 名（如
class="header__title_abc123"） - 方案二：Shadow DOM —— 用
attachShadow()创建封闭作用域，但需重写渲染逻辑，且不兼容老浏览器 - 方案三：命名约定 + BEM 风格，如所有组件样式加前缀
.cmp-header-，靠人工约定隔离，简单但易破防 - 避免在片段里用
@import：它阻塞渲染，且路径解析更复杂，一律改用<link rel="stylesheet" href="...">并确保 href 是绝对或可靠相对路径
关键点在于：HTML 组件本身没有“同步加载外部资源”的语义，所谓“同步”，实际是开发者对路径、执行时机、作用域的主动控制。最容易被忽略的是路径基准漂移和样式作用域缺失——这两项不解决，其他优化都只是补丁。
