Some call them the lifecycle methods of elements which I think is an apt description.

I am trying to implements this usecase (a generic lazy loader component which forwards slots/events to the "real" component).

Or just watch the value with a reactive statement instead of an event handler on the input like: $: inputValue, onInput() This is a good solution and seems to work in all cases.

What I think is happening is that instantiating the component is immediately running the $: reactive code, which dispatches the event synchronously, before the parent component attaches the listener.

And this way also fits more with data down, actions up.

So you might ask what is the benefit of using the event dispatcher over just passing a prop down? In some scenarios, you will need to add an action to a button that is 3 or more components down and passing a prop all that way is considered prop drilling (it is frowned upon by some, meh each to their own). However in the case of using an event dispatcher, even though these events don’t bubble, we can easily pass them up using a shortcut that Svelte has.

Depending on what other component libraries you’ve used, you may be used to handling events by passing callback functions to component properties, or using a special event syntax – Svelte supports both, though one is usually more appropriate than the other depending on your situation. This post explains both ways.

All standard UI events are forwarded.

For event listeners we support the standard jsx naming convention onEventname (this is converted to on:eventname in svelte) as well.

As we've briefly seen already, you can listen to any event on an element with the on: directive:

Unlike DOM events, component events don't bubble. If you want to listen to an event on some deeply nested component, the intermediate components must forward

Part of the functionality that is returned are event handlers. I'd like to avoid needing to manually copy the events over one by one so the hook implementation details are hidden.

Forwarding events from the native element through the wrapper element comes with a cost, so to avoid adding extra event handlers only a few are forwarded. For all elements except <br> and <hr>, on:focus, on:blur, on:keypress, and on:click are forwarded. For audio and video, on:pause and on:play are also forwarded.