Always worth noting that using JS to extend the built-in semantic markup is a future-forward approach. When I started working in web development, changes took up to a decade (IE6 held us all back, but the w3c was also fairly toothless back then). Now they happen quickly. Next year, datalists may be stylable in the big three without prefixing but you'll be beholden to your custom JS solution because business won't pay to rebuild. If you use JS to extend the native functionality you can always remove the JS at lower cost when the support is acceptable. Also with this approach, where the native controls are acceptable you can use it now and just apply the JS as a polyfil
Are you aware of any frameworks that take this approach? For example, if I could import their Datalist and use it, but at build or maybe runtime it decides what to use based on the target environment? We of course have this for tons of things like language features.
I don’t mean to be snarky but: have you ever worked at a company where that would be acceptable?
“Hey Boss, I know this looks like shit today and is missing a ton of features but maybe one day we can enhance it”
That wouldn’t fly and since I make components to wrap just about anything we use (third party or custom implementations) so I’m not beholden to it, I can always rewrite that component to use data list (or whatever built-in) if and when it grows up. Also some code gets written once and practically never touched again so my chances to go back and enhance data list as browsers progress is kind of a fairy tale, at least at all the companies I’ve worked at,