web.devの「ダイアログ コンポーネントを作成する」を読んでみた

1. 背景

web.devの「ダイアログ コンポーネントを作成する」を偶然見つけたのでそこから勉強になったことをまとめようと思った為です。

2. web.devとは

@kinshotomoya さんの
以下の記事で分かりやすくまとめられていましたのでご覧ください！

3. 勉強になったこと

3.1. カスタム属性

記事ではmodal-modeというカスタム属性を作っていました。
複数モーダルの区別を付ける為に使用されています。

3.2. cssのみでdialogの背景をoverflow:hiddenにする方法

html:has(dialog[open][modal-mode="mega"]) {
  overflow: hidden;
}

• IEでは未対応です。
• Firefoxは2022年7月までのバージョンのものだと未対応です。
  https://caniuse.com/?search=%3Ahas()

3.3. menu要素

web.devの記事では以下の記述がされていました。

<menu>
    <button autofocus type="reset" onclick="this.closest('dialog').close('cancel')">Cancel</button>
    <button type="submit" value="confirm">Confirm</button>
</menu>

ダイアログのアクションボタンを格納するために使用されています。
MDNでは例としてツールバーに使われていました。
機能的には<ul>と相違無いそうです。

WHATWGに以下の記述がありました。

The menu element is simply a semantic alternative to ul to express an unordered list of commands (a "toolbar").
menu要素は、単にコマンドの順序付けされていないリスト（"ツールバー"）を表現するためのulに代わるセマンティックなものです

3.4. autofocus属性

ページ読み込み時、またはその要素が属する<dialog>が表示されたときに、その要素にフォーカスを当てるべきことを示す属性です
MDN

3.5. backdrop-filter

backdrop-filterで背景をぼかすことができます。
背景をグレーアウトさせるよりは視認性が低下するのでモーダルに集中できます。

dialog[modal-mode="mega"]::backdrop {
  backdrop-filter: blur(25px);
}

4. 今後勉強したいこと

4.1. ダイアログが非表示の時に操作できないようにする必要性

これを記述する必要性がよくわからなかったです。

dialog:not([open]) {
  pointer-events: none;
  opacity: 0;
}

4.2. onclickとaddEventListenerのユースケース

4.3 カスタム属性は使わずにカスタムデータ属性を使うべきなのか

以下の記事を読んでいるのですがまだ理解できていないので勉強します。

You can add custom attributes to your elements at will. But that will make your document invalid.
In HTML 5 you will have the opportunity to use custom data attributes prefixed with data-
要素にカスタム属性を自由に追加することができます。しかし、それでは文書が無効になってしまいます。
HTML 5では、data-で始まるカスタム・データ属性を使う機会があります。

最後に

web.devのドキュメントから色々吸収して業務に落とし込み、ユーザに優しいものを作りたいと思いました。

参考

• https://web.dev/learn/html/dialog?hl=ja
• https://web.dev/articles/building/a-dialog-component?hl=ja
• https://qiita.com/kinshotomoya/items/c7e127c83b89fab721a7
• What are custom attributes in HTML5 ?
• Can I add a custom attribute to an HTML tag?
• MDN メニュー要素
• WHATWGとは - 意味をわかりやすく - IT用語辞典 e-Words
• WHATWG the-menu-element
• MDN autofocus
• MDN backdrop-filter
• 【js】onclickとaddEventListenerの違い