Or to phrase it a different way: Being able to style and control the width of the scrollbar is so incredibly useful that it must be in the hands of users, and not designers.
I would go even further: websites should not be the ultimate decider on any style-related decision. Including colors, font faces, text size, margins, padding, content width, and any other UI elements. Website should be able to suggest these things, but browsers should default to the user’s preference or the system’s configuration. The user should have the final say on how the User Agent displays HTML content.
Browsers have ceded far too much control over these things to websites, to the point where we are even debating whether they should style such fundamental OS controls as scroll bars!
It's relatively easy to force your custom stylesheets to any website. Whether it will work at all is another question.
I believe what you suggest could work only with semantic HTML without any advanced styling - no floating elements, no flexbox/grid, no absolute/relative positioning etc. This then means return to static text based websites which is fine for many use cases, but not for all.
Ideally, rich web apps which actually need all the CSS/APIs could use them, while the text-based sites would keep custom styling/JS to minimum (which would allow reasonable user-defined styling). But it's impossible to force this dichotomy in practice.
Overriding all css is so popular a concept that no Firefox plugin to do that has more than 100k downloads (and firefox users are probably the most likely to fidget with things like that).
A radical idea - people should be able to create whatever they want in whatever colours and fonts they want and have it shown to viewers the way they want, at least unless the viewer explicitly objects.
They can make custom ones when a native one doesn't exist.
There's literally no reason to write your own implementation of a drop-down menu. Zero. None.
And yet, I occasionally run into a site where I need to enter my mailing address, and they have a drop-down menu to choose my state. In a native component, I can just tab to it, type "or", and Oregon (or OR if they're using the abbreviation) will be chosen, and I can just tab on to the next input field.
But every now and then, I find myself on a form where that doesn't work. It turns out, what looks like a drop-down menu is actually a fancy div, and when you click on it, another div pops up with divs for each item. Oh, but I can't even use my keyboard to choose an option! I HAVE to click!
WHY DO WEB DEVS DO THIS!? What was gained by this? Someone spent time to reimplement something for absolutely zero gain, and a LOT of loss! WHY!?
And my complaints don't even begin to address how the custom solution is probably awful for accessibility.
You don't need to make a custom button.
You don't need a custom date picker.
I'm struggling to think what custom components you think need to be made.
My best guess is that these abominations are made in order to adhere to some pre-made design that specified all the visual aspects without regard for the existing technology. If somebody gives you an export of a design made in Photoshop and says that you need to match it pixel for pixel, that design might not be readily implementable. Depending on the approvals needed, or the cost of hiring external designers, asking them to revisit the design in order to match the tech stack might be politically infeasible.
So instead of design being the intersection of form and function, design becomes entirely detached from the function.
Lets say a date picker was not supported in html, I'd at least prefer they made one aggregating native buttons instead of from scratch with colored divs/whatever.
