<toggle-switch> Demo

<label for="default-switch">Default Switch</label>
<toggle-switch id="default-switch"></toggle-switch>

<label for="fancy-switch">Fancy Switch</label>
<toggle-switch id="fancy-switch" class="fancy"></toggle-switch>
<style>
    .fancy {
        height: 1.125em;
    }

    .fancy::part(track) {
        padding: 0.125em;
        border-radius: 1em;
        background-color: hsl(0, 0%, 67%);
    }

    .fancy::part(slider) {
        border-radius: 1em;
        background-color: hsl(0, 0%, 100%);
        box-shadow: 0.0625em 0.0625em 0.125em hsla(0, 0%, 0%, 0.25);
    }

    .fancy[checked]::part(track) {
        background-color: hsl(211, 69%, 57%);
    }
</style>