Elemento reloj dinámico

Ya tenemos un elemento <time-formatted> para mostrar la hora agradablemente formateada.

Crea el elemento <live-timer> para mostrar la hora actual:

Internamente debe usar <time-formatted>, no duplicar su funcionalidad.
Aactualiza (¡tic!) cada segundo.
Por cada tic, se debe generar un evento personalizado llamado tick con la fecha actual en event.detail (ver artículo Envío de eventos personalizados).

Uso:

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

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

Demo:

Por favor ten en cuenta:

Borramos el temporizador setInterval cuando el elemento es quitado del documento. Esto es importante, de otro modo continuará ejecutando aunque no se lo necesite más, y el navegador no puede liberar la memoria asignada a este elemento.
Podemos acceder a la fecha actual con la propiedad elem.date. Todos los métodos y propiedades de clase son naturalmente métodos y propiedades del elemento.