Shadow DOM中资源路径解析基于document.baseURI，非JS文件位置或HTML来源路径；字体需:host{font-family:inherit}或CSS变量继承；第三方字体应通过adoptedStyleSheets注入并重写相对路径；音视频src及poster同理遵循baseURI规则。
Shadow DOM里图片和字体路径解析规则是什么
Shadow DOM内部的 <img src="logo.png"> 或 @font-face 中的 url(./fonts/inter.woff2)，路径解析完全基于当前文档的 document.baseURI，不是 Shadow Root 所在 JS 文件位置，也不是 HTML 字符串来源路径。这意味着：即使你把组件打包成独立模块、从 CDN 加载，只要页面 URL 不变，资源仍会从该页面根路径发起请求。
常见错误现象：<img src="icon.svg"> 在 Shadow DOM 里 404，但同一路径在 light DOM 下能正常加载——大概率是资源路径没对齐到页面上下文，而非 Shadow DOM 本身拦截。
- 不要写相对路径如
../assets/logo.png，除非你确认宿主页面的<base href>设置或服务器路由能兜住 - 避免依赖
import.meta.url动态拼接路径（它指向 JS 文件位置，与 document.baseURI 不一致） - 推荐用绝对路径（
/assets/logo.png）或完整 URL（https://cdn.example.com/icon.svg）
如何让字体变量穿透并生效于 Shadow DOM 内部
font-family 是可继承属性，但 Shadow DOM 默认不继承宿主元素上未显式声明的字体值。哪怕 body { font-family: "Inter", sans-serif; } 已全局设置，Shadow 内的 <p> 依然可能回退到浏览器默认字体。
实操建议：
- 在 Shadow Root 的
<style>中加:host { font-family: inherit; }，强制继承宿主字体声明 - 如果宿主是
<div>这类无默认字体的元素，需先确保它有明确style="font-family: ..."或 class 带字体声明 - 使用 CSS 变量更可控：宿主设
style="--ui-font: 'Inter', sans-serif;"，Shadow 内写p { font-family: var(--ui-font); }
第三方图标字体（如 Font Awesome）如何安全注入 Shadow DOM
直接 shadowRoot.innerHTML = '<link rel="stylesheet" href="...">' 会导致样式逃逸到全局，违反封装原则，还可能触发 CSP 拦截。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
正确做法分三步：
- 用
DOMParser解析 HTML 字符串，提取<link>的href和<style>的文本内容 - 通过
fetch()获取 CSS 文本，用CSSStyleSheet构造实例（注意 Safari 16.4+ / Chrome 73+ 才稳定支持adoptedStyleSheets） - 对其中的
url(./font.woff2)等相对路径做内联替换，转为绝对路径，再注入shadowRoot.adoptedStyleSheets
示例关键片段：const sheet = new CSSStyleSheet(); await sheet.replace(cssTextWithResolvedUrls); shadowRoot.adoptedStyleSheets = [sheet];
视频/音频元素在 Shadow DOM 中的资源加载行为
<video> 和 <audio> 元素本身支持 Shadow DOM，但其内部 UA Shadow Root（如播放控件）不可访问；你只能控制外层宿主元素的行为。资源加载逻辑不受 Shadow DOM 影响——src 仍按 document.baseURI 解析，preload、crossorigin 等属性照常生效。
容易踩的坑：
- 不要试图在 Shadow DOM 里用
document.createElement('video')后手动appendChild到 shadowRoot，再调load()——这不会触发 UA 控件渲染，且事件监听需绑定到宿主而非内部节点 - 若需自定义控件，应把
<video>放在 Shadow DOM 内，再用 JS 控制其 API，而非替换原生控件 -
poster图片路径同样遵循 document.baseURI 规则，不是 Shadow DOM 范围内路径
真正复杂的是跨域媒体资源与 CORS 配置、MIME 类型校验这些底层约束，Shadow DOM 本身不参与也不缓解这些问题——它只管结构和样式边界，不管网络栈。
