game-modal
Coordinates one direct dialog child. Use native show-modal commands or the open attribute after upgrade. Escape and method=dialog preserve native behavior. A missing dialog is inert until inserted.
Examples
Modal dialog
Open the native dialog. Close it with the form button or Escape to return focus to the opener.
<button type="button" command="show-modal" commandfor="demo-inventory">Open inventory</button>
<game-modal>
<dialog id="demo-inventory" aria-labelledby="inventory-title">
<h3 id="inventory-title">Inventory</h3>
<p>One spare battery.</p>
<form method="dialog"><button autofocus>Close inventory</button></form>
</dialog>
</game-modal>Initially visible dialog
The native open attribute shows a nonmodal dialog on load. Close it with its form button.
<game-modal open>
<dialog open aria-label="Briefing note" style="position:static;margin:0">
<p>Shields recharge between sectors.</p>
<form method="dialog"><button>Dismiss briefing note</button></form>
</dialog>
</game-modal>API
| Name | Type or default | Behavior |
|---|---|---|
open |
boolean
|
Presence opens the dialog, removal closes it. Reflected from native toggles. At initialization an already-open native dialog is adopted. |
| Name | Type or default | Behavior |
|---|---|---|
game-modal-change |
CustomEvent<{ open: boolean }>
|
Bubbles and is composed. Emitted for a changed open state after initialization. Native toggle notifications can coalesce. |
Listened-for events
None.
CSS custom properties
None.