Элемент "живой таймер"

У нас уже есть элемент <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. Все методы и свойства класса, естественно, являются методами и свойствами элемента.