Слушатель события щелчка элемента веб-компонента не работает

Question

Я создаю простую Рок, Бумагу, Ножницы .

Я решил не использовать никаких фреймворков, поэтому я делаю это полностью в чистом JavaScript, используя Веб-компоненты.

Мне удалось сделать почти все, что я хотел, но есть компонент ( ResultDisplay ), для которого по некоторым причинам события нажатия не работают на повтор и сброс кнопок .

Это очень странно, потому что у меня есть очень похожий компонент рядом с ним ( StartCounter ), у которого есть прослушиватель нажатия кнопки, и там он работает отлично!

Я не понимаю, чего мне не хватает ...

_initEventListeners() {
  // This is always called.
  this.replayButton.addEventListener('click', this._onReplayClick.bind(this));
  this.resetButton.addEventListener('click', this._onResetClick.bind(this));
}

_onReplayClick() {
  // This is never called when I'm clicking on the button.
  this.triggerEvent('replay');
}

Я не могу поместить здесь весь код, его будет слишком сложно читать.
Но вы можете найти все это здесь и даже протестировать его самостоятельно с npm run dev

Любая идея очень ценится.

Answer 1

В своем коде вы добавляете прослушиватели событий к кнопкам внутри исходного содержимого <result-display>.

Однако, когда вы хотите отобразить результат первой игры, вы снова вызываете createTemplate(), который воссоздает новый DOM в shadowRoot с новыми кнопками, к ним не подключены прослушиватели событий.

Затем вы должны снова вызвать _initEvenListeners().