Styling form control elements

Hi,

Let me understand the problem of styling/replacing builtin form controls.

As I understand it, people want to do:

<select name=cities is=map>
<option>Oakland</option>
<option>San Francisco</option>
<option>San Jose</option>
...
</select>
or
<input is=switch type=checkbox ...>

to have a nice fallback when "is" / shadow DOM is not supported.


Why can't we just do:
<map>
<select name=cities>
<option>Oakland</option>
<option>San Francisco</option>
<option>San Jose</option>
...
</select>
</map>
and
<switch><input type=checkbox ...></switch>

instead?  This is how fallbacks work on the Web today for plugins, canvas, etc…

What is so special about form controls or custom elements that warrant a completely different mechanism?

If the concern is that the shadow DOM content in the map/switch elements may not be accessible,
then that needs to be fixed/addressed regardless since there is no way for UAs to decide whether a given
custom element / shadow DOM should be ignored on a particular platform.

- R. Niwa