ネイティブな dialog 要素はどのように機能しますか？

Question

Accepted Answer

`<dialog>` は**モーダルとダイアログ**用のネイティブ要素です。フォーカストラップ、バックドロップ、トップレイヤー、Escape キーでの閉じる機能を処理します — これらはそうでなければ、大量の JavaScript と ARIA で手作業で構築する必要があります。

```html
<dialog id="myModal">
  <form method="dialog">           
    <h2>Confirm</h2>
    <p>Are you sure?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">OK</button>
  </form>
</dialog>
```

## JS での開く・閉じる

```js
const modal = document.getElementById("myModal");

modal.showModal(); // opens as a MODAL: backdrop + focus trapped + Esc closes
modal.show();      // opens as a NON-modal (no backdrop, page stays interactive)
modal.close("ok"); // closes, sets returnValue

modal.addEventListener("close", () => {
  console.log(modal.returnValue); // "ok" or "cancel" — from the button's value
});
```

## showModal() で無料で得られるもの

- **フォーカストラップ** — ダイアログが開いている間、Tab はダイアログ内に留まります。
- **バックドロップ** — `::backdrop` でスタイル可能で、外側のクリックは検出可能です。
- **トップレイヤー** — `z-index` に関わらず、すべての上に描画されます。
- **Escape キー**で閉じます。
- **`method="dialog"`** がフォーム上にあると、ダイアログを閉じ、どのボタンが送信されたかを記録します。

## バックドロップのスタイリング

```css
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog { border: none; border-radius: 8px; padding: 2rem; }
```

## なぜ重要なのか

`<dialog>` 以前は、アクセス可能なモーダルには手動フォーカス管理、ARIA ロール、スクロールロック、Escape 処理が必要でした — これはバグの原因として悪名高いものです。

ネイティブ要素はこれらすべてを正しくボックスから提供します。

真のモーダルには `showModal()` を使用してください。これはダイアログの現代的でアクセス可能なデフォルトです。