Shadow DOM 里 :host 和 ::part 的作用完全不同
很多人以为 ::part 是给 Shadow DOM “加全局样式”的捷径，其实不是。::part 是组件作者主动暴露的“样式锚点”，必须在组件内部用 part="xxx" 显式标记节点，外部才能用 my-component::part(xxx) 选中。没标记？死活选不到。
而 :host 是作用于组件根节点（即 shadowRoot.host 对应的那个自定义元素）的伪类，它不穿透 Shadow 边界，也不依赖内部标记——但它只管最外层，管不了里面任何子节点。
-
:host适合控制组件整体尺寸、显示方式或响应宿主属性（比如:host([disabled])） -
::part(xxx)必须配合组件内<div part="label"> 这类写法才生效 <li>浏览器不支持用 <code>::part选中未声明part属性的元素，连警告都不会抛 - 上线前务必用目标环境真机测试，别只信 CanIUse 数据表
- 用
@supports selector(::part(foo))做渐进增强，fallback 到 CSS 自定义属性或 class - 不要在关键 UI 路径上强依赖
::part，比如按钮禁用态颜色靠它控制 → 会静默失效 - 外部样式无法通过选择器穿透到 shadowRoot 内部节点
-
style标签放在或组件外，对 shadowRoot 内容零影响 - 唯一“穿透”手段是组件自己用
adoptedStyleSheets主动引入外部 sheet，但这属于组件实现细节，不是使用者能控制的
Chrome / Edge 支持 ::part，但 Safari 需要 enable-experimental-web-platform-features
不是所有浏览器默认开箱即用。::part 在 Chrome 97+、Edge 97+ 原生可用；Firefox 目前仍不支持（截至 2024 年中）；Safari 自 15.4 起支持，但仅限开启实验性功能（about:config 或开发者菜单里启用）。
这意味着：如果你写的组件要交付给真实用户，不能假设 ::part 一定生效。尤其面向企业内网或教育场景，Safari + 旧 macOS 组合很常见。
立即学习“前端免费学习笔记（深入）”；
想“全局样式穿透”？!important 在 Shadow DOM 里基本没用
有人试过在外部样式表里写 my-component div { color: red !important; }，发现完全无效——因为 Shadow DOM 的样式隔离是硬隔离，不是优先级问题。!important 只在同一 Shadow 树内比普通规则优先，跨树时根本进不去。
真正能绕过隔离的只有三种方式：:host、::part、以及组件作者开放的 CSS 自定义属性（--my-component-color）。没有第四个。
用 adoptedStyleSheets 动态注入样式，比 ::part 更可控但更重
如果组件是你自己维护的，且需要支持深度定制，直接在 JS 里用 adoptedStyleSheets 注入全局样式表是最稳的方案。它把样式表实例挂载到 shadowRoot 上，等效于在 shadow 内写了 <style></style>，天然无兼容性问题。
缺点是得手动管理 sheet 实例，且每次更新都要重新 set —— 但比起赌浏览器支持 ::part，这点成本值得。
const sheet = new CSSStyleSheet();
sheet.replaceSync(`.label { color: var(--label-color, #333); }`);
this.shadowRoot.adoptedStyleSheets = [sheet];
- 所有现代浏览器（含 Safari 15.4+）都支持
CSSStyleSheet和adoptedStyleSheets - 避免用
innerHTML插<style></style>，那样会触发重排，且无法复用 - 若需主题切换，只需替换
sheet.replaceSync()内容，比反复操作 class 清晰得多
真正难的从来不是怎么写样式，而是判断哪些样式该由组件暴露，哪些该由使用者接管。一旦边界模糊，后面全是 runtime 黑盒问题。
