唤魔者命令（解释器）|开放用户界面

Authors and Last Updated: Keith Cirkel (https://github.com/keithamus), Luke Warlow. Last updated on 20 February 2025.
Specification and MDN Documentation: Specification, MDN Documentation

Pitch in Code Example:

<button command="show-modal" commandfor="my-dialog">This opens a dialog</button>

<dialog id="my-dialog">This is the dialog</dialog>

Introduction: Adding commandfor and command attributes to <button> and elements enables more accessible and declarative button behavior, reducing bugs and JavaScript. Buttons with command dispatch CommandEvent on commandfor element with default behaviors.
Background: Inline JavaScript for DOM interactions has fallen out of favor due to security and maintainability. Many frameworks attempt to reintroduce inline handler experiences. Handling clicking is only half the problem. There has been a rise in customizing controls. The popover attribute provided a declarative way for popovers. This proposal aims to address similar needs for other interactive elements.
Terms:
- Invoke/Invoked/Invoking: Refers to a complete press action using a HID.
- Invoker: A <button type="button"> with commandfor and command attributes.
- Invoker Target: An element referenced by commandfor.
Proposed Plan: Add commandForElement and command as attributes to <button>. commandfor is an IDREF to an element. command is a freeform hint. Custom commands start with double dash. Valid commands dispatch CommandEvents. If both popovertarget and commandfor/command are set, command takes precedence. command is ignored for form participants or type=submit buttons.
Example Code:
- Popovers: button with commandfor and command="toggle-popover" toggles popover.
- Dialogs: button with commandfor and command="show-modal" shows dialog. button with command="close" closes dialog.
- Custom behavior: Custom JavaScript can be triggered using custom commands.
Defaults: Depending on commandfor element, invoking button triggers additional behaviors. Table shows built-in invocations on specific element types.
Accessibility: For built-in behaviors, command maps to specific accessibility mappings. Buttons get aria-details, aria-expanded, and focus restored. Other accessibility considerations are discussed.
Invokers and Custom Elements: Custom Elements can use CommandEvent for their behaviors.
Security: Care is taken to ensure no new significant security implications. Invokers require user interaction and commandfor references an ID in the same document.
PAQ (Potentially Asked Questions):
- Name: command is chosen as it notifies related element of action request, not specific to user gesture like click.
- Name change: invoke was originally used but changed to command for simplicity.
- Implicit attributes: Initially, auto command and implicit commandfor are out of scope.
- <form> and <a> defaults: Omitted as proposal doesn't aim to replace them.
- Limited to buttons: To avoid problems with non-interactive elements.
- button[type=submit] and button[type=reset]: Not included as they have default actions.
- input[type=button]: Not supported as it's a legacy element.
- popovertarget: Coexists with command/commandfor but intended to replace it.
- Passing arguments: Custom commands can be used in freeform ways with various techniques like using data-* attributes.