带有网络组件的页面的自定义滚动条

如何解决带有网络组件的页面的自定义滚动条

我目前正在使用 Vaadin 开发 Web 应用程序。 Vaadin 组件使用 web-components 标准，因此组件 DOM 被封装在 shadow dom 中。
现在我想为应用程序中的所有滚动条应用自定义样式。
这可以使用 CSS ::-webkit-scrollbar 选择器（如果浏览器支持）来实现。
但是，此样式不适用于 shadowDOM，因此如果其中一个 Web 组件显示滚动条（例如 vaadin-grid），则该滚动条不会使用我的自定义样式。
有没有办法将这种样式应用到页面上的所有滚动条，而无需将自定义样式添加到每个 web 组件的 shadow dom 中？

解决方法

有没有办法将这种样式应用到页面上的所有滚动条上，而无需将自定义样式添加到每个 Web 组件的 shadow dom 中？

不，没有办法做到这一点。这就是 Web 组件的目的。 IE。以保护内部人员免受直接访问。因此，只有当 Web 组件为此提供某种 API 时，才可以自定义受保护元素。

在 Vaadin 中，典型的方法是可主题化的 mixins/样式模块，您可以按如下格式导入组件

@CssImport(value = "./styles/my-styles.css",themeFor = "vaadin-grid")

正如 Jouni 所指出的，您可以注册一个适用于所有 Vaadin 组件的样式表，使用 themeFor="vaadin-*"

@CssImport(value = "./styles/my-styles.css",themeFor = "vaadin-*")

这有助于减轻负担。