三種の神器Dialog APIで異次元の門、召喚。

Top›labo›

Tri Relic Summon Dialog API

超古代より存在のみが語り継がれていた召喚魔法 Dialog API

| 2026/09/25

今回の
聖櫃

今回ご紹介する古代WEB魔法は、三種の神器『 Dialog API 』。

三つの魔道体系が互いに作用することで顕現するモーダルUI
やあ、古代WEB魔法の紹介も今回で4回目だ。
もううんざりかもしれないけど、今回もまた、私ジェミパラ・トラッセンダーが解説＆講義を続ける。
え？次の講義が楽しみで待ち遠しかったって？な、なんだい、ずいぶん嬉しいこと言ってくれるじゃないかえ、ホントに最近の子はほんと、もう調子が狂っちゃうよ、はは。

ていうか、こ、講義を続けるよ！おほん！
さて、古代WEB魔法Dialog APIだが、APIと呼ばれるだけあって、これは単体ではなく、複合的に作用しあう術式なんだ。
概要
通常、WEB魔法でモーダルウィンドウ魔法陣を作ろうとすれば、門を召喚、背景をカバー、外側クリック禁止、センター配置、閉じるボタン、その他アクセシビリティの管理……などの術式を自前で錬成し、なかなか大がかりな作業が必要になる。

ところがすでに古代魔法に、この複雑な処理を実行する術式API【API】
ブラウザにあらかじめ実装する、プログラムを動かすための関数や決まりごと。が存在していた事が分かったんだ。
そしてこの古代魔法の解析を進めると、三つの言語・術式の高次元錬成で異次元の門を召喚するという、まったく革新的な術式が見えてきたんだ。
古代魔法に存在したWEB API
このDialog API WEB魔法は、術式単体で処理するわけじゃないんだ。
三つの術式---

1.HTMLエレメンツで構造を定義し、
2.CSS神聖魔法で幻影と障壁を操り、
3.珈琲魔道術式【珈琲魔道術式】
こちらの世界のJavaScript
以後JS,JavaScriptと省略で召喚の儀式を行う。

このように三つの魔道体系を高次元で錬成させることで、単なる「表示・非表示」を超えた、アクセシブルなモーダルUI（異界への門）を召喚できるんだ。
単純な異界の門を召喚するだけじゃない
しかも面白い点は、単に「アクセシブルなモーダルUIを表示できるようになった」だけじゃないんだ。
ちょっと見てごらん。これがdialog要素のコード
```
<dialog>
    <h2>古代WEB魔法</h2>
    <p>dialog APIが召喚されました。</p>
</dialog>
```
一見するとただのHTMLだよね。だけど
dialog要素をdialog.showModal();とJSで召喚すると、ただ表示されるだけじゃなくて。
dialog要素は最上位レイヤー（top layer）へ移動し、背後の文書は自動的に操作不能になってしまう。
さらに、その背後にはCSSの:: backdrop という特殊な領域まで出現する。スクリーンで覆い隠すわけだ。

つまりDialog APIは3っつの魔法言語体系を高次元で錬成することで、

1. モーダル化
2. フォーカス管理
3. 背景コンテンツの操作制限
4. 最上位レイヤーへの配置
5. ::backdrop
6. Escによる終了
7. フォームとの連携
8. スクリーンリーダーなどのアクセシビリティ

など、従来JavaScriptライブラリなどで多層的に個々で実現していた機能をたったひとつの術式で実現可能にしてしまうんだ。
Dialog API策定の歴史
Dialog API、三つの術式を練り合わせるって考え方が非常に新しく感じるね。
だけど仕様そのものは非常に古いんだ、古代WEB魔法といわれる所以だな。

W3CのHTML 5.2では、すでにdialog要素とHTMLDialogElementが仕様として定義されていた。
時期は2017年12月14日。この時すでにW3C Recommendationとなっている。
つまり、10年近く前に定義されていたわけだ。
それどころか、
dialog.show();
dialog.showModal();
dialog.close();
というjavascriptによる基本的なAPIまで定義されていた。

しかし、考え方が先進すぎたためか主要ブラウザ魔法具での対応が揃うまでには時間がかかった。

特に最後まで対応しなかったのが林檎魔導院のSafarium【林檎魔導院のSafarium】
こちらの世界のAppleが開発するブラウザ:
Safariのこと。以後、safariと省略。。
2022年3月のSafari 15.4でdialog apiをようやく実装した。
これでWeb制作の現場で広く普及するようになった。
超古代より存在のみが語り継がれていた召喚魔法がようやく形になったんだ。

モーダルで異次元の門を召喚するシンプルなデモ：https://labo.studio-happyvalley.com/backdrop-dialog-popover/dialog/

解析の
進め方

Dialog API 調査と解析の進め方

三つの視点から解析する
dialog APIという、実装されてまだ4年目のフロントエンドの強力な術式。
このAPIは、HTMLエレメンツ、CSS神聖魔法、そして珈琲魔道術式という三つの異なる魔導体系から錬成される。
だから解説もそれぞれの魔術体型からの視点で進めたほうが理解しやすいと思う。私も解説しやすいしね。

そこで、ちょっと解説しやすくタイトルと副題を付けて分けてみた。

1. HTMLエレメントの視点：原初の封印と解除――構造と属性
2. CSSの視点：神聖魔法――幻影と障壁の支配
3. JavaScriptの視点：珈琲魔道術式――召喚と抽出の儀式

と、こんな感じで進めていこうと思う。
最後のJavaScriptだけ妙に珈琲だって？まあ、WEB制作におけるJavaScriptは、だいたい珈琲が必須だからね。
といっても私ならDarjeelingScript【DarjeelingScript】
ジェミパラさん、こんなこと言ってるけど、実際にオリジナル術式言語を開発してるんだ。
その名も『Dorje Ling Script（ドルジェ・リン・スクリプト）』そのまんまだね。
拡張子は『.tea』(笑)。
変数宣言は『leaf』。
メソッドには firstFlash、secondFlash なんて命名されてるらしい。(;^_^A（ダージリン・スクリプト）とでも命名したかもしれないな。紅茶党だからね！

1. HTMLエレメントの視点：原初の封印解除（構造と属性）

まずはHTMLから。
dialog要素は HTML の要素で、定義としては、モーダルまたは非モーダルダイアログボックスや、それ以外の消すことができるアラート、インスペクター、サブウィンドウなどのような対話的コンポーネントを表すとなっている。

前の概要でも話したが、ここで重要なのが、dialogは単なるブロック要素ではなくJavaScriptの、show()あるいは showModal()という二つの異なる術式によって、非モーダル、モーダルという二つの異界の門として召喚されるってことなんだ。
そこで、非モーダルとモーダルを次に解説する。
すでにそんなことは知ってると憤慨の子たちもいるかもしれないが、ここでもう一度モーダルという観念についておさらいだ。とても大事だよ。
非モーダル
javascriptのshow()で召喚したdialog要素は、非モーダル。ページ上に存在する通常のダイアログになる。

dialogが表示されていても、その外側にあるページを操作できる。脚注やツールヒントみたいな感じ。
ブラウジングで無視されるのを前提としている機能だね。
非モーダルなので、backdropも機能しない。背景が隠されてちゃあ操作できないからね。

dialog要素は表示状態の時にはopen属性が付与される。開発ツールで見れば、確認できるはずだ。

非モーダルなDialog APIのデモ：https://labo.studio-happyvalley.com/backdrop-dialog-popover/dialog_non-modal/
open属性を記述しても非モーダルで召喚可能
HTMLでdialog要素内にopen属性を記述すると、最初から門を召喚状態で表示するが、非モーダルとなる。
しかも::backdrop疑似要素が機能しない。
そもそもdialog要素はAPIとしての利用を想定しているため、open属性単体の使用は推奨されてないし、使う意味もない。
せっかくAPIが用意されている。
召喚術式で使う場合は、もったいないのでHTMLでopen属性を記入したりしないようにね。

非モーダルなDialog APIのデモ：https://labo.studio-happyvalley.com/backdrop-dialog-popover/dialog_open/
モーダル召喚時INERT状態が発現する
非モーダルはJSでshow()と召喚したけど、showModal()を使うといよいよモーダルによる異次元召喚モードだ。
dialog要素は最上位レイヤーへ入り、dialog要素以外の文書はスクロール以外操作できなくなる。
この状態をInert(不活性）な状態という。
このInertという概念と最上位レイヤーについては次の章で解説する。
比較のため、前の章で掲載したデモを再掲載。
モーダルで異次元の門を召喚するデモ：https://labo.studio-happyvalley.com/backdrop-dialog-popover/dialog/
モーダル召喚に必須の閉じる処理もJS不要
これまで見てきたようにDialog関連の処理には閉じる機能が必須となる。
そのため、Dialog APIには閉じる機能も準備されている。
本来、こういったダイアログを閉じるには珈琲魔道術式（JS）で
```
const closeDialogBtn = document.getElementById('closeDialogBtn');
const dialog = document.querySelector('dialog');
closeDialogBtn.addEventListener('click', () => dialog.close());
```
といった記述が必要になるが、dialog要素内部に method="dialog" のフォーム属性を仕込んでおけば、珈琲魔道術式（JS）を使わずともボタン一発で閉じる動作が完結する古代の自動解呪メカニズムが存在する。
```
<form method="dialog">
  <p>下記ボタンをクリックするとダイアログが閉じます。</p>
  <button>閉じる</button>
</form>
```
これまで紹介してきたデモにも、すべてこの方法で閉じるボタンを設置している。
非常に簡単なのでぜひお薦めする。

余談だが、最近では、モーダルの外つまり::backdropをクリックした際に自動で閉じる挙動や、closedby 属性などの新しい仕様提案・実装も進んでるようだ。
Escキーで閉じるのはモーダル召喚時の標準仕様
モーダル表示中、ブラウザ標準でEscキーを押すと閉じる。
このとき発火するのは close イベントではなく cancel イベント。（その後に close イベントも発火。）
なのでJSでダイアログの閉じるイベントを取得する際は下記のようにするよ。
```
addEventListener("cancel", (event) => { })
```

2. CSS神聖魔法の視点：幻影と障壁の支配

CSSからの視点。
モーダルダイアログを召喚すると、背後を暗い半透明なシートで被うことがある。
従来なら、<div class="overlay"></div>のような専用要素を自分で用意していたところだ。
しかしDialog APIでは、その必要がない。
これまた専用のCSS、backdrop擬似要素があるからね。
例えば、
```
dialog::backdrop {
  background: rgb(255 0 0 / 25%);
}
```
これだけで、dialogの背後を薄いピンクで覆い隠すことができる。
このbackdrop疑似要素は通常の疑似要素ではない。
Inert状態の時のみ最上位レイヤーに表示された要素の直下に、ビューポート全体を覆う形で生成される特殊な擬似要素だ。
つまり、背景用のHTML要素をわざわざ召喚する必要がない。これもdialog APIの機能だ。
もちろんCSSなので自在にスタイルを設定できる

カスタマイズしたbackdropのデモ：https://labo.studio-happyvalley.com/backdrop-dialog-popover/dialog_backdrop/

3. 珈琲魔道術式（JS）の視点：召喚と抽出の儀式

いよいよJavaScriptで召喚だ

そして、いよいよJavaScriptだ。
もっとも基本的な術式はこれ。

//異次元の門、召喚
open_button.addEventListener("click", () => {
    dialog.showModal();
});

//異次元の門閉じる
close_button.addEventListener("click", () => {
    dialog.close();
});

JSでshowModal()と召喚する。これでモーダルダイアログとして機能する。
これまでのHTML、CSS、JSと一連の処理でJavaScriptがやっているのは、「表示する」という命令だけなんだ。
それ以外の処理…

1.背景を覆う。
2.最上位レイヤーへ移動する。
3.背景を操作不能にする。
4.フォーカスを扱う。

そういった処理は全てブラウザ魔法具が引き受ける。
面倒な処理は全て3つの術式体系が連携してブラウザに任せてくれるわけだ。
そんなにJSに慣れてなくても実装できそうだろ？

モーダル
の特殊な
状態

モーダル召喚だけの特殊な二つの状態。Inertと最上位レイヤー

モーダル召喚の一つ目の特殊な状態：inert
さて、モーダルウインドウを召喚した際、ユーザーはそれ以外の要素が（サイトのメニュー画面なども含めて）全てスクロール以外コントロールできなくなる。この状態のことを『inert』というのはモーダルの段落でも話したね。

ところが、この不活性状態（結界といったほうが分かりやすいかな）は Dialog API 以外でも使うことができる。
これがびっくりだね。
interactivityプロパティの登場
interactivityという新しいCSSプロパティが登場し、その値をinteractivity: inert;とすることでinertつまり結界を貼ることができる。
このプロパティは、ユーザーの使い勝手が悪くならないようにするためにある。

MDNでも、このプロパティを使う方法でカルーセルなどの非表示要素をinert状態にする例を挙げている。
MDN CSS interactivity プロパティ解説：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/interactivity

なぜこれが必要かというと、例えばカルーセルの内容をタブキーで順番に選択していくとする、すると現在見えていないスライダーまでタブキーが選択してしまう。
これはスクリーンリーダーでも同じ。制作者が意図していない動作をしてしまい、ユーザーは混乱する。
inertはこの予防に使うわけだ。
ユーザーに触ってほしくない要素に結界を貼るってことだね。

このような用途として

1. 非表示状態のUI
2. カルーセル
3. ページ切り替え
4. 一時的に操作させたくない領域

などに利用できる。

ただし、注意が必要。
Firefoxはまだ未対応なんだ。
だから、モーダル以外で使用する場合は、inert属性を使い、面倒だけどJSが必須となる。
inert属性
たとえば、HTML要素にinert属性を直接記述することでも簡単にinert状態にできる。daialogなどを使わず単独でも使用できるってわけだ。
ただし、backdropは機能しない。また、Escキーも機能しない。
APIでは用意されていた閉じる術式がどれも使えないってわけだ。

解除装置を怠るとジェラシックパークの琥珀状態【ジェラシックパークの琥珀状態】
これは、映画『ジェラシック・パーク』の第一作目を指していると思われる。
太古の時代に琥珀に閉じ込められた蚊から恐竜のDNAを抽出していたよね？
というかなぜ、魔法世界ハピバリアンの住人、ジェミパラさんがこの映画を知ってるかが不思議だ爆！になってしまうから気を付けよう。

inert属性の制御方法

琥珀状態にならないため、閉じる・解除する方法をJSなどで必ず設置する必要がある。

//inert状態にしたい要素：仮にdiv#element
const element= document.getElementById('element');

element.inert= false //解除
element.inert = true; //inert化

これはinert属性だけでなく、interactivityプロパティでも同じだ。
interactivityプロパティに対応しているブラウザ魔法具では

.slider:not(.active) {
    interactivity: inert;
}

//上はIF文みたいなものなのでJSでactiveクラスの付与をコントロールすれば自動で切り替えが行われる
//単純にinert状態を元に戻す場合はautoにする。

.objects{
    interactivity: auto;
}

とCSSだけで処理できるけど非対応のfirefoxでは、
不活性にする：element.inert= true、
元に戻す：element.inert= false
とする必要がある。

このようにUIの一連の流れとアクセシビリティをJSと連携させてきっちり作りこむ必要があるので、非常に大変だ。
モーダル目的だけであればInert属性の単独使用ではなく、Dialog APIを使うのが賢いということだね。

また、デザイン上、UI上の注意点がある。
『inert』には表示・非表示の概念はない。
inertを適用した要素が見えてようが、隠れてようが、触れない状態にする。
したがって、『inert』を単独で使用する場合には、なぜ操作できないのかが視覚的にも分かるUIにし、ユーザーが混乱しないような配慮が必要になる。そういうわけで非表示要素に使うのは非常に自然な使い方だね。
簡単にまとめてみた。

方法inertにするinertを解除
JSelement.inert = trueelement.inert = false
CSS interactivityinteractivity: inertinteractivity: auto
INERT状態でもスクロールは可能
実はInert状態でもスクロールは可能。仕様を決めている魔道協会【魔道協会】
こちらの世界のW3C/WHATWGのこと。の観点だと、スクロールは「コンテンツへの操作」ではなく「ビューポート（表示領域）の閲覧位置変更」という扱いになるため、影響範囲から外れるからだそうだ。

実はこのサイトの過去の記事『ダメ。ゼッタイ。 ] スクロールのスピード違反』に、スクロールを含めすべてを不活性にするデモがある。
ここに掲載するよ。
スクロールをすごく早くするとすべてを不活性にするウインドウが召喚される。試してみると面白いよ、クイズもあるからね。

スクロールのスピード違反を取り締まる、スクロール取締官：https://labo.studio-happyvalley.com/speedWarning/
最上位レイヤー概要

モーダルで召喚された門はダイアログ以外の要素を全てImert状態にした後、ダイアログをTop Layer――最上位レイヤーへ配置する。
通常のHTMLでは、いくら『z-index』を高くしても、親要素のスタッキングコンテキストや『overflow』などに阻まれた越えられない壁が存在する。
ところがdialogのモーダル表示では、通常のDOMの積み重なりとは別の世界、最上位レイヤーへ入る。
z-index: 99999;なんてしなくてもいいんだよ

おや？そこで苦笑いしてる君。まだ若そうなのに身に覚えがあると見たよ
どっちが数字が大きいか仲間で競い合ったくちかな
でも、いくら便利だからって、なんでもかんでもdialog要素にして、showModalを詠唱しちゃだめだよ。

ま、そんなわけで、dialog要素による召喚は通常の『z-index』階層から解放された最上層の異次元の門となる。
この「通常のCSSの世界から一段外へ出る」という感覚は、次の章で紹介するPopover APIを理解するうえでも非常に重要になる。
というわけで次の章から別のAPIの紹介だよ。けっこう長くなったのでいったん休憩しようかな。
君たちもコーヒーでも飲みながら休憩してくれ。
私は紅茶を、ダージリンを淹れてくるよ。

進化した
Popover

さらに進化したCSS神聖魔法術式　Popover API

Popover API 概要
コーヒーは美味しかったかい？
さて、今回ご紹介しているDialog API。もう十分新しい召喚WEB魔法だと理解できたよね。
ところが、これよりもっと新しい召喚WEB魔法があるんだ。
Popover APIと呼ばれる。

Popover APIはまだ新しいWEB APIだ。
そしてPopover APIもDialog APIと同じく異次元の門を召喚するWEB魔法だ。
しかし、進化している。
これまでDialog api ではJSが必須だったが、Popoverでは不要になった。
ただ、『popovertarget』属性に召喚したい要素のIDを入れるだけだ。
恐ろしいね。
こんなに異次元の門をポンポン召喚しちゃって大丈夫なのって心配しちゃうよ、そのくらい簡単になっちゃったね。
JavaScriptがいらないDialogみたいなもん【Dialogみたいなもん】
実はDialogとは明確な違いがある。それについては後の章でジェミパラ女史の解説が入る。だからね。
歴史：初期の提案と『 Popover API 』構想
2020年〜2021年頃から、OpenUIコミュニティグループによって、ポップアップ表示を標準化する議論が始まったみたいだ。
当初は popup 属性（Popup API）という名前だったみたいだね。そのまんまだね。

その後、いろいろなフィードバックを経て、よりUI要素として明確な popover 属性（Popover API）へとリネームされ、HTMLの正式な仕様（WHATWG HTML Standard）へと組み込まれたようだ。
ネーミングもちょっと洗練されたね。
歴史：実装
ブラウザ魔法具の対応は、2023年5月にGoogleギルドのクロミウム114【クロミウム114】
こちらの世界のブラウザ、グーグルクロム114のことで最初に実装されはじめ…。
その後safariと続き2024年4月にfirefoxが対応を完了し、Webプラットフォームの標準機能となったようだ。
安心して使えるようになってもう二年も経つんだね。
解説：JSを使わずに異次元の門、召喚！
最初にも触れたけど、Popover APIではJavaScriptを使わずにHTMLだけで異次元の門を召喚できるんだ。
```
<button popovertarget="my_popover">
    詳細を見る
</button>
<div id="my_popover" popover>
    ここに補足情報がある。
</div>
```
これだけ。
絆を作る方法
肝心の絆は召喚される門要素にID名（例えばmy_popover）を付与し、召喚するボタン要素【ボタン要素】
実際はボタン要素でなくても、aリンク要素でも、divでもpopovertargetを記述すれば可能。
ただし、基本的にはアクセシビリティやキーボード操作の観点からボタン要素が強く推奨されているにpopovertarget="my_popover"と記述する。
これだけで絆が生成される。簡単だね。

しかもブラウザがこの関係を認識することで、キーボード操作やアクセシビリティのための処理も支援される。
普段アクセシビリティまで手が回らない開発者にとっては、凄くありがたい仕様だね。
召喚されるのは非モーダルな門
ただし、古代WEB魔法のDialog と違って、こちらのPopover APIは非モーダルで門が召喚されるんだ。
非モーダルなので、召喚門が表示されてても関係なく下層の要素を触れる。不活性化はされないんだ。
しかし、そのほかの仕様はDialogと同じ。backdrop疑似要素を使って背景を覆い隠すこともできるし、召喚門は最上位レイヤーへ移動するんだ。非モーダルなのに背景を覆い隠すのはちょっと変だと思うけどね。
背景クリックで閉じる
非モーダルなのに背景を覆い隠すのは、実は意味があるんだ。背景ならどこをクリックしても閉じるんだけど、これはようするに背景全部が閉じるボタンと考えるといいね、つまり仕様上必要なんだね。

このPopoverの、外側をクリックすると閉じる仕様をLight Dismiss（ライトディスミス）と呼ぶ。
同時にEscapeキーで閉じる処理も実装される。
これはブラウザが実行する。JavaScriptで、閉じる関数を書く必要がないんだ。
ほんとにDialogの進化版だよね。

デモ：もっともシンプルなPopover、閉じるボタン不要：https://labo.studio-happyvalley.com/backdrop-dialog-popover/popover_base/
背景クリックで閉じさせない
非モーダルだと背景を触れるといったよね。それで前のデモ『もっともシンプルなPopover』を触ってみてどう思った？
背景の要素を触ろうとすると閉じちゃうよね。

これはライトディスミスと非モーダルの仕様がぶつかってると感じるね。
そこで、背景クリックでも閉じさせないというモードが作られた。

Popover API の三つの状態: 1. Auto, 2. Manual, 3. Hint。

Popoverには三つの状態がある。
最初に紹介したのがpopover="auto"。
自動的に非モーダルウインドウが閉じるやつね。

二つ目、popover="manual"というモードがある。
これは、自動的に閉じず、自由に開閉を制御できる。
外側をクリックしても閉じないってわけだね。
ようやく背景の要素を触れるようになったね。

そしてこのおかげで、複数のmanual popoverを同時に表示できるようになる。
Dialog要素はモーダルだから常に一個だったけどね。

さらに三つ目、popover="hint"というモード。これは二番目の逆。
popover="hint"を設定された門は常に一個だけが表示される。常に入れ替わるわけだね。

次はマニュアルモードのPopoverのデモ
マニュアルモードでは非モーダルとなるため、背景が操作対象として残る。デモではbackdropに色を設定しているが、実用上は色は設定しないほうが自然だ。
マニュアルモードのPopoverのデモ：https://labo.studio-happyvalley.com/backdrop-dialog-popover/popover_manual/
マニュアルモードのPopoverの可能性、たとえばチャットボックス
マニュアルモードだと、非モーダルウインドウの外側をクリックしても閉じないのでいろいろな使い方ができる。
チャットボックスなんかそのよい例だ。

チャットボックス風デザインのデモ：https://labo.studio-happyvalley.com/backdrop-dialog-popover/popover_panel/
button要素がデザイン的に嫌だという場合
最初にもちょっと触れたけど、ボタン要素以外のHTMLエレメンツにもpopovertargetを記述すれば門を召喚できる。
だけど、アクセシビチティの観点から推奨されてない。
そのため、脚注みたいな軽い召喚門を作りたい場合は、ボタン要素の見かけが重く感じるかもしれない。
つまり、リンクのa要素みたいな見かけにしたい場合だね。
そういう場合、アクセシビリティを保ったまま、見かけをbutton 以外のように見せることもできる。もちろんJSなしでね。
たとえば下記のようにCSS でスタイルを設定する。
```
/* ボタンのデフォルト見た目を打ち消して普通のテキスト風にする */

.text-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
```
```


<button class="text-button" popovertarget="my-popover">
  見た目はリンク風のボタン
</button>
```
Popover APIでの「閉じるボタン」
Dialog API のように method="dialog" という専用フォームを使う形式ではありませんが、Popover APIでは popovertargetaction="hide" という属性を使うことで、ボタン一発で閉じる動作が完結します。

実装コードの例

Popover APIは、Dialog API よりもさらに強力にHTMLだけで完結するように設計されています。

<!-- ポップオーバー本体 -->
<div id="myPopover" popover>
  <p>ポップオーバー魔導書です。</p>
  
  <!-- ❌ JavaScript不要で閉じるボタン -->
  <button popovertarget="myPopover" popovertargetaction="hide">閉じる</button>
</div>
<!-- ⭕ JavaScript不要で開くボタン -->
<button popovertarget="myPopover">ポップオーバーを開く</button>

トグル動作がデフォルト
popovertarget だけを指定したボタンは、押すたびに「開く」「閉じる」が自動で切り替わります（トグル）。

明示的に閉じる: 上記の例のように popovertargetaction="hide" を指定すると、そのボタンは「閉じる専用」になります（逆に show を指定すれば開く専用になります）。

ライトディスミス（自動閉じる）: ポップオーバーの外側（背景）をクリックしたり、Esc キーを押したりするだけで自動的に閉じる挙動が、標準で組み込まれています。

Popover
の布陣

Popover APIの布陣はどうする

Popoverには布陣【布陣】
召喚した要素を配置する方法。
ブラウザ基点ではなく召喚した要素を起点に配置するため便宜上、布陣と呼ぶが必須
ここまでDialog APIとPopover APIを見てきた。
Dialogはモーダルなので召喚門はセンターに固定。
だけどPopoverは設定により複数召喚も可能。
そのため、個別に布陣を設定しないとみ～んなセンターに召喚されてしまう。
これはちょっとまずいよね。
そこで布陣の方法をしらべてみた。
第一候補はAnchor Positionig
まっさきに思いつくのがAnchor Positionigだよね。
あのAnchor Positioningの布陣の機能をPopoverにも使えたらすごく可能性が広がるよね。
そこで、このpopoverでもAnchor Positioningの布陣を取り込むことが可能かと研究してみたんだ。
そして分かったことは…、
anchor positioningを使うまでもなく、すでに布陣に関してもpopoverは兼ね備えていたということなんだ。
これは驚きだった。今回の調査で最大の驚きだよ。

というわけだ、さっそくだけどデモを見てくれたまえ。

Popover API　驚異の布陣デモ：https://labo.studio-happyvalley.com/backdrop-dialog-popover/popover_formation/
完成度の高いPopover API
結局、popovertargetとID名による絆の生成は、布陣についても配慮されていたってことなんだ。
これは素直に魔道協会【魔道協会】
こちらの世界のWHATWG。HTMLなどの仕様開発（ルールの更新）を主導している。を賞賛するね。
ただし、Anchor Positioningのように一つのターゲットに対して複数の要素を布陣することはできないんだ。
なんせ、ID名で命名するからね。一個だけなんだ。
でも、そこは、デザイン次第でそどうにでもなるんじゃないかな。

さらに、dialog API,Popover Apiを組み合わせると、いろいろ面白いんだ。
だけど、もうすでにかなり長くなってしまったから、こちらの開発結果は折をみて解説するよ。

調査
報告

popoverとdialog、それぞれの住みわけ

PopoverはDialogの進化版なのかな？
Popoverはある意味、dialogの進化版ともいえるが、実際には使用目的が違う。
これはここまでの私の解説で理解できたと思う。

ただ、思うにせっかく新たなSSプロパティPopoverを公開するんだったら、モーダルウインドウも仕様に盛り込むべきだよね。
なんとなく魔道協会は、せっかく作ったdialog APIを残すためにあえて、仕様に盛り込まなかったんじゃないのと勘ぐってしまう。
Popoverにモーダル機能があれば、Dialogなんて不要だからね。

まあ、そんなわけで、簡単な差別化の一覧を作ってみた。
PopoverとDialog仕様比較一覧
補足として、印は基本出来ない、コンセプトとして考慮してないという意味。JSなど使えばもちろんできる。

機能dialogpopover
モーダルUI
非モーダルUI
背景を操作不能にする基本しない
『inert』化『showModal()』で自動基本しない
『::backdrop』
最上位レイヤー
Light Dismiss
Escapeによる終了
Anchor Positioningとの連携可能。でも無意味可能。でも不要
ツールチップ・補足
確認ダイアログ
ユーザーの操作を一時的に遮断
popoverとdialogの住みわけ
つまり、モーダルは、現状 Dialog一択。
そのほかの非モーダルはPopoverで開発。ということになる。

ただ、このDialog APIだけど、実はJSを使わずにshowModal()化する事案も進んでるそうだ。
```
<button command="show-modal" commandfor="my_dialog">
    開く
</button>
```
このようにブラウザ自身でshowModal()をやっちゃうんだよ。
『呼び出しコマンド API』と呼ばれている。
これは、まだまだ新しいAPIなんだけど、すでに2025年より主要魔法具ブラウザは全て対応済みだ。
進んでるじゃなくて完了してたんだね

まあ、召喚する門のモーダル化はまだまだDialog APIというのは変える気はないようだけどね。

ついにここまできた！JSなしでDialog要素をモーダル表示！：https://labo.studio-happyvalley.com/backdrop-dialog-popover/command_api/
さて、そろそろ、この講義も締めのころ合いだね
さっき出た『呼び出しコマンド』。もう少しこの呼び出しコマンドの解説も進めたい気もするけど、そうすると、もう古代WEB魔法の解説から逸脱しちゃうね。
先のDialogとPopover新旧取り混ぜの開発結果の解説もあるので合わせて近いうちに紹介するよ。
じゃあ、いったんこの辺でDialog ＆ Popover APIの報告・講義は締めることにする。

今回も長丁場に付き合ってくれてありがとう。

え？…今回の講義で最後だと思ってたって？
まだ続くとは思ってなかった？

いやあ、そんなこといったかなあ…、
ああ、最初のあれね。
『最後の調査報告は、三位一体の魔法 dialog…』ってあれね。
あの時は、それでうまくいくと思ってたんだよ(;^_^A

いざ、講義・調査報告を始めると、あまりの解説すべき内容の多さに、涙をのんで省かないといけない遺物がたくさんでてきちゃってね。
なので、次回はそんな解説を見送った聖遺物やアイテムを紹介させてもらうよ。

あとね、魔法省から古代魔法以外にも調査を依頼されててさ。
そのあたりも機会をみて解説させてもらうよ。
なので、皆にはまだまだお付き合いいただくことになりそうだ。