dialog要素で遊んでみた

HTMLの新しめの要素について調べていたら、
HTML5.2から入ったdialog要素が出てきたので、遊んでみました！（2017年にW3C勧告された要素です）

対応ブラウザ確認

Can I use でdialogがどのブラウザに対応しているか見てみます。

https://caniuse.com/?search=dialog

IEはさておき、Firefox、Safariではまだ対応していないようで、Webサイトへの普及はこれからなのかなと思いました。どうりでお見かけしないわけだ！

ちなみに、VSコードでhtmlファイル作ってpとか打つと勝手に<p></p>と変換してくれるのですが、dialogと打っても変換されませんでした。これは自力で打っていくしかないですね。

::backdrop擬似要素が使える

全画面モードに配置される要素とdialog要素の両方に使えて、それらの直下に置かれる擬似要素です。
dialog要素だったら要素の下をぼかしたり隠したりするのに用います。
PCではSafari以外は使える擬似要素です。

実装

やってみました

<dialog>
  <p>あいうえお</p>
</dialog>

結果は

真っ白。
しかし、dialog要素にopen属性をつけると、

<dialog open>
  <p>あいうえお</p>
</dialog>

表示されます。open属性のつけ外しでダイアログの表示・非表示ができることがわかります。
HTMLDialogElementインターフェースのメソッドでdialog要素を操作できるので、JSでダイアログの開閉をしてみます。ちなみに、IEとSafariでは効かないインターフェースです。

JSでダイアログを開いてみる

新しく作成したOPEN Modalボタンを押すと、ダイアログが表示されるように実装しました。
HTML▼

<dialog id="dialog">
  <p>あいうえお</p>
</dialog>

<button id="openModal">OPEN Modal</button>

JS▼

<script>
(function() {
  var dialog = document.getElementById('dialog');
  var openModal = document.getElementById('openModal');
  openModal.addEventListener('click', function() {
    dialog.showModal();
  })
})();
</script>

実際の挙動はこちら

See the Pen dialog element by miika (@miika-codepen) on CodePen.

レイヤーとかどうなっているのかと思って、検証ツールで見てみると、ダイアログとレイヤーに値する部分が、それぞれ同じdialog#dialog要素と表示されましたが、それぞれ別のRoleでした（ACCESSIBILITYって書いてあるところ）。一つはdialog、もう一つはgenericです。レイヤーに値する要素（Roleがgeneric）の方は、::backdrop擬似要素に値しそうですが、::backdrop擬似要素はどの要素からも継承しないためか、検証ツールでdialog#dialog::backdropと表示されず、dialog#dialogと表示された模様です。

ダイアログに値する要素▼

レイヤーに値する要素▼

これらのRoleはrole属性でHTMLに設定したものではないので、JSで取得できず、よくある「ダイアログ以外をクリックしたらクローズ」の実装、つまり、「dialog#dialog要素以外を選択したらダイアログを閉じる」ができなかったです。
JSでの操作はできなかったですが、CSSでdialog#dialog::backdropのbackgroundを変えることは可能です。背景色とか変えられます。

jQueryの場合は、show()とhide()で実現できます。先述した、HTMLDialogElementインターフェースは、IEとSafariで効かないのを考えると、jQueryで実装するのも手ですね。

まとめ

dialog要素はopen属性の取り外しで見え隠れする簡易なもので、::backdrop擬似要素のおかげでレイヤーをこちらで考えてレイヤー用のDOMを作らなくていいことがよかったです。
実装自体はしやすいし、HTMLで構造文書を目指してコーディングしていく分にはぜひ使っていきたい気持ちの一方、ブラウザの対応がまちまちなのと、ダイアログ以外をクリック・タッチしたら消える実装に道が見えないことが難でした！今後ブラウザへの対応が進むのか、dialog要素・::backdrop擬似要素が進化するのか、どうなるのか想像を膨らませて、終わりとします！

参考

HTML 5.2 W3C Recommendation, 14 December 2017
https://www.w3.org/TR/html52/

MDN Web Docs <dialog>: ダイアログ要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

MDN Web Docs ::backdrop
https://developer.mozilla.org/ja/docs/Web/CSS/::backdrop

MDN Web Docs HTMLDialogElement
https://developer.mozilla.org/ja/docs/Web/API/HTMLDialogElement