shadow dom 中滚动条美化需将 ::-webkit-scrollbar 样式注入 shadowroot 内部，仅对内部可滚动元素生效；firefox 和 ios safari 仍受限，前者仅支持 scrollbar-width/scrollbar-color（须写在 html/body），后者完全忽略所有滚动条 css。
Shadow DOM 本身不提供滚动条美化能力，它只负责样式隔离——也就是说，你写在 shadowRoot 里的 ::-webkit-scrollbar 规则，只能作用于该 Shadow DOM 内部的可滚动元素，且仍需遵循各浏览器的原生限制。
滚动条样式必须写在 shadowRoot 内部
不能把美化规则放在外部 CSS 或 light DOM 中，否则会被 Shadow DOM 的边界拦住。正确做法是在创建 shadowRoot 后，动态注入包含伪元素样式的 <style></style>：
- 用
shadowRoot.appendChild(document.createElement('style'))插入样式块 - 或使用
adoptedStyleSheets（Chrome 73+ / Safari 16.4+ 支持）：先用CSSStyleSheet实例解析样式，再赋值给shadowRoot.adoptedStyleSheets - 确保目标容器有
overflow: auto或scroll，否则伪元素无处生效
WebKit 浏览器中可完整控制
在 Chrome、Edge、Safari 中，只要滚动容器位于 shadowRoot 内，::-webkit-scrollbar 系列伪类就能正常工作：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
::-webkit-scrollbar控制整体尺寸（width垂直条，height水平条） -
::-webkit-scrollbar-track必须设background，否则透明；建议加box-shadow: inset提升层次感 -
::-webkit-scrollbar-thumb的border-radius不能超过height / 2（垂直条）或width / 2（水平条） - 支持
:hover和:active，但移动端 Safari 对 hover 支持不稳定，建议统一用:active
Firefox 和 iOS Safari 依然受限
这些限制不因 Shadow DOM 而改变：
- Firefox 完全忽略
::-webkit-scrollbar，只认scrollbar-width和scrollbar-color——但这两个属性必须写在html或body上才生效，无法作用于 shadowRoot 内的局部滚动容器 - iOS Safari 彻底无视所有滚动条 CSS，包括 shadowRoot 里的规则，这是苹果明确不支持的行为
- 这意味着：你在 Shadow DOM 里写的 WebKit 滚动条样式，在 Firefox 和 iOS 上会退回到系统默认外观，且无法通过 CSS 强制统一
深色模式需手动适配
Shadow DOM 不自动响应 @media (prefers-color-scheme: dark) 切换滚动条颜色：
- 必须在
<style></style>中显式写出两套规则，分别包裹在@media块内 - 例如：一套用
#8a8a8a作 thumb，另一套用#555，并确保 track 背景在深色下足够对比 - 注意：Firefox 的
scrollbar-color不响应媒体查询，所以深色模式下它仍显示 light 模式设定的颜色
