HTML Invoker Commands 在所有主流浏览器中实现基础支持
随着 Safari 26.2 完成上线，HTML Invoker Commands API已在所有主流浏览器中实现基础支持；此前该特性已在 Chrome 135 和 Firefox 144 中发布。该特性引入了一种声明式的按钮控制方式，在使用 popover、dialog 等交互元素时无需再依赖 JavaScript。 Invoker Commands API 为 内置命令覆盖了 popover 和 dialog 的常见操作。对于 popover，可使用 该 API 还支持自定义命令，自定义命令必须以两个短横线开头，类似于 CSS 自定义属性。开发者可以通过监听 一篇 Medium 文章将该 API 形容为“你还没用上的最酷 API”，并表示 invoker 终于让按钮在没有 JavaScript 的情况下真正“干点事情”。 开发者 Pawel Grzybek 也指出，每当 Web 引入能让实现逻辑向技术栈上游迁移的新特性时，他都会感到兴奋，并认为这个 API 本质上是将按钮点击处理逻辑前移到了 HTML 层。 另一方面，CSS-Tricks 也提到，自定义命令依赖于事件处理型 HTML 属性，而这种方式“多少有点（甚至可以说非常）有争议”，因为使用 HTML 事件处理属性通常被认为是一种不佳实践。 对于目前正在使用 与HTMX等通过自定义属性提供声明式控制能力的库相比，Invoker Commands 以原生平台特性的形式提供了类似能力。Open UI 的说明文档指出，当前版本主要聚焦于 popover 和 dialog，对 Invoker Commands API 定义于 WHATWG HTML 规范中，体现了 Web 平台持续减少对 JavaScript 依赖、简化常见交互模式的努力。通过允许开发者以声明式方式构建交互组件，该 API 不仅提升了开发体验，也通过更快的首屏加载和更具可访问性的标记结构改善了用户体验。 原文链接：button元素新增了两个属性：commandfor和command。其中，commandfor用于指定被控制元素的 ID，而command用于定义要执行的操作。通过这种声明式方式，开发者可以在不编写事件监听器、也无需等待 JavaScript 下载和执行的情况下创建交互组件，从而提升页面初始交互性。toggle-popover、show-popover和hide-popover命令；对于 dialog，则支持show-modal和close命令。下面是一个使用声明式方式实现 popover 的示例：<button commandfor="mypopover" command="toggle-popover"> Toggle the popover</button><div id="mypopover" popover> <button commandfor="mypopover" command="hide-popover">Close</button> Popover content</div>command事件，并在事件对象中检查命令名称来处理这些自定义命令。这使得组件作者能够为 Web Components 提供声明式 API，而无需组件使用者编写 JavaScript。popovertarget和popovertargetaction属性的开发者来说，Invoker Commands API 提供了一种更统一的方案。Popover 现在既可以继续使用原有的专用属性，也可以使用新的command和commandfor属性，从而支持渐进式迁移。