<link>在Shadow DOM中无效是因为样式隔离机制主动忽略其fetch、解析和应用；唯一合法方式是用CSSStyleSheet构造对象后通过adoptedStyleSheets显式挂载，降级时需检测兼容性并用<style>节点注入。
直接在 Shadow DOM 里写 <link rel="stylesheet" href="style.css"> 是无效的——这不是加载失败，而是浏览器压根不处理它。
为什么 <link> 在 shadowRoot 里完全没用
Shadow DOM 的样式隔离机制会主动忽略所有内部的 <link> 标签：不 fetch、不解析、不应用。哪怕路径正确、CORS 允许、网络通畅，控制台也几乎不报错，只留下 computed styles 为空的困惑。
- 常见错误现象：
shadowRoot.innerHTML = '<link rel="stylesheet" href="theme.css"><div>hello</div>'，元素渲染了，但样式全无 - 动态创建
link并append到shadowRoot同样无效——节点存在，但生命周期被 shadow boundary 截断 -
@import在<style>内部引用外部 CSS 也被拦截（Chrome 120+ 才稳定支持，不建议依赖）
唯一标准方案：adoptedStyleSheets + CSSStyleSheet
这是现代浏览器唯一认可的、合法穿透 shadow boundary 的方式：用 JS 创建样式表对象，再显式挂载。
- 必须用
new CSSStyleSheet()构造，不能用document.styleSheets或<style>节点 - 加载 CSS 文本后调用
sheet.replaceSync(cssText)（同步）或sheet.replace(cssText)（异步） - 最后赋值：
shadowRoot.adoptedStyleSheets = [sheet] - 注意：多次赋值会覆盖，不是追加；如需复用多个 sheet，需自己维护数组
示例：
立即学习“前端免费学习笔记（深入）”；
const sheet = new CSSStyleSheet();
fetch('./button.css')
.then(r => r.text())
.then(css => sheet.replaceSync(css))
.then(() => {
shadowRoot.adoptedStyleSheets = [sheet];
});
兼容性差时怎么降级？别拼字符串，用 innerHTML + <style> 是最稳兜底
当目标环境含 Safari ≤17.3 / Firefox ≤116 / IE11 时，CSSStyleSheet 构造函数会抛 TypeError: Illegal constructor，adoptedStyleSheets 可能为 undefined 或只读。
- 降级逻辑必须先检测：
if ('adoptedStyleSheets' in shadowRoot && CSSStyleSheet.prototype.replaceSync) - 不要手动
innerHTML += '<style>...</style>'—— 每次实例化都重复插入，易内存泄漏 - 推荐做法：提前 fetch CSS 文本，缓存后在
connectedCallback中创建style元素并append到shadowRoot - 若用
webcomponentsjspolyfill，记得调用ShadyCSS.styleElement(this)触发作用域重写
容易被忽略的关键点：路径、变量、模式
即使用了正确方法，以下三点仍常导致样式“看似生效实则失效”：
-
fetch('./style.css')中的./是相对于当前 JS 文件，不是 HTML 页面——推荐用new URL('./style.css', import.meta.url)确保定位准确 - CSS 变量（
var(--color)）不会自动继承，必须在宿主元素上声明，并在 shadow 内用:host { --color: var(--color, #000); }显式桥接 - 如果
attachShadow({ mode: 'closed' })，shadowRoot为null，所有注入操作静默失败；调试阶段务必用mode: 'open'
