generic-switch stylability without parts and progressive enhancement

Styling

The generic-switch is somewhat of a headache. If a browser supports ::part, the component is fully stylable, if they dont however, it’ll just look like the default ‘ugly’ switch.

In other components this is less of a problem, because they depend on user provided lightdom, e.g. the listbox:

<generic-listbox>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</generic-listbox>

Progressive enhancement

Progressive enhancement is somewhat of another problem here. The only ‘sensible’ thing I can currently think of is having the user provide a native checkbox as lightdom. If theres a case where there is no JS available, it would just fallback to a checkbox. But this feels a bit weird/unnatural to do, because while somewhat similar, a checkbox is not a switch button, and the checkbox wouldnt be used by the generic-switch internally at all. It’d only be there for fallback reasons.

It takes away from the simplicity and ease of use of just using a <generic-switch> and dropping it in your page as well.

[jordanaustin]

As far as custom styling, what about just sprinkling in some css custom properties which has a little wider browser support to give the user the ability to style the switch at a basic level?

Definitely a little sad to lose the simplicity of just <generic-switch> but if you’re going for progressive enhancement it seems like the only real option is to force the user to add a checkbox input into the lifghtdom (still 😢).

[jordanaustin]

RE progressive enhancement, that seems pretty good. To me it would awesome to conditionally add the checkbox to lightdom if you wanted a fallback 🤷