Help finding documentation for having your application blend well with the components.

[GoHarder]

This question arose because it is possible to add some css to the window scrollbar.
The default browser scroll bar kind of clashes with the rounded design of the components.

That led me to look around to see if there was some documentation on how to have your bits of css like that blend well with the components in the library.

Is there anything like that already and I couldn't find it?
If it doesn't exist would there be something in the pipeline for that soon?
Or do I have to just wing it the best I can?

[creamIcec]

Maybe the problem i'm facing is similar to yours. Also looking for a solution here.
The problem is about the md-outlined-text-field with multi-line enabled(set type to textarea), whose scrollbar is vanilla(by 'vanilla' I mean default to browser), and the appearance can't be modified easily by adding css following on root(index.css):

textarea::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
textarea::-webkit-scrollbar-thumb{
  border-radius: 16px;
}

Commonly we can apply these rules to normal HTML element and it will work but not md components. Is there any token I should use instead? Or this is just not supported yet?

[GoHarder]

There is a way to kind of style the scroll bar the main limitation is that it is browser dependent. The closest I got it to work was this mix in that I found watching Kevin Powell on YouTube.

@mixin scrollbar($selector, $background-color) {
   #{$selector} {
      &::-webkit-scrollbar {
         width: 1em;
         box-sizing: content-box;
      }

      &::-webkit-scrollbar-track {
         margin-block: 0.25em;
      }

      &::-webkit-scrollbar-thumb {
         background: rgba(0, 0, 0, 0.12);
         border-radius: 1000px;
         border: 0.25em solid $background-color;
      }

      &:hover {
         &::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.24);
         }
      }
   }

   @supports (scrollbar-color: rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0)) {
      #{$selector} {
         scrollbar-color: rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0);
         scrollbar-width: thin;

         &:hover {
            scrollbar-color: rgba(0, 0, 0, 0.24) rgba(0, 0, 0, 0);
         }
      }
   }
}

Since this library uses web components the styles are encapsulated within the component. The good thing is that you can add CSS variables and get the customization you need. If you need something that is outside the variables then you need to peel open the web and hand roll your own with the modified CSS.

[aogzpa]

I've been looking into this issue of scrollbar styling, and I think I've found a solution based on how the official Material Web Components catalog handles it.

It appears the catalog itself implements custom scrollbar styling. I found the relevant code in the nav-drawer.ts file: link to nav-drawer.ts#L373

This snippet demonstrates the approach they are using to style the scrollbars. It looks like they're using a combination of CSS pseudo-elements (::-webkit-scrollbar, ::-webkit-scrollbar-thumb, etc.) to target and customize the scrollbar appearance across different browsers.

This example provides a solid starting point for anyone looking to implement cross-browser custom scrollbar styling within their Material Web Components project. You can adapt the CSS rules to match your specific design requirements.

It might be helpful to document this approach more clearly in the Material Web Components documentation itself. Perhaps a dedicated section on styling scrollbars would be beneficial. I'd be happy to contribute a PR if that's something the maintainers would consider.

Let me know if this helps, or if you have any further questions!

[creamIcec]

@GoHarder @aogzpa Thanks to all of your suggestions! Unfortunately what I'm trying to do is to modify the md-outlined-textfield web component, which means the textarea node is inside this component and after many hours of trail and error I found possibly the only way to apply styles to scrollbar of md-outlined-textfield is patch the library code. Below are what I've tried but with no luck:

1. push custom stylesheet to adoptedStyleSheets property of shadow root created by the component
2. use::slotted(textarea) or ::part(textarea) pseudo selector
3. apply styles to :root, html and body
   All of these fail and by possibly I mean I've tried modifying source code doesn't work as well, but there must be somewhere styles are defined.
   Maybe next step is to create a custom token or variable for the scrollbar, I will try this in a few days.

@aogzpa I've checked the catalog source code but unfortunately their css is for div scrollbar which is not a web component, and modifying their scrollbar is easy, just use -webkit-scrollbar-xxx and this simply works.