Interest Invokers and Command Attribute
Explore the command and commandfor attributes for declarative actions.
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.
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
- Declarative Shadow DOM
- The Popover API
- The selectlist Element
- Interest Invokers and Command Attribute