Shadow DOM 不负责预加载，需在主文档 document.head 中动态插入 link rel="preload" 并早于组件挂载；图片/字体等资源也须在 light DOM 预加载，否则 shadow 内部无法触发。
Shadow DOM 本身不负责资源预加载，它只管隔离；真正起作用的是把 link rel="preload" 放进 shadow root 内部，且必须配合资源注入时机控制——否则预加载会失效或被浏览器忽略。
为什么直接在 shadow root 里写 link rel="preload" 不生效
浏览器只解析主文档（light DOM）中的 link rel="preload"，对 shadow root 内的同类型标签默认无视。这不是 bug，是规范行为：preload 是文档级提示，shadow DOM 不算独立文档。
- 常见错误：在
shadowRoot.innerHTML = `...<link rel="preload" href="a.css" as="style">...`后期望样式提前拉取 - 实际结果：该
link被创建但不触发预加载，后续插入的link rel="stylesheet"仍会阻塞渲染 - 根本原因：preload 必须在 HTML 解析阶段由 parser 处理，而 shadow 内容是 JS 动态注入的，已错过时机
正确做法：用 document.createElement("link") + document.head.appendChild()
预加载动作必须发生在主文档上下文中，且早于组件挂载。把 preload 操作“提出来”，放到 shadow 创建前执行。
- 先在全局
document.head中动态插入link rel="preload"，指定as和必要属性（如crossorigin） - 等资源进入 HTTP 缓存后，再在 shadow root 中插入对应的
link rel="stylesheet"或img标签 - 示例关键顺序：
const link = document.createElement("link");<br>link.rel = "preload";<br>link.as = "style";<br>link.href = "/foundation.css";<br>document.head.appendChild(link); // ✅ 必须在这里<br><br>const host = document.getElementById("foundation-block");<br>const shadow = host.attachShadow({ mode: "open" });<br>shadow.innerHTML = `<link rel="stylesheet" href="/foundation.css"><div class="grid">...</div>`; // ✅ 此时才用
图片/字体等资源在 Shadow DOM 中的预加载陷阱
图片和字体不能靠 shadow 内部的 img 或 @font-face 触发预加载，它们的加载行为取决于是否被渲染树计算——而 shadow 内部元素默认不参与主文档 layout。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 图片：用
new Image().src = url主动触发下载，比藏img更可靠 - 字体：必须在主文档
document.head中用link rel="preload" as="font"，且带crossorigin属性 - 视频/音频：同理，
as="video"或as="audio"的 preload 必须在 light DOM 中注册 - 注意 fallback：预加载失败时，shadow 内部资源仍要能降级加载，比如用
fetch()+Blob URL手动注入
异步脚本在 Shadow DOM 中的加载控制
第三方 JS（如 Foundation 初始化脚本）不能直接 eval 或 innerHTML 注入，否则执行在全局作用域，会污染 window 和样式。
- 正确方式：用
document.createElement("script")创建 script 元素，设置src后 append 到 shadow root，但需加type="module"或defer控制执行时机 - 更安全的做法：用
import()动态导入，然后显式绑定到 shadow root 上下文，例如：const mod = await import("./foundation.js"); mod.init(shadow); - 避免
document.write、document.body.appendChild等全局操作，所有 DOM 修改限定在shadow内
真正难的不是写几行 preload 代码，而是判断哪些资源必须提前拉、哪些可以懒加载、以及如何让 shadow 内部逻辑与主文档的预加载状态同步——这需要你在组件初始化前就规划好资源依赖图，而不是等 connectedCallback 才开始想。
