Chapter 7 — Interactive Elements & Web Components
HTML isn't just static documents. This chapter explores the native interactive toolbox: accordion‑style disclosures, modal dialogs, the declarative Popover API, and the foundations of Web Components – templates, slots, and shadow DOM. Every technique here keeps your code pure, accessible, and script‑light.
What’s Inside This Chapter
- Section 7.1 — Native Disclosure Widgets
<details>and<summary>– the browser’s built‑in accordion. Collapse and expand content with zero JavaScript. - Section 7.2 — The
<dialog>Element: Modal & Non‑Modal Overlays
A native overlay system that traps focus, renders a backdrop, and integrates seamlessly with forms. - Section 7.3 — The Popover API
Turn any element into a floating tooltip or dropdown using only attributes – no scripts, no z‑index hacks. - Section 7.4 — Web Components Basics
<template>,<slot>, and custom elements with theisattribute – reusable, encapsulated UI pieces in pure HTML. - Section 7.5 — Declarative Shadow DOM
Attach a fully isolated shadow root using just a template attribute – true component encapsulation without JavaScript.
START READING
Turn to Section 7.1 and meet your first native interactive widget: the disclosure accordion.