command 与 commandfor 属性实战：用纯 HTML 搭一套零 JS 的弹层

写弹层的 JavaScript 大概是前端里被重复抄写次数最多的代码之一。打开、关闭、按 Esc 关、点遮罩关、关闭后把焦点还给触发按钮——这些逻辑每换一个项目就重新写一遍，还总有人漏掉焦点归还那一步。

浏览器其实早就接管了其中一大半。<dialog> 自带焦点陷阱和 Esc 关闭，popover 自带顶层渲染和点外关闭。唯一没被接管的，是”点这个按钮去打开那个弹层”这根线——所以你还是得写 document.getElementById(...).showModal()。

现在这根线也归 HTML 管了。

command 和 commandfor 是怎么工作的

这两个属性挂在按钮上，成对使用：

<button commandfor="my-dialog" command="show-modal">打开</button>

<dialog id="my-dialog">
  <p>内容</p>
</dialog>

commandfor 的值是一个元素 id，告诉浏览器”这个按钮操作谁”。command 的值是动作名，告诉浏览器”具体做什么”。目前可用的动作有这几个：

show-modal      以模态方式打开 dialog
close           关闭 dialog
request-close   发出关闭请求（可以被拦截）
show-popover    显示 popover
hide-popover    隐藏 popover
toggle-popover  切换 popover

浏览器拿到这两个属性后，会自己把点击事件、方法调用、焦点转移全部串起来。你不再需要 querySelector，也不需要 addEventListener。

和早期就存在的 popovertarget / popovertargetaction 相比，这两个属性覆盖面更宽——popovertarget 只能操作 popover，而 commandfor 连 <dialog> 也能一起管。新项目里直接用新的一套就够了。

先跑通一个模态框

把上面那段代码放进页面，点按钮，弹层就出来了。按 Esc，它自己关掉，焦点回到按钮上。整个过程没有一行脚本。

注意 command="show-modal" 这个写法。如果你写成 show（没有 -modal），弹层会以非模态方式打开——没有遮罩、没有焦点陷阱，用户可以继续操作背后的页面。这在需要”陪跑式”浮层（比如侧边抽屉）时有用，但做确认框必须用 show-modal。

closedby：把”怎么关”也写成声明

模态框默认只能按 Esc 关，点遮罩是没反应的——这是很多人的第一反应，以为坏了，其实是 closedby 属性的默认值在起作用。

<dialog id="a" closedby="closerequest">  <!-- 默认：只有 Esc 能关 -->
<dialog id="b" closedby="any">           <!-- Esc 和点遮罩都能关 -->
<dialog id="c" closedby="none">          <!-- 都关不掉，必须显式操作 -->

做表单类弹层时，any 要慎用。用户填了一半内容，手一滑点到遮罩上，整个弹层连同数据一起消失，体验很糟。这类场景保持默认的 closerequest，或者干脆用 none 逼用户做选择，反而是更负责任的做法。

request-close：拦截关闭动作的入口

有些弹层在关闭前需要确认一下，比如”你有未保存的修改”。这时候用 request-close 而不是 close：

<button commandfor="edit" command="request-close">关闭</button>

request-close 发出的关闭请求是可以被取消的。在 cancel 事件里调用 preventDefault()，弹层就会留在原地：

const dialog = document.getElementById('edit');
const form = dialog.querySelector('form');

dialog.addEventListener('cancel', (event) => {
  if (form.dataset.dirty === 'true') {
    event.preventDefault();
    console.log('还有未保存的修改，已阻止关闭');
  }
});

这里有个容易混淆的点：如果表单本身不合法，直接提交也会被浏览器拦住，弹层压根不会关。所以 request-close 更适合处理那些”表单合法但业务上不该关”的情况，比如草稿还没同步、附件还在上传。

把同样的思路用到 popover 上

popover 适合做提示、菜单、小面板这类不需要抢夺焦点的浮层。加上 popover 属性即可，默认值是 auto：

<button commandfor="tip" command="toggle-popover">这是什么？</button>

<div id="tip" popover>
  <p>关闭通知后，你将不再收到任何提醒。</p>
  <button commandfor="tip" command="hide-popover">知道了</button>
</div>

注意里面的”知道了”按钮——它用同一套机制反向把自己关掉。这就是这两个属性的好处：关和开用的是同一种语法，不需要为”关闭按钮”单独写逻辑。

popover="auto" 有个很好用的行为叫”自动关闭其他 popover”。页面上同时开了两个浮层时，打开新的会自动关掉旧的，这就是原生的”灯泡模式”。如果你的浮层需要和别的浮层共存（比如一个常驻的工具栏），把它设成 popover="manual"，它就不会被别人的打开动作挤掉，同时也失去了点外关闭的能力。

完整案例：一个下拉菜单

把上面几块拼起来，做一个账户菜单。它用 popover 承载内容，用 command 接按钮，关闭时靠点外自动触发。

<button commandfor="account-menu" command="toggle-popover" aria-haspopup="menu">
  账户
</button>

<div id="account-menu" popover>
  <ul role="menu">
    <li role="none"><button role="menuitem">个人资料</button></li>
    <li role="none"><button role="menuitem">账单设置</button></li>
    <li role="none"><button role="menuitem">退出登录</button></li>
  </ul>
</div>

几处细节值得留意。aria-haspopup="menu" 告诉读屏软件按钮会弹出菜单，这不是可选项。role="none" 加在 <li> 上是必要的——菜单语义里 role="menu" 的直接子元素应该是 menuitem，中间的列表项角色会打断这个层级。

还有一个不太直观的地方：popover 默认不会自动把焦点移进去。如果你希望菜单一打开，第一项就处于可聚焦状态，还是得补一小段脚本。官方规范里讨论了自动聚焦的机制（autofocus 配合 popover 的行为），浏览器实现进度不一，目前稳妥的做法是自己接管：

const menu = document.getElementById('account-menu');

menu.addEventListener('toggle', (event) => {
  if (event.newState !== 'open') return;
  menu.querySelector('[role="menuitem"]')?.focus();
});

几个真会踩到的坑

commandfor 找不到目标时的静默失败

如果写错了 id，按钮什么也不会发生，控制台也不报错。这是设计使然（浏览器不想因为一个属性写错就抛异常），但调试时非常难受。养成习惯：改完 id 顺手在控制台跑一下 document.getElementById('你的id')。

同一个 id 被用了两次

commandfor 走的是和 label for 一样的查找路径，只认第一个匹配。页面里有两块模板内容用了同一个 id，会出现”点第一个按钮永远没反应”这种诡异现象。用前端模板渲染列表时尤其要注意拼接唯一 id。

不要在 form 里的提交按钮上乱加 command

一个 type="submit" 的按钮，既在 <form method="dialog"> 里负责提交并关闭弹层，又带了 command="close"，两套机制会打架。规矩很简单：提交按钮就老老实实提交，需要纯关闭的按钮用 type="button" 配 command。

嵌套 dialog 时 request-close 会传给谁

弹层里再开一个弹层时，按 Esc 只会作用于最上层的那个。这是符合直觉的，但如果你在内层监听了 cancel 事件，它不会因为外层关闭而被触发。别把清理逻辑挂错地方。

旧浏览器怎么办

写这篇文章时，Chromium 系浏览器已经支持这两个属性，Safari 和 Firefox 还在推进中。上线前先探测一下：

const hasCommands = 'commandForElement' in HTMLButtonElement.prototype;

返回 false 的环境需要兜底。好消息是兜底代码很短，因为你只需要把按钮的点击重新接回原生方法：

if (!('commandForElement' in HTMLButtonElement.prototype)) {
  document.addEventListener('click', (event) => {
    const trigger = event.target.closest('button[commandfor]');
    if (!trigger) return;

    const target = document.getElementById(trigger.getAttribute('commandfor'));
    if (!target) return;

    switch (trigger.getAttribute('command')) {
      case 'show-modal':
        target.showModal();
        break;
      case 'close':
        target.close();
        break;
      case 'request-close':
        target.requestClose?.();
        break;
      case 'show-popover':
        target.showPopover?.();
        break;
      case 'hide-popover':
        target.hidePopover?.();
        break;
      case 'toggle-popover':
        target.togglePopover?.();
        break;
    }
  });
}

这段代码用事件委托统一处理，不关心按钮什么时候被渲染出来，所以动态插入的节点也能自动生效。等浏览器支持普及之后，直接删掉即可，业务代码一行都不用动。

完整可运行页面

下面这个页面把模态框、popover 提示、关闭拦截都串起来了。存成 .html 双击打开就能用，前提是浏览器已支持这两个属性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>通知设置</title>
</head>
<body>

<h1>通知设置</h1>

<p>
  <button commandfor="settings" command="show-modal" aria-haspopup="dialog">
    打开设置
  </button>
</p>

<dialog id="settings" closedby="closerequest">
  <form method="dialog" id="settings-form">
    <h2>通知方式</h2>

    <p>
      <label>
        <input type="checkbox" name="email" checked>
        邮件通知
      </label>
    </p>

    <p>
      <label>
        <input type="checkbox" name="sms">
        短信通知
      </label>
    </p>

    <p>
      <button type="button" value="cancel" commandfor="settings" command="request-close">
        取消
      </button>
      <button type="submit" value="save">
        保存
      </button>
    </p>
  </form>
</dialog>

<p>
  <button commandfor="tip" command="toggle-popover" aria-haspopup="true">
    为什么要有这个开关？
  </button>
</p>

<div id="tip" popover>
  <p>关闭全部通知后，系统仍会发送安全相关的邮件。</p>
  <button commandfor="tip" command="hide-popover">知道了</button>
</div>

<script>
  const dialog = document.getElementById('settings');
  const form = document.getElementById('settings-form');
  let dirty = false;

  form.addEventListener('change', () => {
    dirty = true;
  });

  dialog.addEventListener('cancel', (event) => {
    if (!dirty) return;
    event.preventDefault();
    console.log('有未保存的修改，已阻止关闭');
  });

  dialog.addEventListener('close', () => {
    if (dialog.returnValue === 'save') {
      const data = new FormData(form);
      console.log('保存:', {
        email: data.get('email') !== null,
        sms: data.get('sms') !== null
      });
    }
    dirty = false;
  });
</script>

</body>
</html>

试着勾选一个选项，再点”取消”或者按 Esc，控制台会打印拦截日志。不勾选任何东西直接关，就正常关闭——这就是 request-close 配合 cancel 事件的完整闭环。

整个页面里，打开、关闭、切换浮层的逻辑全部由 HTML 属性完成，JavaScript 只用在了两件真正需要判断的事情上：脏数据检查和保存。这才是我觉得这两个属性最有价值的地方——它没有消灭 JavaScript，只是把那些机械的、每次都要重写一遍的接线工作收了回去。