APIs that enable richer user interactions.
<details>
<summary>
<details name>
<dialog>
<dialog closedby="any">
dialog.requestClose()
popover="hint"
command
commandfor
element.before()
element.moveBefore()
A disclosure widget that can be toggled to hide or show content interactively.
<details> <summary>Details</summary> Longer content </details>
Group <details> elements so that only up to one in the group can be open at a time.
<details open name="sidebar_panel"> <summary>Main info</summary> <!-- controls --> </details> <details name="sidebar_panel"> <summary>Style</summary> <!-- controls --> </details>
Creates a modal or non-modal dialog box, such as a confirmation prompt or a subwindow used to enter data.
<dialog id="confirm"> <form method="dialog"> Are you sure? <button value="1">Yes</button> <button value="0">No</button> </form> </dialog>
Allows the dialog to be closed by clicking outside of it (light dismiss).
Closes the dialog in a way that can be cancelled (unlike dialog.close()).
dialog.close()
HTML syntax and JS API facilitating popovers such as overlays, popups, menus etc.
<button popovertarget="foo">Toggle the popover</button> <div id="foo" popover>Popover content</div>
A way to create less persistent popovers, such as tooltips.
<div id="tooltip" popover="hint"> Save this document </div> <button popovertarget="tooltip"> Save </button>
A declarative way for <button> to invoke predefined custom commands.
<button>
<button commandfor="mydialog" command="show-modal"> Show modal dialog </button> <dialog id="mydialog"> <button commandfor="mydialog" command="close"> Close </button> *dialog content* </dialog>
DOM method that moves an element before another.
referenceElement.before(newElement);
Move an element before another while preserving state (focus, iframe loads, animation frame, etc).
referenceElement.parentNode.moveBefore(newElement, referenceElement);
Browser incompatibilities or lack of support, missing features, and other problems you face around interactive elements and behaviors (except forms), DOM manipulation, events, and related APIs.