带有 Web 组件的页面的自定义滚动条
Custom scrollbar for page with web components
我目前正在使用 Vaadin 开发 Web 应用程序。 Vaadin 组件使用的是网络组件标准，因此组件 DOM 被封装在阴影 dom.
中
现在我想为应用程序中的所有滚动条应用自定义样式。
这可以使用 CSS ::-webkit-scrollbar 选择器（如果浏览器支持）。
但是，此样式不适用于阴影 DOM，因此如果其中一个 Web 组件显示滚动条（例如 vaadin-grid），则该滚动条不使用我的自定义样式。
有没有一种方法可以将此样式应用于页面上的所有滚动条，而无需将自定义样式添加到每个 Web 组件的阴影 dom？
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 时，才可能自定义受保护的元素。
在 Vaadin 中，典型的方法是可主题化的混合/样式模块，您可以按如下格式为组件导入这些模块
@CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-grid")
正如 Jouni 所指出的，您可以使用 themeFor="vaadin-*"
注册适用于所有 Vaadin 组件的样式 sheet
@CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-*")
这有助于减轻负担。
我目前正在使用 Vaadin 开发 Web 应用程序。 Vaadin 组件使用的是网络组件标准，因此组件 DOM 被封装在阴影 dom.
中
现在我想为应用程序中的所有滚动条应用自定义样式。
这可以使用 CSS ::-webkit-scrollbar 选择器（如果浏览器支持）。
但是，此样式不适用于阴影 DOM，因此如果其中一个 Web 组件显示滚动条（例如 vaadin-grid），则该滚动条不使用我的自定义样式。
有没有一种方法可以将此样式应用于页面上的所有滚动条，而无需将自定义样式添加到每个 Web 组件的阴影 dom？
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 时，才可能自定义受保护的元素。
在 Vaadin 中，典型的方法是可主题化的混合/样式模块，您可以按如下格式为组件导入这些模块
@CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-grid")
正如 Jouni 所指出的，您可以使用 themeFor="vaadin-*"
注册适用于所有 Vaadin 组件的样式 sheet@CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-*")
这有助于减轻负担。