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

[gbj]

So for the sake of clarity/closing this one out: There are several issues here interacting to cause this problem.

1. Leptos uses event delegation by default, which means that on: events are delegated to the window. When an event fires, the framework manually finds the correct listener on an actual element. The framework also keeps track of which events it has already created listeners for on the window, precisely so that it does not add multiple click listeners to window, for example, each of which calls the listener multiple timess.
2. However, you were defining the two components in separate crates. Essentially, you were shipping multiple copies of Leptos the framework itself, each of which was running independently of the other. So each one thought it had not added a click event handler to window yet. However, each one added a separate listener, which meant the click handler was called twice.

0.7 (which is the main branch now) makes delegation opt-in — event delegation has generated enough minor confusion in edge cases over time that it's worth making it an opt-in feature rather than the default IMO.

In general, I would also suggest that merging the components into one crate/one WASM binary is always preferable, if it is at all possible; otherwise you end up shipping much more code to the client. i.e., say the binary size of Leptos the framework is K, and the cost of your two components are A and B. If you compile the two crates separately, you are shipping A + B + 2K to the client, as opposed to A + B + K.

[SorenHolstHansen]

Thanks for the write-up! Just a quick follow up, then.

Is it a bad idea to split your leptos app in multiple libs, say one for ui, one for the main app, and so on? I.e. are we adding multiple leptos "instances" on top of each other? Or is that just the case for wasm?

@gbj