HTML Academy · Lesson

Interest Invokers and Command Attribute

Explore the command and commandfor attributes for declarative actions.

Lesson 4 of 414 steps

Interest Invokers and Command Attribute is a free HTML Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.

Two Emerging Declarative Patterns

The Open UI group is standardizing two new HTML attributes — command for click-triggered actions, and interesttarget for hover/focus-triggered "interest" (the basis of tooltips and previews). Both extend HTML with declarative behaviors that have traditionally required JavaScript.

The command Attribute

A button with command="show-modal" and commandfor="dialog-id" shows a dialog without any JS — replacing manual dialog.showModal() calls. Other commands: command="close", command="toggle-popover", command="show-popover".

<button command="show-modal" commandfor="my-dialog">Open</button>
<dialog id="my-dialog">...</dialog>

Supported Commands

The initial set targets common UI patterns: showing/hiding dialogs (built-in <dialog>), toggling popovers (Popover API), and may grow over time. Custom elements can declare which commands they accept via oncommand event handlers.

Custom Commands

Beyond built-in commands, the spec allows custom command strings starting with "--". The target element receives a command event you can handle in JS: el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

Interest Invokers

The interesttarget attribute marks an element's "interest" target — typically a tooltip that appears on hover or focus. The browser handles the timing (300ms hover-intent delay), positioning (with anchor positioning), and dismissal automatically.

<button interesttarget="user-info">Profile</button>
<div id="user-info" popover="hint">Ada Lovelace — Admin</div>

Combined With popover="hint"

The hint popover mode is designed for tooltip-style popovers that appear on interest. They are non-modal, do not steal focus, and dismiss when interest leaves. The combination of interesttarget + popover="hint" gives you a native tooltip in two HTML attributes.

Accessibility Wins

Native dialogs handle focus trapping; native popovers handle stacking; native interest invokers handle the hover-intent timing and announce relationships to screen readers. Replacing custom JS implementations with these declarative primitives reliably improves accessibility quality.

Status of the Spec

These features are still being standardized. The exact attribute names and command set may change. Browser implementations are appearing in Chromium first. Production use should wait until naming stabilizes and at least two browsers ship — likely within the next year or two.

Replacing JS Patterns

Each of these features replaces JavaScript that has been written and rewritten millions of times: dialog management, popover triggers, tooltip behavior. Moving these patterns into HTML reduces page weight, improves consistency, and lets the browser apply optimizations.

Open UI as the Source

The Open UI community group (open-ui.org) drives much of this work — proposing, prototyping, and shepherding new HTML elements and attributes through the standards process. Watch their blog for the latest proposals.

Connection to Other Modern Features

command, interesttarget, popover, dialog, anchor positioning, view transitions, and customizable selects are all part of one coherent push to bring component-library patterns into the platform. Each individually is small; together they represent the largest expansion of HTML's UI vocabulary in years.

What to Do Now

Track the proposals (open-ui.org), experiment in Chromium with flags enabled, plan to adopt as features stabilize. Audit your existing codebase: count how much JS is dedicated to dialog/popover/tooltip plumbing. That code is targeted for replacement within a few releases.

Knowledge Check

What is the purpose of the command attribute on a button?

Summary

Two emerging features expand HTML's declarative UI vocabulary: command + commandfor for click-triggered actions (show modal, toggle popover) and interesttarget + popover="hint" for hover/focus-triggered tooltips. Both replace common JavaScript patterns with HTML attributes, improving accessibility and reducing bundle size. Still evolving; track Open UI for stabilization and ship as browser support arrives.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
40
Lessons
159

Frequently Asked Questions

Is the “Interest Invokers and Command Attribute” lesson free?

Yes — any 3 lessons of the HTML Academy learning path, including “Interest Invokers and Command Attribute”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.

What will I learn in “Interest Invokers and Command Attribute”?

Explore the command and commandfor attributes for declarative actions. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

How long does the “Interest Invokers and Command Attribute” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Declarative Shadow DOM
  2. The Popover API
  3. The selectlist Element
  4. Interest Invokers and Command Attribute
← Back to HTML Academy