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

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

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

有没有一种方法可以将此样式应用于页面上的所有滚动条,而无需将自定义样式添加到每个web组件的阴影dom中

不,那是不可能的。这就是web组件的具体用途。即,保护内部构件不被直接接触。因此,只有当web组件为此提供某种API时,才可能定制受保护的元素

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

@CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-grid")
正如Jouni所指出的,您可以注册一个适用于所有Vaadin组件的样式表,并使用emfor=“Vaadin-*”


这有助于减轻负担。

这正是我所担心的。我知道web组件的目的是保护内部。然而,滚动条实际上不是内部的东西,而是由浏览器控制的东西。组件通常仅控制是否可见。所以我的希望是,有一种方法可以在全球范围内对其进行定制您可以注册一个适用于所有Vaadin组件的样式表,使用themeFor=“Vaadin-*”@Jouni这可能会解决我的问题。非常感谢。
@CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-*")