<menu type="context"> 仅作语义声明，不渲染、无样式、不触发默认行为，必须配合 JavaScript 监听 contextmenu 事件并手动创建带样式的 DOM（如 <div> 或 <ul>）才能实现可交互右键菜单。
menu标签的type="context"不能定义样式
HTML <menu> 标签的 type="context" 仅用于声明该菜单为上下文菜单（右键菜单），它本身不提供任何样式控制能力，浏览器也不会渲染它——它只是个语义容器，必须配合 JavaScript 才能显示。
常见错误是直接写 <menu type="context"><li>复制</li></menu> 然后期待它自动出现在右键菜单里，结果什么都不会发生。这是因为：type="context" 不触发默认行为，也不支持 CSS 伪类（如 ::context-menu）或直接样式绑定。
真正生效的上下文菜单必须用 JS + contextmenu 事件
要实现可交互、可样式的上下文菜单，得靠监听 contextmenu 事件，动态创建并定位一个 <div> 或 <ul> 元素，再用 CSS 控制外观。
-
event.preventDefault()必须调用，否则会弹出浏览器原生右键菜单 - 菜单元素需用
position: absolute+left/top定位到鼠标坐标（推荐用event.clientX/event.clientY） - 菜单结构建议用
<ul>而非<menu>，兼容性和样式控制更可靠 - 记得在菜单外点击时销毁它（监听
document.click并移除节点）
menu[type="toolbar"] 是唯一支持样式且被广泛支持的 type 值
目前只有 type="toolbar" 在部分浏览器中保留了有限的默认样式（比如横向排列），但依然不推荐依赖它做 UI。现代开发中，<menu type="toolbar"> 几乎等价于 <nav> 或自定义 <div>，所有样式都得手动写 CSS。
立即学习“前端免费学习笔记（深入）”；
注意：type="context" 和 type="toolbar" 都已被 HTML 标准标记为“过时（obsolete）”，W3C 明确建议用其他语义化元素替代。Chrome/Firefox 对 <menu> 的支持仅限于解析，不提供额外渲染逻辑或 API。
想快速实现带样式的右键菜单？别碰 <menu>
直接放弃 <menu type="context">，改用轻量级方案：
- 用
<div class="context-menu">包裹菜单项，CSS 控制圆角、阴影、hover 背景等 - 通过
data-action属性绑定行为，避免内联onclick - 如果项目用 React/Vue，封装成组件时注意处理
ref定位和事件委托 - 移动端慎用：contextmenu 事件在 iOS Safari 和部分 Android 浏览器中不可靠，需降级为长按触发
真正容易被忽略的是：浏览器根本不读取 <menu type="context"> 的内容来构建右键菜单，它不是 <select> 那种有默认 UI 的元素——这个认知偏差会让很多人卡在“写了却没反应”的死循环里。
