A custom element that implements the EyeDropper API that allows the user to select colors from the screen.
<eye-dropper>
<span slot="button-label">Pick a color</span>
</eye-dropper>const eyeDropper = document.querySelector('eye-dropper');
eyeDropper.addEventListener('eye-dropper:success', evt => {
console.log('eye-dropper:success -> ', evt.detail);
});
eyeDropper.addEventListener('eye-dropper:error', evt => {
console.log('eye-dropper:error -> ', evt.detail);
});
eyeDropper.addEventListener('eye-dropper:abort', () => {
console.log('eye-dropper:abort');
});
eyeDropper.addEventListener('eye-dropper:copy', evt => {
console.log('eye-dropper:copy ->', evt.detail.value);
});