My understanding is that practically all ways to style an element inside a shadow DOM, that is not exposed as a part, are deprecated in Vaadin 25. In most cases this is fine since the team did a great job to expose all the “useful” parts of the standard components.
Unfortunately the #table element in the vaadin-grid is not exposed as a part, while at the same time being the only way (that I know of) to apply a custom scrollbar styling.
I understand that changing properties of the scrollbar might be problematic for the behavior of the grid itself, but I would like to change “harmless” things like colors.
Did I miss some recommended way to do this in Vaadin 25?
Hey, Ivan! Thanks, and that’s a good question. This is something we haven’t thought about.
I think we could inherit the relevant CSS properties from the host down to the #table element, so that you could then override them on the <vaadin-grid> element. Another option is to add more custom properties to override them.
And of course you can still use shadow DOM styling in V25 as long as you enable it through the themeComponentStyles feature flag.
If I recall correctly though, the Grid uses the native browser scrollbar, which means that styling it is quite unreliable anyway (doesn’t work in all browsers, etc).
Hi, thanks for the quick response. Ideally we should be able to use the properties available for ::-webkit-scrollbar as we target the modern webkit browsers primarily. If this is not possible, at least a way to set the standard css properties (described here) like scrollbar-color and scrollbar-width.
Thank you in advance.