Scroll bar styling on grid/dialog/textarea/menu

Flow
1

Hi,
today in order to overrule scroll design I am using this css:
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(–cs-scrollbar-bg);
border-radius: 4px;
}
::-webkit-scrollbar-track-piece {
background: var(–cs-placeholder-bg-color);
}
in the root of the shadow dom of those elements using the “themeFor” optiion.
I wonder if same is doable today with new style API.
What I see in dom is just div with id=“scroller” which is not part of components API.
Any advise?

2

In cases where the scrollbar is an exposed part of the shadow dom (e.g. textarea), the answer is no, since the combination of ::part(input-field)::-webkit-scrollbar is not supported. In grid, the scrollable element is not even exposed, so you could not even target it with ::part().

In dialog it depends on, what exactly is creating the scrollbar and if you can easily target that component.

So the simple answer is: no, it seems not doable with non deprecated api. Therefor you should stick to themeFor. While it is deprecated, it is still supported and even necessary for some components like charts, so I assume it will be here for a while.