Получение DOM-Node через bind:this в компоненте

Необходимо получить ноду DOM, пытаюсь это реализовать через bind:this, но я использую компоненты и вместо dom получаю сам компонент.

pin.svelte:

<!-- Тут я пытаюсь получить DOM компонента -->
<script lang="ts">
    import { cn } from '$lib/utils';
    import { Input } from './ui/input';

    let className: string | undefined | null = undefined;
    export { className as class };

    let digits_num: number = 6;
    let inputs: Input[] = [];

    function focusInput(curId: number) {
        console.log(inputs[curId]);
    }
</script>

<div class={cn('flex flex-row space-x-2 py-4', className)} {...$$restProps}>
    {#each Array(digits_num) as _, i}
        <Input
            bind:this={inputs[i]}
            placeholder={i + 1 + ''}
            on:keyup={() => focusInput(i)}
            class="col-span-3 max-w-[35px]"
        />
    {/each}
</div>

input.svelte:


<script lang="ts">
<!-- Сам компонент, DOM которого мне нужно получить -->
    import type { HTMLInputAttributes } from 'svelte/elements';
    import { cn } from '$lib/utils';
    import type { InputEvents } from '.';

    type $$Props = HTMLInputAttributes;
    type $$Events = InputEvents;

    let className: $$Props['class'] = undefined;
    export let value: $$Props['value'] = undefined;
    export { className as class };
</script>

<input
    class={cn(
        'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0  file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
        className
    )}
    bind:value
    on:blur
    on:change
    on:click
    on:focus
    on:keydown
    on:keypress
    on:keyup
    on:mouseover
    on:mouseenter
    on:mouseleave
    on:paste
    on:input
    {...$$restProps}
/>

Ответы (0 шт):