Is it possible set event callback on inside a component and outside a component and have callbacks both run?

Question

I want to run two functions: one on:blur inside a component, and one on the component from the outside.

// CustomInput.svelte

<input on:blur={() => console.log(1)} />

// App.svelte
import CustomInput from "./CustomInput.svelte";

<CustomInput on:blur={() => console.log(2)} />

When the blur event is triggered 1 is logged in the console. Is there a way to run both callbacks and get 1 and 2 logged in the console?

Answer 1

You can forward the event in addition to handling it:

<input on:blur={() => console.log(1)} on:blur />