menuitem 标签在2026年已无实际部署价值，Chrome 80、Firefox 81起移除支持，Safari从未完整实现，浏览器忽略其交互与渲染；应改用 role="menu"/"menuitem" 的自定义菜单方案。
menuitem 标签在当前（2026年）的 HTML 生态中，**不具备实际部署价值**。它不是“可用但冷门”，而是被主流浏览器弃用、规范标记为实验性、且无稳定渲染行为的标签。
Chrome/Firefox/Safari 已移除对 menuitem 的支持
自 Chrome 80、Firefox 81 起，menuitem 元素不再被解析为可交互菜单项；Safari 从未实现完整支持。即使你写出了合法的 HTML 结构：
<button contextmenu="ctx">右键试试</button> <menu type="context" id="ctx"> <menuitem label="复制" onclick="copy()"> </menu>
浏览器会忽略 menuitem，不触发点击、不响应 checked、不显示图标或快捷键提示。DevTools 中该元素可能被渲染为普通空节点，或直接丢弃。
contextmenu 事件 + document.execCommand 替代方案已过时，应改用 CustomEvent + menu 元素模拟
想实现右键菜单，别再依赖原生 menu/menuitem。正确路径是：
立即学习“前端免费学习笔记（深入）”；
- 监听
contextmenu事件，preventDefault()阻止默认右键菜单 - 动态创建一个带
role="menu"的<div> 或 <code><ul></ul>，每个菜单项用<li role="menuitem">包裹 - 用
aria-checked、aria-disabled等 ARIA 属性控制状态，而非menuitem的原生属性 - 键盘导航需手动绑定
ArrowDown/Escape等事件，menuitem不会自动提供这些能力
示例关键逻辑：
document.addEventListener('contextmenu', e => {
e.preventDefault();
const menu = document.getElementById('custom-menu');
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
menu.hidden = false;
menu.querySelector('[role="menuitem"]').focus(); // 启动键盘焦点流
});
type="checkbox" 和 type="radio" 在 menuitem 中从未跨浏览器一致工作
即便在早期 Firefox 支持阶段，<menuitem type="checkbox" checked></menuitem> 的视觉反馈也仅限于文字前加勾，不渲染真实复选框；radiogroup 属性无法触发组内互斥逻辑；icon 属性被完全忽略。这些不是“配置错误”，而是规范未定义渲染方式，浏览器选择不做实现。
真正需要状态切换菜单项时，应使用：
- 自定义
<button role="menuitemcheckbox"></button>+ 手动 togglearia-checked - 封装成 Web Component，内部管理 checked 状态与样式同步
- 避免依赖
menuitem的任何布尔属性（checked、disabled），它们在 DOM 中存在，但不会影响行为
最易被忽略的一点：即使你在 Electron 或旧版 NW.js 中看到 menuitem “能用”，那也是框架层自己解析 HTML 模板后转为原生菜单 API（如 new MenuItem({ type: 'checkbox' })），和浏览器引擎无关。把它当 HTML 标签写进网页里，就等于没写。
