contextmenu事件本身不支持直接基于上下文调用组件，必须由自定义元素通过js主动监听、判断、注入和管理；html的contextmenu属性在chrome/edge中已被屏蔽，仅firefox保持较好支持。
contextmenu 事件本身不支持直接“基于上下文调用组件”，它只负责拦截右键动作；真正实现上下文感知的组件调用，必须靠自定义元素主动监听、判断、注入和管理——不是靠 HTML 属性自动绑定，而是靠 JS 主动决策。
为什么 contextmenu 属性 + <menu></menu> 标签走不通
很多人试图写 <my-table contextmenu="table-menu"></my-table> 配合 <menu id="table-menu" type="context"></menu>，但实际几乎不可靠：
Chrome/Edge 自 2023 年起默认屏蔽非用户手势触发的菜单绑定；<menu></menu> 必须在 DOM 中可见且未被 display: none 或 visibility: hidden 隐藏，否则浏览器直接忽略；
Firefox 是目前唯一对 contextmenu 属性保持较完整支持的浏览器，其余环境基本失效。
customElements.define() 后如何响应右键并动态挂载组件
核心是把右键事件当作“上下文触发信号”，由自定义元素自己决定渲染哪个子组件、传什么数据、插到哪。关键不在菜单本身，而在事件处理逻辑里做判断：
- 目标元素必须可聚焦：给宿主元素加
tabindex="0"，确保contextmenu在所有主流浏览器（包括 iOS Safari）都能稳定触发 - 监听要写在
connectedCallback里，而不是靠内联oncontextmenu—— 否则无法访问this实例状态 - 阻止默认行为必须同步：
event.preventDefault()不能放在异步回调或 Promise 里，否则菜单仍会弹出原生项 - 坐标定位要结合视口与菜单尺寸：用
event.clientX/event.clientY获取点击点，再减去menu.offsetWidth/menu.offsetHeight避免超出屏幕
如何让自定义菜单组件真正“参与上下文”
所谓“上下文”，本质是当前被点击元素的业务状态（比如某行数据的 id、类型、权限）。不能靠全局变量传递，而应通过 attachInternals() 或自定义属性桥接：
- 在触发
contextmenu时，把当前上下文存为临时属性：this.setAttribute('data-context-id', row.id) - 动态创建菜单组件：
const menu = document.createElement('context-menu')，然后menu.contextData = this.contextData（需在类中定义 setter） - 菜单组件内部通过
attributeChangedCallback监听data-context-id变化，并更新内部<slot></slot>或渲染逻辑 - 务必在菜单关闭后清理事件监听器和 DOM 节点，否则内存泄漏——尤其当菜单是
shadowRoot内部创建时，disconnectedCallback不会自动触发
Shadow DOM 下的上下文穿透难点
如果自定义元素用了 this.attachShadow({ mode: 'open' })，那么外部 contextmenu 事件默认不会冒泡进影子根——你得手动在 shadow host 上监听并转发：
- 不能只监听宿主元素的
contextmenu，因为影子根内的子元素（如<td>）右键不会触发宿主事件 <li>正确做法：在 <code>shadowRoot上监听contextmenu，然后用event.composedPath()[0]找到原始点击目标，再提取其数据属性 - 菜单容器如果也建在 shadowRoot 内，样式隔离没问题，但若想复用同一套菜单组件（比如全站统一
<global-context-menu></global-context-menu>），就得用document.body.appendChild(menu)，并手动管理z-index和 focus 状态
真正难的不是做出一个右键菜单，而是让每个菜单项的行为能准确反映当前点击位置所代表的语义——这需要你在
contextmenu 回调里做足够细的 DOM 查询和状态提取，而不是依赖 HTML 属性自动映射。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
