I am currently developing a web-application with Vaadin. Vaadin components are using the web-components standard, so the components DOM is capsuled in a shadow dom.
Now I would like to apply a custom style for all the scrollbars in the application.
This is possible using the CSS ::-webkit-scrollbar selectors (if the browser supports it).
However, this styles don't apply to the shadowDOM, so if one of the web-components shows a scrollbar (for example the vaadin-grid), that scrollbar does not use my custom style.
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?
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?
No, there is no way do that. That is specifically what web components are purposed to do. I.e. to protect internals from the direct access. So customization of protected elements is possible only when the web component offers some sort of API for that.
In Vaadin the typical approach is themable mixins / style modules which you can import for components in format like below
@CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-grid")
As pointed out by Jouni, you can register a style sheet that applies to all Vaadin components, with themeFor="vaadin-*"
@CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-*")
Which helps the burden.