Default scrollbar under windows should be restyled

This issue is triggered by @danyill originally making a good point that scrolbars should get an extra global styling:

grafik The height of the GOOSE publisher on Chrome is greater than the contained elements.

This gives us a scrollbar on the publisher where we don't need it and a scrollbar on the overall window which is too many scrollbars. They are also the default scrollbars which are intrusive. Perhaps not zero width but less width might be nice.

Probably a CSS change is required which would remove the scrollbars for this case. Perhaps a calc function should be used to subtract the height of the mwc-top-app-bar-fixed element...

Even so, there is the case with more IEDs/GSEControls it will extend.

In this case:

the scrollbar appears to start partway done the publisher pane and abruptly so it doesn't "look right" to my (somewhat unkind) 👁️
Scrollbars as shown here are used in OpenSCD so this is consistent with the overall UI. In the wider world there is flamewars around scrollbars (do you need them, are they a good UI element etc.). Material Design [suggests](https://material.io/components/menus#behavior) there should be scrollbars but the modern take is much more minimalist than the scrollbars we have here.
    Browser support for CSS scrollbars is still weak https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
    But neither do we (at least me) want IE 5.5 scrollbars!
    And the [webkit option](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar)[](https://user-images.githubusercontent.com/674783/157089155-1444633c-8262-47f9-8b1a-d87a4fc5b064.png) is not on a standards track but is the only viable option

To be very concrete, what I was thinking of was something less visually intrusive, i.e.

mwc-list::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: var(--base3);
}

mwc-list::-webkit-scrollbar-thumb {
    background: var(--primary);
}

We can do this using ./public/css/normalize.css but this cannot access theme values (colours etc.). So the following does not work:

::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: var(--mdc-theme-background);
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
}

::-webkit-scrollbar-track {
  background: var(--mdc-theme-background);
}

With specific colours, it styles the main elements, but anything protected by the shadow DOM is not affected (which is most things, see also here).

Implementing this in src/themes.ts is ineffective as this is only pulled in the main open-scd element and so I suspect the shadow DOM is protected from its influence. As plugins are made up of elements with their own shadow DOM, this is probably not a solution.

Material web supports custom theming using CSS custom properties. But these do not extend to scrollbars.

I'm not sure how to progress this at the moment.

openscd / open-scd

Default scrollbar under windows should be restyled #580