Custom Events

Jag har sjukt svårt att lära mig hur custom events fungerar i JavaScript. Jag har skapat ett applikation med en timer på 20 sek som jag vill ska göra något om timern är på 0. De jag har pratat med har rekommenderat mig att använda custom events men jag har inte aning om hur jag gör det i detta fall. Applikationen är uppbyggd av ett antal moduler. En av dessa är timern och en annan av dessa är min "spelmodul" där jag anropar timern. Hur kan jag skriva ett custom event som reagerar på att timern är på noll? och var ska jag sätta detta event? Ska jag sätta en eventListener på själva timern eller där jag vill att det ska hända något?

min timer-modul :
customElements.define('countdown-timer',
class extends HTMLElement {
constructor () {
super()
this.attachShadow({ mode: 'open' })
.appendChild(template.content.cloneNode(true))
this._div = this.shadowRoot.querySelector('div')
}

timer(limit = 20) {
let startingTime = limit
let timer = this.shadowRoot.querySelector('#timer')

setInterval(updateInterval, 1000)

function updateInterval() {
if(startingTime >= 0) {
let seconds = startingTime % 60
timer.textContent = `00:${seconds}`
startingTime--
} else { timer.textContent = '00:0' }
}
}

connectedCallback () {
this.timer()
}
})