So, styling a checkbox with CSS is still a pain, huh? The default styles are fine, then. 🤷♂️ https://stackoverflow.com/a/27779075
@iMartyn @nolan I agree. However, there are valid reasons to want to extend built-in elements. Most common is <button>, especially for creating things like toolbars. With a wrapper web component class one can recreate a checkbox in shadow dom and hiding the real one visually all while retaining built-in accessibility features by passing events to the real one. We can do it already, so might as well just make it more efficient.
But accessibility doesn't end with screen readers and magnifiers, it extends to cognitive load. Like my example, some designer will decide that a checkbox looks nice with a dashed box instead of solid, or just a grey box with no border. This increases cognitive load for people understanding what that grey box is. Add to that if they've overridden their background colour to grey for readability reasons, you now have nothing because "style".
@iMartyn @nolan I agree, but it’s already possible to do this both on the web and natively. You see it all over in mobile applications. Terrible designers and developers already waste ridiculous amounts of code on replacing native elements for superficial reasons, and I’ve spent my career yelling at them for it. However, there are valid reasons to allow extending native elements, and throwing that out because someone might replace a checkbox with a chicken is stupid, frankly.
I think I'll agree to disagree on this one, I'm fine with it being difficult to do this, because almost every time web devs modify a built in, standard object like this, it's for all the wrong reasons, and being able to say to the "designer" it's too difficult to change that is a good thing in my view, as a user of the web.