Sending DOM reference to parent from child

[karchung0930]

I wanna send the reference of an element to its parent once it's ready ( mounted ).

In Svelte 4, my thought is to use the createEventDispatcher inside the onMount() and receive it in the parent and store it in a variable for later references.

In Svelte 5, may I know what is the best way of doing this?

Child:

<script lang="ts">
    import { onMount } from 'svelte';

    let button: HTMLButtonElement;

    onMount(() => {
            // Send the reference to its parent?
    });
</script>

<button
    bind:this={button}
    type="button"
>
    Hi
</button>

Parent:

<script lang="ts">
    let buttonOfChild;
</script>

<Button />

[brunnerh]

I would just make it a regular (bindable) property. E.g.

<!-- Button.svelte -->
<script>
  let {
    element = $bindable(),
    children,
    ...rest
  } = $props();
</script>

<button bind:this={element} {...rest}>
  {@render children?.()}
</button>

<script>
	import Button from './Button.svelte';

	let element = $state();
</script>

<Button
  bind:element
  type="button"
  onclick={() => alert(element.textContent)}
>
  Hi
</Button>

Playground

The element will be available in the parent onMount, as is the case in the component itself.