[更新あり] Chrome 120以降、dialog要素の onCancel イベントがトリガーしない

// Chrome 120 以降では動作しない
dialog.addEventListener('cancel', (e) => {
  e.preventDefault();
})

<button type="button" id="open">
  Open modal
</button>

<dialog id="modal">
  <p>
    Esc key is disabled!
  </p>
  <button type="button" id="close">
    Close modal
  </button>
</dialog>

const open = document.querySelector('#open');
const close = document.querySelector('#close');
const dialog = document.querySelector('#modal');

open.addEventListener('click', () => {
  dialog.showModal();
  
  // Esc キーを抑制 (Chrome 120 以降)
  if ('CloseWatcher' in window) {
    let closeWatcher;

    const initCloseWatcher = () => {
      closeWatcher = new CloseWatcher();

      // CloseWatcher は消費すると2回目はトリガーしないので、消費の度に新しい CloseWatcher を作る
      closeWatcher.addEventListener('close', initCloseWatcher);
    }
    initCloseWatcher();

    // ダイアログが実際に閉じる際に既存の CloseWatcher を破棄
    dialog.addEventListener('close', () => closeWatcher?.destroy(), { once: true });
  }
});

close.addEventListener('click', () => dialog.close());