Elemento live timer

Abbiamo giÃ un elemento <time-formatted> per mostrare un orario formattato.

Create un elemento <live-timer> per mostrare lâ€™orario corrente con queste specifiche:

Internamente dovrebbe usare <time-formatted>, senza duplicarne la funzionalitÃ .
Un tick (aggiornamento) ogni secondo.
Per ogni tick, deve essere generato un evento personalizzato chiamato tick, con la data corrente dentro event.detail (guardare il capitolo Dispatching di eventi personalizzati).

Uso:

          <live-timer id="elem"></live-timer>

<script>
  elem.addEventListener('tick', event => console.log(event.detail));
</script>
        

Demo:

Nota bene:

Quando rimuoviamo lâ€™elemento dal documento, eseguiamo il clear di setInterval per il timer. Ãˆ importante, altrimenti continuerÃ a ticchettare anche se non piÃ¹ necessario. Inoltre il browser avendo ancora un riferimento ad esso, non sarÃ in grado di pulire la sua memoria.
Deve essere possibile accedere alla data corrente tramite la proprietÃ elem.date. Tutti i metodi della classe e le relative proprietÃ devono anche essere metodi e proprietÃ dellâ€™elemento.