A Web Component for showing a random selection from a group of options (and allowing you to shake it up).
Provide a list of elements to choose from:
Optionally provide a button label
using the (string) data-action attribute.
Or trigger a view transition in supporting browsers,
with the (boolean) view-transition attribute.
Or provide a button
in the named action slot.
The button can be slotted directly,
or a descendent of the slotted element.
Optionally force
the initial selection
by applying the data-current
attribute to one of the options.
The first option marked as current
will be selected initially.
To get a single option fallback,
apply a hidden attribute
to all but one option in the list.
It's also best to hide anything
in the action slot,
since the it will have no effect.
The action will be unhidden when the element is defined.
To see a list of all the options
as a fallback,
leave the hidden attribute off.
A list can also be provided
in the named options slot,
rather than putting individual options
in the default slot.
We can use CSS to remove the list styles once the element is defined: