x-switch.html

<x-toggle on=false>
  <x-toggle-label value="on">on</x-toggle-label>
  <x-toggle-knob>
  <x-toggle-label value="off">off</x-toggle-label>
</x-toggle>

<!--
  all behavior is inside those components, then you can also
  create a component that has *no behavior at all* but is
  simply a template composing those together for your application
  like an x-switch whose template is the above html.
-->

<x-switch on=false>

<!--
  This way, you allow people to create their own "convenience
  components" (as I call them), allowing i18n and other
  customizations
-->