Как охватить querySelector для компонента в Svelte?

Question

У меня есть этот компонент, и я хотел бы сделать некоторые манипуляции с его дочерними элементами способами, которые не осуществимы управляемым состоянием способом. Поэтому я хотел бы использовать заявление и querySelector в нем. Но как я могу охватить это элементом? На странице имеется несколько экземпляров компонента, поэтому класс или идентификатор невозможны. Как мне этого добиться?

Вот упрощенный код:

    <script>
      export let value = ''
      export let readonly = true

      $: if (value && !readonly){
      // selects the first element in the document, not the one from this instance 
      const nd = document.querySelector('.forminput')
      // Do something with nd
    }
   </script>

    <textarea bind:value wrap="soft" rows="1" class="forminput"></textarea>

Answer 1

Вы можете использовать bind:this, чтобы назначить элемент переменной

<script>
   let wrapper;
</script>

<div bind:this="{wrapper}"></div>

, теперь вы можете использовать wrapper, как если бы вы получили его из querySelector