◆ Firefox だけ使える
◆ menu と menuitem タグ
◆ whatwg のスペックにも載ってる 
少し前に右クリックメニューを自作するっていう記事を見かけました

自作だと本来の機能が使えなくなるのが不便なんですよね
拡張機能で追加した機能とか devtools でカーソルのある要素をフォーカスするとか

なので自分で右クリックメニューを作るときは右クリック時に Shift キーを押してると独自の右クリックメニューじゃなくデフォルトのメニューを出すようにしたり工夫しています

一番いいのはデフォルト右クリックメニューにページで定義したものを追加できることです

そういえば昔 Firefox 限定でしたがページ内で右クリックメニューに項目を追加できるものがありました
しばらく見ていないのでどうなってるのか気になったので調べてみました

menuitem

menu と menuitem を使って右クリックメニューをカスタムできます
<p contextmenu="p-contextmenu">p</p>
<menu type="context" id="p-contextmenu">
<menuitem id="pmenu" label="p contextmenu"></menuitem>
</menu>

のように menu を定義して中に項目を menuitem で書きます
menu には type 属性があり toolbar か context を指定します
右クリックメニューを追加するなら context です

右クリックメニューをつけたい要素の contextmenu 属性で menu の id を指定します
label の for みたいな感じです

サンプル

DEMO
<p contextmenu="p-contextmenu">p</p>

<menu type="context" id="contextmenu">
<menuitem label="menuitem1"></menuitem>
<menuitem label="menuitem2"></menuitem>
<menu label="menuitem3">
<menuitem label="menuitem3-1"></menuitem>
<menuitem label="menuitem3-2"></menuitem>
</menu>
</menu>
<menu type="context" id="p-contextmenu">
<menuitem id="pmenu" label="p contextmenu"></menuitem>
</menu>

<script>
document.documentElement.setAttribute("contextmenu", "contextmenu")

document.querySelector("#contextmenu").onclick = eve => console.log("click", eve.target.label)
document.querySelector("#pmenu").onclick = eve => console.log("p")
</script>

menuitem01
menuitem02

menu の中に menu をネストすることでグループ化した menuitem を作れます
各ボタンが押されたことは普通に onclick にリスナを設定します
それぞれの menuitem につけてもいいですし menu タグにリスナをつけてまとめて受け取ることもできます

DOM には contextMenu プロパティがありますが readonly で ここに menu 要素を代入しても効果ありませんでした
setAttribute で属性を設定すればできました
contextMenu の setter も作って欲しいです

p は html の内側にありますが p の中では html の右クリックメニューは出ませんでした
継承はしないようです


menuitem は最新の WHATWG に載ってるので廃止されたわけでもなく今後使えるようになってくる機能のようです
Chrome でも使えるようになれば実質使えると言って良いものになるので早く対応してくれるといいですね

whatwg HTML Standard