主要观点:按钮对动态网页应用很重要,传统构建按钮行为方式有挑战,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) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。