因为link.sheet是只读未激活实例，无法参与样式计算；必须用new CSSStyleSheet()创建并调用replaceSync()或replace()注入规则，前者同步适合初始化，后者异步需await用于动态更新。
为什么直接赋值 link.sheet 给 adoptedStyleSheets 不生效
因为 link.sheet 是只读且未激活的 CSSStyleSheet 实例，浏览器不会将其纳入样式计算流程。即使赋值成功、控制台无报错，样式也完全不渲染。必须用 CSSStyleSheet 构造函数创建新实例，并显式注入规则。
CSSStyleSheet.replaceSync() 和 replace() 怎么选
replaceSync() 同步执行，适合初始化时一次性写入静态样式；replace() 返回 Promise，适合动态更新（如主题切换），但需 await 等待完成，否则后续样式可能错乱。
- 初始化阶段优先用
replaceSync()，避免异步竞态 - 运行时修改样式必须用
replace()并await，否则adoptedStyleSheets仍指向旧规则 - 不要混用：同一实例不能先
replaceSync()再replace()，会覆盖前序状态
兼容性降级时最常踩的三个坑
当 'adoptedStyleSheets' in shadowRoot 为 false（如 Safari ≤17.3），必须 fallback 到 innerHTML 注入，但极易出错：
- 重复注入：多个组件实例会各自插入相同
<style>，导致权重叠加、调试困难；守卫必须用shadowRoot.querySelector('style[data-id="my-comp"]') - 注入时机错误：在
constructor里 fetch 或拼接 HTML，此时shadowRoot尚未创建；应放在connectedCallback或首次渲染逻辑中 - 路径解析失效：
@import './style.css'的相对路径基于 HTML 文档 URL，不是组件 JS 文件位置，90% 情况下 404 且静默失败
:host 和 CSS 变量继承的实际约束
:host 选择器本身能生效，但变量继承依赖宿主显式定义——如果页面没声明 --text-primary，var(--text-primary, #333) 中的 fallback 值才起作用，而不是继承父级样式。
立即学习“前端免费学习笔记（深入）”；
- 变量穿透是单向的：从 light DOM → shadow DOM，反之不行
-
::part()能外部控制带part属性的子元素，但无法影响框架类名（如uk-button）本身 - 媒体查询可直接写在
replaceSync()字符串里，无需额外处理
