Shadow DOM 里
和
的作用完全不同
很多人以为
是给 Shadow DOM “加全局样式”的捷径，其实不是。
是组件作者主动暴露的“样式锚点”，必须在组件内部用
显式标记节点，外部才能用
选中。没标记？死活选不到。
而
是作用于组件根节点（即
对应的那个自定义元素）的伪类，它不穿透 Shadow 边界，也不依赖内部标记——但它只管最外层，管不了里面任何子节点。
适合控制组件整体尺寸、显示方式或响应宿主属性（比如
）
必须配合组件内
:host::part::part::partpart="xxx"my-component::part(xxx):hostshadowRoot.host:host:host([disabled])::part(xxx)
这类写法才生效
浏览器不支持用
::part
选中未声明
part
属性的元素，连警告都不会抛
Chrome / Edge 支持
::part
，但 Safari 需要
enable-experimental-web-platform-features
不是所有浏览器默认开箱即用。
::part
在 Chrome 97+、Edge 97+ 原生可用；Firefox 目前仍不支持（截至 2024 年中）；Safari 自 15.4 起支持，但仅限开启实验性功能（
about:config
或开发者菜单里启用）。
这意味着：如果你写的组件要交付给真实用户，不能假设
::part
一定生效。尤其面向企业内网或教育场景，Safari + 旧 macOS 组合很常见。
立即学习
“
前端免费学习笔记（深入）
”；
上线前务必用目标环境真机测试，别只信 CanIUse 数据表
用
@supports selector(::part(foo))
做渐进增强，fallback 到 CSS 自定义属性或 class
不要在关键 UI 路径上强依赖
::part
，比如按钮禁用态颜色靠它控制 → 会静默失效
想“全局样式穿透”？
!important
在 Shadow DOM 里基本没用
有人试过在外部样式表里写
my-component div { color: red !important; }
，发现完全无效——因为 Shadow DOM 的样式隔离是硬隔离，不是优先级问题。
!important
只在同一 Shadow 树内比普通规则优先，跨树时根本进不去。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
真正能绕过隔离的只有三种方式：
:host
、
::part
、以及组件作者开放的 CSS 自定义属性（
--my-component-color
）。没有第四个。
外部样式无法通过选择器穿透到 shadowRoot 内部节点
style
标签放在
adoptedStyleSheets
主动引入外部 sheet，但这属于组件实现细节，不是使用者能控制的
用
adoptedStyleSheets
动态注入样式，比
::part
更可控但更重
如果组件是你自己维护的，且需要支持深度定制，直接在 JS 里用
adoptedStyleSheets
注入全局样式表是最稳的方案。它把样式表实例挂载到 shadowRoot 上，等效于在 shadow 内写了