题干与适用场景
你要实现一个设置按钮，既能打开对话框，也能在不依赖组件状态同步的情况下关闭它。请说明如何用 command 和 commandfor 建立声明式控制，并处理自定义命令、键盘可达性和旧浏览器降级。
Invoker Commands API 让按钮通过目标元素的 ID 触发预定义动作或派发自定义 command 事件。它把“谁触发”和“哪个元素执行”写进 HTML，适合对话框、Popover 等交互，但不能替代状态机、权限检查或不支持浏览器的备用路径。
面试官考察点
面试官会关注你是否理解 commandfor 必须指向同一树中的目标、内置命令与自定义命令的区别、事件取消与默认行为、键盘和焦点管理，以及渐进增强而非把新属性当作唯一运行时保障。
澄清问题
先确认目标是模态对话框、非模态 Popover 还是普通元素，按钮是否位于同一 DOM 树，交互是否需要提交前校验，以及目标浏览器支持范围。再确认打开后焦点落点、Escape 行为、关闭后的焦点返回和自定义命令是否需要业务权限判断。
30 秒回答框架
“我会让按钮用 commandfor 指向目标元素，用内置命令表达显示、隐藏或切换；业务动作使用自定义命令事件，由目标或控制器执行校验并可取消默认行为。原生按钮天然可键盘操作，但我仍会验证焦点进入、Escape、关闭后返回和读屏名称。对不支持的浏览器保留 JavaScript 事件监听或组件 fallback，并用同一状态机测试原生和降级路径。”
分步骤深入解答
第一步：建立按钮到目标的声明式关系
commandfor 的值是目标元素的 ID，按钮与目标必须在同一树中。按钮的 command 值决定触发哪个动作；这让静态 HTML 也能表达控制关系，减少手动查询和状态同步代码。
第二步：优先使用内置命令
对话框和 Popover 有浏览器定义的命令，例如显示、隐藏和切换。内置命令由目标元素的原生行为处理，能与顶层、light dismiss 和焦点规则协同。不要用自定义字符串重复实现已有语义。
<button commandfor="settings" command="show-modal">
打开设置
</button>
<dialog id="settings">
<button commandfor="settings" command="close">关闭</button>
</dialog>第三步：区分自定义命令事件
以 -- 开头的自定义命令会派发 command 事件，事件包含目标和命令值。处理器应验证来源和当前状态，必要时调用 preventDefault()，再执行业务动作。自定义命令不会自动改变目标的显示状态。
第四步：把权限和校验留在业务层
声明式触发只表达意图，不能绕过权限、表单校验或异步保存。目标控制器应在执行命令前确认用户权限、数据版本和当前状态，失败时给出可恢复的错误，不让按钮的 HTML 成为安全边界。
第五步：设计焦点与键盘行为
使用原生对话框或 Popover 时，核对打开后的初始焦点、Escape 关闭、关闭后的焦点返回和读屏名称。普通元素不会自动获得这些语义，若命令目标不是原生交互元素，就需要额外实现可访问键盘模型。
第六步：处理事件取消与竞态
多个按钮可能同时发出命令。事件处理器应检查目标当前状态，避免重复打开、重复提交或关闭后又被旧异步结果打开。将异步业务状态与可见状态分离，确保失败不会留下错误的 aria 或焦点状态。
第七步：提供旧浏览器降级
不支持 commandfor 的浏览器会忽略这些属性，页面必须保留普通按钮的 JavaScript 监听或组件绑定。降级路径应复用同一命令处理函数和可访问性测试，不要复制一套行为导致两种实现漂移。
第八步：测试原生和降级路径
测试鼠标、键盘、读屏、Escape、焦点返回、重复命令、取消默认行为、权限拒绝和异步失败。用浏览器兼容矩阵确认内置命令、自定义事件与目标类型的支持，不把 MDN 的 Baseline 标签当作所有运行环境的保证。
高质量示例答案
我会让静态按钮通过 commandfor 指向同一树中的对话框，并用内置 show-modal 和 close 命令表达基础行为。需要业务逻辑时使用自定义命令事件，在处理器中检查权限、表单版本和当前状态，必要时取消默认行为；自定义命令本身不会自动切换显示状态。原生对话框负责模态语义，但我仍会验证焦点、Escape、关闭后的返回和读屏名称。旧浏览器忽略新属性，所以保留同一命令处理函数的事件监听 fallback。最后用键盘、读屏、并发点击、异步失败和浏览器矩阵测试两条路径。
常见误区
认为 commandfor 会跨 Shadow DOM 或文档查找目标
规范要求目标 ID 在同一树中。跨树或跨文档控制需要显式组件协议或消息通信，不能只改变 ID。
认为所有自定义命令都有默认行为
自定义命令主要派发事件，不会自动打开、关闭或提交目标。处理器必须实现状态改变，并明确何时取消默认行为。
只验证鼠标点击
按钮的键盘可达性、焦点顺序、Escape 和读屏反馈同样是交互契约。视觉上能打开不代表可访问行为完整。
延伸追问与参考答案
目标元素动态替换后，commandfor 需要重新绑定吗？
只要新元素使用相同 ID 且仍在同一树中，声明关系可继续工作，但控制器要重置焦点和业务状态。若 ID 重复或目标暂时不存在，应阻止命令并记录可诊断状态。
自定义命令触发异步保存时，如何防止重复提交？
在处理器中用请求状态或幂等键锁定同一动作，按钮进入忙碌状态并保留取消或重试入口。异步完成后再次确认目标仍存在，避免旧结果修改新会话。
何时应继续使用 JavaScript 组件，而不是只用 HTML 命令？
当交互需要跨树协调、复杂动画、异步状态机或大量旧浏览器兼容时，组件状态更容易集中管理。仍可用 command 作为渐进增强入口，但不能牺牲可测试的业务边界。