Elemen live timer

Kita sudah memiliki elemen <time-formatted> untuk menunjukkan waktu yang diformat dengan baik.

Buat elemen <live-timer> untuk menunjukkan waktu saat ini:

<live-timer> harus menggunakan <time-formatted> secara internal, bukan menduplikasi fungsinya.
Berdetak (update) setiap detik.
Untuk setiap detik, sebuah events kustom bernama tick harus dibuat, dengan tanggal saat ini di event.detail (lihat bab <info: dispatch-events>).

Penggunaan:

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

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

Demo:

Tolong dicatat:

Kita menghapus timer setInterval ketika elemen dihapus dari dokumen. Ini penting, jika tidak, timer terus berdetak bahkan jika tidak diperlukan lagi. Dan browser tidak dapat menghapus memori dari elemen ini dan yang direferensikan olehnya.
Kita dapat mengakses tanggal sekarang sebagai properti elem.date. Semua methods dan properti kelas secara alami adalah methods dan properti elemen.