ライブタイマーエレメント

<time-formatted>を使用して、きれいに書式設定された時間を表示します。

現在の時間を表示する<live-timer>を作成します。

機能を複製するのではなく、内部的には<time-formatted>を使用する必要があります。
毎秒（ティック）更新されます。
各ティックに対して、tickという名前のカスタムイベントが生成されます。event.detailには現在の日付が入ります（「カスタムイベントのディスパッチ」の章参照）。

使い方

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

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

デモ

注意

要素がドキュメントから削除されたときにsetIntervalタイマーを消去します。これは重要です。それ以外の場合は、不要になった場合でもティックが継続します。ブラウザはこの要素からメモリを消去できず、要素によって参照されます。
elem.dateプロパティとして現在の日付にアクセスできます。すべてのクラスのメソッドとプロパティが、当然のことながら要素のメソッドとプロパティです。