$host

При компиляции компонента в качестве пользовательского элемента руна $host предоставляет доступ к элементу-хосту, что позволяет вам (например) отправлять пользовательские события (демонстрация):

JS

// Stepper.svelte
<svelte:options customElement="my-stepper" />

<script>
  function dispatch(type) {
    $host().dispatchEvent(new CustomEvent(type));
  }
</script>

<button onclick={() => dispatch('decrement')}>уменьшить</button>
<button onclick={() => dispatch('increment')}>увеличить</button>

TS

// Stepper.svelte
<svelte:options customElement="my-stepper" />

<script lang="ts">
  function dispatch(type) {
    $host().dispatchEvent(new CustomEvent(type));
  }
</script>

<button onclick={() => dispatch('decrement')}>уменьшить</button>
<button onclick={() => dispatch('increment')}>увеличить</button>

JS

// App.svelte
<script>
  import './Stepper.svelte';

  let count = $state(0);
</script>

<my-stepper
  ondecrement={() => count -= 1}
  onincrement={() => count += 1}
></my-stepper>

<p>count: {count}</p>

TS

// App.svelte
<script lang="ts">
  import './Stepper.svelte';

  let count = $state(0);
</script>

<my-stepper
  ondecrement={() => count -= 1}
  onincrement={() => count += 1}
></my-stepper>

<p>count: {count}</p>