Interactive elements

<details>
  <summary>Shipping costs</summary>
  <p>Free over €50; otherwise €4.90 in the EU.</p>
</details>

summary { cursor: pointer; }
summary::marker { color: var(--accent); }
 
/* custom icon instead of the triangle */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-inline-start: 1ch; }
details[open] > summary::after { content: "−"; }
 
details::details-content { padding-block: 0.5rem; }

<button type="button" commandfor="del" command="show-modal">
  Delete project
</button>
 
<dialog id="del" aria-labelledby="del-title">
  <h2 id="del-title">Delete "Atlas"?</h2>
  <p>This removes 14 files. It can't be undone.</p>
  <form method="dialog">
    <button value="cancel" autofocus>Cancel</button>
    <button value="delete">Delete</button>
  </form>
</dialog>

<style>
  dialog { border: 0; border-radius: 10px; padding: 16px;
    background: var(--bg); color: var(--fg);
    box-shadow: 0 10px 30px rgb(0 0 0 / 35%); }
  dialog::backdrop { background: rgb(0 0 0 / 45%); }
  .row { display: flex; gap: 8px; justify-content: end; }
  button { font: inherit; padding: 6px 12px; }
</style>
<button commandfor="d1" command="show-modal">
  Open modal (no JavaScript)
</button>
<dialog id="d1" aria-labelledby="d1-t">
  <h3 id="d1-t" style="margin-top:0">Discard draft?</h3>
  <p>Your changes will be lost.</p>
  <div class="row">
    <button commandfor="d1" command="close" autofocus>
      Keep editing</button>
    <button commandfor="d1" command="close">Discard</button>
  </div>
</dialog>

<button popovertarget="share">Share</button>
<div id="share" popover>
  <a href="mailto:?body=…">Email</a>
  <button type="button">Copy link</button>
</div>

<style>
  [popover] { margin: 0; padding: 6px; border: 1px solid
      var(--muted); border-radius: 8px;
    background: var(--bg); color: var(--fg);
    inset: auto; top: 48px; left: 12px; }
  [popover] a { display: block; padding: 6px 12px;
    color: inherit; border-radius: 4px; }
  [popover] a:hover, [popover] a:focus-visible {
    background: var(--chip); }
  button { font: inherit; padding: 6px 12px; }
</style>
<button popovertarget="m1">Account ▾</button>
<div id="m1" popover>
  <a href="#profile">Profile</a>
  <a href="#billing">Billing</a>
  <a href="#out">Sign out</a>
</div>
<p style="margin-top:110px">Click outside or press Esc to
  close.</p>

<button commandfor="player" command="--rewind">
  Back 10 s
</button>
<button commandfor="player" command="--play">Play</button>
<video id="player" src="talk.mp4"></video>

const video = document.querySelector<HTMLVideoElement>(
  "#player",
)!;
 
video.addEventListener("command", (event) => {
  const { command } = event as CommandEvent;
  if (command === "--play") void video.play();
  if (command === "--rewind") video.currentTime -= 10;
});

<main inert>…</main>  <!-- behind a custom overlay -->
<nav class="drawer" inert>…</nav>  <!-- closed off-canvas -->

<h3 id="q-refunds">
  <button aria-expanded="false" aria-controls="a-refunds">
    How do refunds work?
  </button>
</h3>
<div id="a-refunds" hidden="until-found">…</div>

const panel = document.getElementById("a-refunds")!;
panel.addEventListener("beforematch", () => {
  // keep the button's state in sync with the reveal
  document.querySelector("[aria-controls=a-refunds]")
    ?.setAttribute("aria-expanded", "true");
});

<style>
  .edit { padding: 8px; border: 1px dashed var(--muted);
    border-radius: 6px; min-block-size: 3lh; }
  .edit:focus-visible { outline: 2px solid var(--graph-0); }
</style>
<p id="note-l">Note (plain text only):</p>
<div class="edit" contenteditable="plaintext-only"
  role="textbox" aria-multiline="true"
  aria-labelledby="note-l">Click and type; paste loses
  formatting.</div>

<template id="row-tpl">
  <li class="row">
    <span class="name"></span>
    <button type="button" class="remove">Remove</button>
  </li>
</template>
<ul id="list"></ul>

const tpl = document.querySelector<HTMLTemplateElement>(
  "#row-tpl",
)!;
 
function addRow(name: string): void {
  const frag = tpl.content.cloneNode(
    true,
  ) as DocumentFragment;
  // textContent, not innerHTML
  frag.querySelector(".name")!.textContent = name;
  document.querySelector("#list")!.append(frag);
}

class CopyButton extends HTMLElement {
  static observedAttributes = ["text"];
 
  connectedCallback(): void {
    this.innerHTML = `<button type="button">Copy</button>`;
    this.querySelector("button")!.addEventListener(
      "click",
      () => navigator.clipboard.writeText(this.text),
    );
  }
 
  get text(): string {
    return this.getAttribute("text") ?? "";
  }
}
 
customElements.define("copy-button", CopyButton);

class UserCard extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: "open" });
    root.innerHTML = `
      <style>
        :host { display: block; border: 1px solid; }
        :host([compact]) { padding: 0.25rem; }
        ::slotted(img) { border-radius: 50%; }
      </style>
      <slot name="avatar"></slot>
      <h3 part="title">
        <slot name="name">Anonymous</slot>
      </h3>
      <slot></slot>`;
  }
}
customElements.define("user-card", UserCard);

<article class="card">
  <template shadowrootmode="open">
    <style>
      :host { display: block; max-inline-size: 300px;
        padding: 12px; border-radius: 10px;
        border: 1px solid var(--muted); }
      h3 { margin: 0 0 4px; color: var(--graph-0); }
      ::slotted(p) { margin: 0; }
    </style>
    <h3><slot name="title">Untitled</slot></h3>
    <slot></slot>
  </template>
  <span slot="title">Declarative shadow DOM</span>
  <p>Rendered by the HTML parser: this frame has no
    JavaScript at all.</p>
</article>

class StarRating extends HTMLElement {
  static formAssociated = true;
  #internals = this.attachInternals();
  #value = 0;
 
  connectedCallback(): void {
    this.#internals.role = "slider";
    this.#internals.ariaValueMin = "0";
    this.#internals.ariaValueMax = "5";
    this.tabIndex = 0;
    this.addEventListener("keydown", this.#onKey);
    this.#update();
  }
 
  #onKey = (e: KeyboardEvent): void => {
    if (e.key === "ArrowRight") this.value = this.#value + 1;
    if (e.key === "ArrowLeft") this.value = this.#value - 1;
  };
 
  set value(v: number) {
    this.#value = Math.min(5, Math.max(0, v));
    this.#update();
  }
 
  #update(): void {
    const v = String(this.#value);
    this.#internals.setFormValue(v);
    this.#internals.ariaValueNow = v;
    if (this.hasAttribute("required") && !this.#value) {
      this.#internals.setValidity(
        { valueMissing: true }, "Pick a rating", this,
      );
    } else {
      this.#internals.setValidity({});
    }
  }
 
  formResetCallback(): void { this.value = 0; }
}
customElements.define("star-rating", StarRating);

<style>
  .faq details { border-block-end: 1px solid var(--chip); }
  .faq summary { padding: 10px 4px; cursor: pointer;
    font-weight: 600; list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before { content: "+"; display: inline-block;
    inline-size: 1.5ch; color: var(--graph-0); }
  .faq details[open] summary::before { content: "−"; }
  .faq p { margin: 0 0 10px 1.5ch; }
</style>
<div class="faq">
  <details name="faq" open>
    <summary>Can I cancel anytime?</summary>
    <p>Yes. Your plan runs to the end of the period.</p>
  </details>
  <details name="faq">
    <summary>Do you offer refunds?</summary>
    <p>Within 14 days of purchase, no questions asked.</p>
  </details>
  <details name="faq">
    <summary>Is there a student discount?</summary>
    <p>50% with a valid university email.</p>
  </details>
</div>

<button type="button" commandfor="confirm"
  command="show-modal">Delete account</button>
 
<dialog id="confirm" aria-labelledby="confirm-t"
  closedby="any">
  <form method="dialog">
    <h2 id="confirm-t">Delete your account?</h2>
    <p>All projects are removed after 30 days.</p>
    <button value="cancel" autofocus>Cancel</button>
    <button value="delete" class="danger">Delete</button>
  </form>
</dialog>

const dialog = document.querySelector<HTMLDialogElement>(
  "#confirm",
)!;
 
dialog.addEventListener("close", () => {
  // "" when closed by Esc or light dismiss
  if (dialog.returnValue === "delete") void deleteAccount();
  dialog.returnValue = "";
});

<button popovertarget="more" class="more-btn">
  More actions
</button>
<div id="more" popover class="menu">
  <a href="/export/">Export</a>
  <a href="/archive/">Archive</a>
  <a href="/settings/">Settings</a>
</div>

.menu {
  margin: 0;
  inset: auto;
  /* the invoker is the implicit anchor */
  position-area: block-end span-inline-end;
  position-try-fallbacks: flip-block, flip-inline;
  margin-block-start: 0.25rem;
}
.menu:popover-open { display: grid; }

<button type="button" id="save" aria-label="Save"
  aria-describedby="tip-save">
  <svg aria-hidden="true" width="16" height="16">
    <use href="/icons.svg#save" />
  </svg>
</button>
<div id="tip-save" popover="hint" role="tooltip">
  Save (Ctrl+S)
</div>

const btn = document.querySelector<HTMLElement>("#save")!;
const tip = document.querySelector<HTMLElement>(
  "#tip-save",
)!;
const show = () => tip.showPopover({ source: btn });
const hide = () => tip.hidePopover();
 
btn.addEventListener("pointerenter", show);
btn.addEventListener("focus", show);
btn.addEventListener("pointerleave", hide);
btn.addEventListener("blur", hide);

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  :host { display: flex; gap: .5rem; align-items: center;
    padding: .5rem .75rem; border-radius: .5rem;
    background: var(--callout-bg, #eef); }
  ::slotted(strong) { color: var(--callout-fg, navy); }
`);
 
class NoteCallout extends HTMLElement {
  connectedCallback(): void {
    if (this.shadowRoot) return; // declaratively rendered
    const root = this.attachShadow({ mode: "open" });
    root.adoptedStyleSheets = [sheet];
    root.innerHTML = `<span aria-hidden="true">i</span>
      <div><slot>Nothing to say.</slot></div>`;
  }
}
customElements.define("note-callout", NoteCallout);

<note-callout>
  <strong>Heads up:</strong> maintenance on Sunday.
</note-callout>

<profile-card>
  <template shadowrootmode="open">
    <style>
      :host { display: grid; grid-template-columns: auto 1fr;
        gap: 0 1rem; align-items: center; }
      ::slotted(img) { grid-row: span 2;
        border-radius: 50%; }
      ::slotted(h3) { margin: 0; }
    </style>
    <slot name="photo"></slot>
    <slot name="name"></slot>
    <slot></slot>
  </template>
  <img slot="photo" src="ana.jpg" alt="" width="64"
    height="64">
  <h3 slot="name">Ana Diaz</h3>
  <p>Staff engineer, accessibility team</p>
</profile-card>