AdoptedStyleSheets 是仅适用于 ShadowRoot 的样式封装机制，必须通过 new CSSStyleSheet() 创建并用 replaceSync()/replace() 注入规则后赋值，不能直接采用 link 或 style 标签的 sheet。
AdoptedStyleSheets 是 Web Components（尤其是 <custom-element>）中用于封装样式的核心机制，但它不能直接在普通 HTML 页面里用 JavaScript 手动设置——它只对 ShadowRoot 有效，且必须通过 adoptedStyleSheets 属性赋值一个 CSSStyleSheet 实例。
你看到的“HTML 做 Adopted Stylesheets”这类说法，本质是混淆了「样式表引入方式」和「样式表采用方式」。真实场景里，没人用 HTML 标签去“做” adopted stylesheets；它是 JS 创建 Shadow DOM 时的配套能力。
为什么 document.querySelector('link').sheet 不等于 adopted stylesheet
很多人以为把 <link rel="stylesheet"> 的 sheet 属性取出来，再塞进 shadowRoot.adoptedStyleSheets = [sheet] 就算“用了 adopted”，但这是错的：
-
link.sheet返回的是一个CSSStyleSheet，但它默认处于“未激活”状态，无法被 adopt —— 浏览器会静默忽略 - 只有通过
new CSSStyleSheet()创建、或用document.adoptedStyleSheets（注意：这是全局属性，仅 Chrome 支持且已废弃）生成的 sheet 才能被 adopt - 更关键的是：
adoptedStyleSheets是只写属性，且只接受CSSStyleSheet实例，不接受 URL、字符串或<style>元素
怎么真正创建并 adopt 一个 CSSStyleSheet
必须走 JS 构造 + 插入规则流程，不能靠 HTML 标签自动加载：
立即学习“前端免费学习笔记（深入）”；
- 用
new CSSStyleSheet()创建空表（兼容性：Chrome 73+、Firefox 94+、Safari 15.4+；Edge 同 Chrome） - 调用
replaceSync()或replace()写入 CSS 文本（replaceSync是同步阻塞式，适合初始化；replace返回 Promise，适合异步加载） - 最后赋值给
shadowRoot.adoptedStyleSheets
示例：
const sheet = new CSSStyleSheet();
sheet.replaceSync(`:host { display: block; color: blue; }`);
const shadow = element.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [sheet];常见错误：试图 adopt 外部 CSS 文件
以下写法完全无效，控制台不会报错，但样式不会生效：
-
shadow.adoptedStyleSheets = [document.querySelector('link[href="theme.css"]').sheet]→sheet是只读引用，不是可 adopt 实例 -
fetch('theme.css').then(r => r.text()).then(css => { const s = new CSSStyleSheet(); s.replaceSync(css); ... })→ 看似合理，但若 CSS 中含@import或相对路径资源（如url(./img.png)），会因 base URL 缺失而失效 - 在
<style>标签里写好样式，再用document.querySelector('style').sheet→ 同样不行，该sheet无法被 adopt
替代方案：什么时候该用 adopted，什么时候不该用
adopted stylesheets 的价值只在 Shadow DOM 封装场景下成立。如果你只是想换肤、动态加样式、或控制全局外观：
- 普通页面换主题 → 直接改
<link>的href，或切<html>class（见知识库中“CSS 类驱动主题”方案） - 需要复用同一份样式到多个 ShadowRoot → 可以
new CSSStyleSheet()一次，然后 assign 给多个shadowRoot.adoptedStyleSheets - 要支持老浏览器（如 IE11、旧 Safari）→ 放弃
adoptedStyleSheets，改用shadowRoot.appendChild(document.createElement('style'))注入文本
真正的坑在于：它看起来像通用样式管理 API，其实是个高度受限的 Shadow DOM 专用通道。没用对地方，就只剩兼容性和调试成本。
