ContextMenu can only be used on the whole page

[NyxCode]

Currently, ContextMenu can only be used on the whole page.
Sadly, this is pretty limiting - I'd like to use it only on an element on my page.

Could ContextMenu be split into a dumb sub-component which doesn't listen for events itself?
I would like to just give it x, y as props and handle everything else myself.

[metonym]

I agree that there should be an option to use it on an arbitrary element.

I think that adding a target prop (HTMLElement) to ContextMenu would be a good approach. The default would still be the window.

[NyxCode]

I guess that would work for most cases, but I'm not sure that would be flexible enough.
At least for my usecase, I need to have a context menu for a lot of elements, and I wouldn't want a seperate ContextMenu for every one of them.

I think this would be a sane change for ContextMenu, but I still believe that something like ContextMenuInner (#622) would be great for more compilcated usecases.

[geoidesic]

Should just be called Menu if it can only be used on the whole page. The whole point of adding the word "Context" before the word "Menu" in the name is, well.. for a menu that differs by context, i.e. different menu depending on which element you click on. Boggles the mind how we've arrived at a ContextMenu that is contextless! :)

[Trystan-SA]

I also don't understand why ContextMenu is indeed not contextualized based on what item you right-click. Please at least populate the passed on:open forwarded event with a reference to the DOM element we have the cursor over.

<ContextMenu on:open={(...e)=>{console.log(e); }}>
   <ContextMenuOption indented labelText="Copy"/>
   <ContextMenuOption indented kind="danger" labelText="Delete" />
</ContextMenu>

is currently returning this :

[metonym]

In version 0.50, you can now pass custom elements as trigger targets to ContextMenu

Example: https://carbon-components-svelte.onrender.com/components/ContextMenu#custom-target

@Trystan-SA The event.target is passed to the on:open event detail as well.

<ContextMenu on:open={(e) => {
  console.log(e.detail); // HTMLElement
}}>
  ...
</ContextMenu>

[geoidesic]

@metonym Does this mean that this PR is no longer needed? #622