Y a-t-il un moyen pratique de référencer un élément DOM dans les composants Svelte?

Question

Je suis habitué aux libs/frameworks comme React ou Angular qui ont tous les deux des façons pratiques d'accéder aux éléments DOM réels qui appartiennent à des composants logiques. React a l'utilitaire createRef et Angular a, entre autres choses, les variables de modèle en combinaison avec par exemple @ViewChild.

Ces références permettent non seulement d'accéder facilement au DOM sans interroger explicitement les éléments à chaque fois, mais elles restent également à jour avec le DOM de sorte qu'elles tiennent toujours référence à l'élément actuel. Je viens de commencer avec Svelte pour mon projet personnel mais bien que j'aie lu toute la documentation de Svelte et recherché beaucoup sur Google, je n'ai rien trouvé de similaire en concept et en utilisation. Je suppose que cela pourrait avoir quelque chose à voir avec le concept sans exécution de Svelte, mais je ne sais toujours pas pourquoi il n'y aurait pas un tel utilitaire.

Alors la question est, y a-t-il un utilitaire similaire dans Svelte ?

Answer 1

Basé sur l'exemple trouvé sur https://svelte.dev/tutorial/bind-this (merci à @skyboyer), vous pouvez utiliser bind:this (essayez dans REPL):

    import { onMount } from 'svelte';

    let myInput;

    onMount(() => {
        myInput.value = 'Bonjour le monde!';
    });

Vous pouvez également utiliser use:action, comme vu sur https://svelte.dev/docs#use_action et suggéré par @collardeau (essayez dans REPL):

    import { onMount } from 'svelte';

    let myInput;

    function MyInput (node) {
        myInput = node;
        myInput.value = 'Bonjour le monde!';
    }