css - 带有 Web 组件的页面的自定义滚动条

Question

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

Answer 1

Is there a way to apply this style to all scrollbars on the page without adding the custom style to the shadow dom of every web-component?

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

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

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

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

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

这有助于减轻负担。