HTML Invoker Commands API已在所有主流浏览器中得到了基本支持。Safari 26.2在Chrome 135和Firefox 144之后也完成了对该API的适配。这一功能引入了声明式按钮控件,使得在处理弹出窗口、对话框等交互元素时无需使用JavaScript。
Invoker Commands API为按钮元素添加了两个新属性:commandfor和command。commandfor属性用于指定需要控制的元素的ID,而command属性则指定了要执行的操作。这种声明式设计方式让开发者无需编写事件监听器,也不必等待JavaScript代码下载并执行,从而显著提升了页面的交互性能。
内置的命令支持对弹出窗口和对话框进行常见的操作。对于弹出窗口,开发者可以使用toggle-popover、show-popover和hide-popover这些命令;而对于对话框,则支持show-modal和close命令。下面是一个使用声明式方式实现弹出窗口的示例:
<button commandfor="mypopover" command="toggle-popover">
切换弹出窗口的状态
</button>
<div id="mypopover" popover>
<button commandfor="mypopover" command="hide-popover">>关闭</button> 弹出窗口内容 <>/div>
该API还支持自定义命令,这些自定义命令的前缀必须包含两个连字符,这与CSS中的自定义属性规则相同。开发者可以通过command事件来监听这些自定义命令,并通过事件对象中的命令名称来执行相应的操作。这样一来,组件开发者就可以为他们的Web组件创建声明式的API接口,而无需用户编写JavaScript代码。
一篇发表在Medium上的文章将这一API称为“你还没有使用的最酷的API”,并表达了这样的观点:通过使用Invoker Commands API,你的按钮可以在不依赖JavaScript的情况下真正执行各种操作。
开发者Pawel Grzybek在一篇文章中指出:每当Web技术出现新的功能,使我们能够将某些代码的实现位置向上移动时,我都会感到非常兴奋。
他将这一API描述为“将按钮点击处理函数的实现部分移到了HTML层面上”。
另外,CSS-Tricks也指出,自定义命令实际上依赖于HTML属性来处理事件,但他们认为这种做法可能存在争议(甚至可以说是非常不妥的),因为使用HTML属性来处理事件通常被视为不良的开发习惯。
对于目前还在使用popovertarget和popovertargetaction属性的开发者来说,Invoker Commands API提供了一种更为统一的方式来处理这些功能。现在,弹出窗口既可以继续使用原有的专门针对弹出窗口设计的属性,也可以使用新的command和commandfor属性,从而实现逐步过渡。
与HTMX这样的库相比,后者通过自定义属性提供了声明式控制功能,而Invoker Commands则具备与原生平台功能相似的功能。Open UI的解释文档指出,虽然该功能的初始版本主要针对弹出窗口和对话框进行了设计,但对
