Ways to define a ContextMenu trigger element?

[sledgehammer999]

I am a bit confused. It is entirely possible that I don't fully understand Svelte5 and the bits-ui API.
I am using bits-ui@next for compatibility with Svelte5.

Here is what I want to achieve:
I have a table element in my component. I want to display a ContextMenu when the user right-clicks in the thead section.
If I understand the API examples correctly, I'll need to wrap my thead element in a ContextMenu.Trigger and then continue wrapping with the rest of the menu components (ContextMenu.Root, ContextMenu.Content, ContextMenu.Item).
This will result in a total mess.
Is that how ContextMenu is supposed to work? Is there a way to cut down on the wrapping to not interfere with the rest of the table markup code?

On a semi-related note: This is a part of a hobby project of mine that now I started to transition to Svelte5 and bits-ui. Before this it was Svelte4 and skeleton. This part of the project (aka the context-menu on the thead) was implemented the following way. After the div that contained the table markup, another div followed which contained the "context menu" markup. This div was normally hidden. The right-click handler showed the hidden div and repositioned it under the cursor with the help of the floating-ui library.
Even though this approach is "cleaner" in the way of markup mess, it is full of tedious work and traps (Esc handling, reacting on lost focus, keyboard handling etc).

Having described the above, I guess what I am looking for is for a way to define the contextmenu markup in its own space and somehow tell it to trigger on X element.

I am looking forward to your suggestions.

[huntabyte]

You can use the child snippet to delegate the behavior of the context menu to the thead.

<ContextMenu.Trigger>
	{#snippet child({ props })}
		<thead {...props}>
			<!-- ... -->
		</thead>
	{/snippet}
</ContextMenu.Trigger>

[sledgehammer999]

Hmm, I don't see how this saves me of the trouble of polluting the table markup with the whole ContextMenu markup (Root, Trigger, Content, Item).

And this will get even messier when I want to introduce context menu for "selected" rows in the table.

[huntabyte]

If you're worried about pollution, just create a wrapper component 😃

<table>
	<MyCustomTHead>
		<!-- ... -->
	</MyCustomThead>
</table>

[sledgehammer999]

I just posted a possible solution concurrently with your comment. I'll take into consideration your approach too.
I'll probably reconsider my workflow as I go along fleshing out my table functionality and getting experience in the "Svelte 5" way.

[sledgehammer999]

I have found a working solution for now, but I am not sure how well it will pan out in the future for maintainability.
My solution is closer to the workflow I had already coded with svelte4 and floating-ui.
In that workflow the right-click handler creates a virtual element of type { getBoundingClientRect: () => <some object> } as per floating-ui virtual element docs.
The <some object> essentially fills in the rect from the event variable of the right-click handler aka the mouse position. eg

{
    width: 0,
    height: 0,
    x: event.clientX,
    y: event.clientY,
    top: event.clientY,
    right: event.clientX,
    bottom: event.clientY,
    left: event.clientX
}

So now I pass this virtual element to the customAnchor property of ContextMenu.Content and control the open state of ContextMenu.Root.

Because my code is a mess I'll just outline the workflow.

1. In a separate div after the div that contains the table do your layout with the ContextMenu.
2. Hide that div (display:none; position: absolute;)
3. Register the right-click handler on the thead. Maybe bind:this to get the underlying element for the thead and use it as contextElement in the virtual element of floating-ui.
4. Bind to the open prop of ContextMenu.Root to control the open state of the menu
5. Assign to the customAnchor prop of ContextMenu.Content a reactive variable of virtual element.
6. In the right-click handler update the reactive virtual element with the values from the event parameter, set the open state to true, display: block on the div.

The workflow is rough and probably needs polishing.