主要观点:按钮对动态网页应用很重要,传统构建按钮行为方式有挑战,Chrome 135 引入新command
和commandfor
属性可改善按钮相关问题。
关键信息:
- 传统方式需处理
aria-expanded
等,不同框架有不同模式,如 React、AlpineJS、Svelte 等。 command
和commandfor
可声明式执行其他元素操作,完全替代popovertargetaction
和popovertarget
。command
有内置行为如show-popover
等,可映射到相应 JavaScript 方法并优化无障碍等。- 可定义自定义命令
--
前缀,可跨 ShadowDOM 用 JavaScript API 设置.commandForElement
。 - 未来将继续探索新内置命令,欢迎社区提建议。
重要细节: - 传统代码示例展示不同框架下处理按钮与弹出框交互的方式。
- 新属性使用示例,如打开菜单按钮和确认对话框示例。
- 自定义命令示例及相关 JavaScript 处理。
- ShadowDOM 中
commandfor
属性的限制及跨根设置方法。 - 未来探索的新内置命令方向及相关提议。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。