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

Question

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

Answer 1

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

不，没有办法做到这一点。这就是 Web 组件的具体用途。 IE。保护内部不被直接访问。因此，只有当 Web 组件为此提供某种 API 时，才能自定义受保护元素。

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

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

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

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

这有助于减轻负担。