Interactive HTML
13 steps in 5 sets of HTML.
The interactive elements the platform gives you without writing any JavaScript. Details and summary for disclosure, the dialog element with its backdrop and focus trapping, templates and custom elements, drag and drop, and contenteditable.
Thirteen steps, and several of these replace libraries people are still installing. A native dialog handles the focus management and the escape key for free, which is most of what makes a modal accessible and most of what hand-rolled ones get wrong.
Disclosure & dialogs
- Disclosure widgetsDetails and summary give you an accordion with no JavaScript at all.
- An accordion without JavaScriptGive several disclosures the same name and the browser closes the others for you.
- DialogsA native modal: the form method closes it and returns a value.
- PopoversTwo attributes and the browser handles the light dismiss, the top layer and the focus.
Templates & components
- TemplateMarkup the browser parses but does not render, waiting to be cloned.
- A custom elementA tag of your own, with its behavior attached to the tag rather than to a selector.
- Shadow DOM and slotsThe component owns its markup; the page owns the content that goes in it.
Direct manipulation
- Editable regionsAny element can become a text field, which is powerful and rarely what you want.
- Dragging thingsOne attribute makes an element draggable; the rest is three events.
Scripts & embeds
- How a script loadsWhere the tag sits and which attribute it carries decide when the parser stops.
- Sandboxing an embedAn iframe runs someone else's page inside yours, so start by allowing nothing.
- A page that respondsDisclosure, popover, dialog and a live region on one page, with no framework.
Encore
- component_page.htmlOne page, four built-in behaviors: a template, a custom element, a popover and a dialog.