Web Components 中引入外部CSS无统一标准，原生依赖adoptedStyleSheets，但该API不支持IE11和旧版Safari。
因为“引入外部CSS”这件事本身在 Web Components 里没有统一标准，原生支持靠 adoptedStyleSheets，而这个 API 在旧浏览器（尤其是 IE11、Safari
adoptedStyleSheets 是什么，为什么它成了关键分水岭
adoptedStyleSheets 是现代 Web Components 引入外部样式表的唯一标准方式：它允许你创建一个 CSSStyleSheet 实例，然后通过 shadowRoot.adoptedStyleSheets = [sheet] 注入到 Shadow DOM 中。这种方式干净、可复用、可动态更新，且不污染全局样式。
但它的支持时间线很明确：
- Chrome 73+、Edge 79+：原生支持
- Firefox 117+：2023 年底起稳定支持
- Safari 17.4+（2024 年 3 月起）：移除实验标记，正式启用
- IE11 / Safari ≤17.3 / Firefox ≤116：完全不识别
CSSStyleSheet构造函数，adoptedStyleSheets属性为只读或 undefined
这意味着，如果你的代码写了 new CSSStyleSheet() 或直接赋值 adoptedStyleSheets，在这些浏览器里会直接抛出 TypeError: Illegal constructor 或静默失败。
立即学习“前端免费学习笔记（深入）”；
webcomponentsjs 的 shadycss 怎么补这个缺口
shadycss 不模拟 adoptedStyleSheets，而是绕过它，用 DOM 操作 + 样式作用域重写来达成类似效果：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 把外部 CSS 字符串加载进来，解析其中的选择器（比如
:host、::slotted），自动加上唯一 scope class（如.x-my-el-abc123） - 把处理后的样式插入
<head>或shadowRoot内的<style>标签 - 配合
ShadyDOM的节点包装机制，让样式只对目标元素生效
代价是：无法动态修改 sheet 内容（得手动替换 <style>）、不能复用同一份 sheet 实例、getComputedStyle 查不到原始自定义属性值（需走 ShadyCSS.getComputedStyleValue()）。
哪些场景下 Polyfill 会悄悄失效
即使你用了 webcomponents-loader.js，以下情况仍可能漏掉样式：
- 动态创建的 shadowRoot（比如在
connectedCallback之后才调用attachShadow），没等ShadyCSS.styleSubtree()主动触发样式重计算 - 用了
@import或url()加载外部资源，shadycss默认不解析这些，需提前用ShadyCSS.prepareAdoptedCssText()预处理 - 在
custom-elements-es5-adapter.js之后、webcomponents-loader.js之前就定义了自定义元素，导致 polyfill 加载前已注册，后续样式注册被跳过 - 通过
innerHTML直接写<style>到 shadowRoot，但没调用ShadyCSS.styleElement(el)，样式不会被 scoped
要不要自己写降级逻辑？
可以，但别轻信“简单拼字符串”方案。例如：
shadowRoot.innerHTML = '<style>' + cssText + '</style>'
这在 Safari 17.3 及更早版本能跑通，但会失去所有作用域控制 —— :host 变成无效选择器，slot 样式穿透失效，css custom properties 无法被 ShadyCSS 转换。真正要兼容，就得按 shadycss 的规则走：先 prepareTemplate，再 styleElement，最后 styleSubtree。省略任何一环，都可能在某个旧浏览器里白屏或样式错乱。
真正麻烦的不是“加不加 Polyfill”，而是你得同时维护两套样式注入路径，并确保它们在组件生命周期中不互相干扰 —— 尤其当组件频繁挂载/卸载时，adoptedStyleSheets 的内存管理（手动移除）和 shadycss 的 style 元素清理（ShadyCSS.removeStyleElement）必须一一对应，否则样式残留、内存泄漏都会出现。
