<dialog>
<details>
<summary>
inert
For dialog boxes or other interactive components, such as a dismissible alerts, or subwindows.
<dialog id="confirm"> <form method="dialog"> Are you sure? <button value="1">Yes</button> <button value="0">No</button> </form> </dialog>
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" id="main_info"> <summary>Main info</summary> <!-- controls --> </details> <details name="sidebar_panel" id="style_settings"> <summary>Style</summary> <!-- controls --> </details>
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>
Attribute to make an element and its descendants non-interactive, and invisible to assistive technology.
<div id=app inert class=loading> ... </div>
element.classList
element.toggleAttribute(name, force)
element.getAttributeNames()
element.innerHTML
element.outerHTML
parent.append(...children)
parent.appendChild(child)
el1.before(...elements)
parent.insertBefore(el2, el1)
el1.replaceWith(el2)
parent.replaceChild(el2, el1)
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.