Click events are registered twice when two leptos custom elements are on a page

[SorenHolstHansen]

Describe the bug
You can find a repro case here.

I have defined two web components using your custom-elements crate with leptos as the component framework. The components are very simple to show the bug and are just a button with a click handler. However when embedding both on a site, whenever clicking one of the buttons, two click events are registered (See the video in the repro repo).

If I tried to add the buttons in raw "js", that is, through web-sys with add_event_listener; then only one click event is registered which leads me to think this is a Leptos problem.

You can see a video of the issue here:

Screen.Recording.2024-04-28.at.23.55.58.mov

I hope it makes sense, please tell me if this belongs in the custom-elements repo instead.

Leptos Dependencies

leptos = { version = "0.6.11", features = ["csr"] }

To Reproduce
Steps to reproduce the behavior:

1. See https://github.com/SorenHolstHansen/leptos-custom-elements-double-click

Expected behavior
I would expect only one click event being sent when clicking the button

[gbj]

If you opt out of event delegation by using on:click:undelegated does it work as expected? (I have not tried)

[SorenHolstHansen]

Yeah, that seems to fix it, thanks! Is there some way to do this simpler? I am not the biggest fan of having to put that flag on all event handlers

[SorenHolstHansen]

I tried merging the two components into one crate, so the "run" function defines both custom components, and that seemed to fix the issue as well