この記事で分かること

dialog要素でEscキーでcloseした際にoverflow:hiddenを解除する方法
dialog要素を使う利点、懸念点

背景

ダイアログをdialogタグで記述した際にescキーで閉じることができます(ブラウザーによって提供)。
しかし、overflow:hiddenを解除できなかったのでモーダルが消えてもスクロールができません。
そこでどうしたら良いか考えてみました。

補足）showModal() メソッドによって呼び出された<dialog>は、Escキーによって閉じることができます。

実装

モーダルを開く関数

openModal(){
    document.body.style.overflow = 'hidden';
    const modalElm = this.getModalElm();
    if (!(modalElm instanceof HTMLDialogElement)) return;
    modalElm.showModal();
}

以下の実装を当初は考えてました。
しかし、これだとキーを打つたびに毎回この処理が走るので良くないですね。

Escキーを押した際にバックドロップの固定を解除する関数

registerCanselModalEvent() {
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                document.body.toggleAttribute('style');
            }
        });
};

このブログでcancelイベントというのを知りました。
dialog要素を使う今後のモーダル実装

HTMLElement: cancel event

The cancel event is fired by and elements. The event is fired when the user cancels the currently open dialog by closing it with the Esc key

mdnによると
dialogを開いている際にEscキーを押したらcancelイベントが発生すると記載があります。

こちらを採用したいと思います！

cancelイベントが起きた際にバックドロップの固定を解除する関数

registerCanselModalEvent() {
        document
            .querySelector('dialog')!
            .addEventListener("cancel", () => {
                document.body.toggleAttribute('style');
            }
};

注意点としてはinputタグをEscで閉じた際もcanselイベントが発生することです。
例）ファイルピッカーダイアログ

補足

紹介した方もブログで書かれてましたが、以下の点でdialogタグは利点があります。

直感的な記述かつ実装が簡潔

今まで<div role="dialog">で記述して実装していましたがコード量が減ります。

modal.showModal();

モーダルを表示します。
CSS の ::backdrop 擬似要素を使用して、要素が HTMLDialogElement.showModal() で表示されたときの背後のスタイルを設定することができます
例）ダイアログの背後にある操作できないコンテンツを暗くする

modal.close();

モーダルを閉じます。
backdropが消えます。

デフォルトでEscキーで閉じることができる

cancelイベントを扱って実装ができる

懸念点

IEでは使えないです。

デフォルトだとモーダルより下はスクロールしてしまいます。

今回のような実装はしないといけないですね。

modal.close()
Escキー押下時

dialog要素をEscキーでcloseした際にoverflow:hiddenを解除したい