$host
Lorsque vous compilez un composant en tant que élément personnalisé, la rune $host fournit un
accès à l’élément hôte, vous permettant (par exemple) de générer des évènements personnalisés
(démo).
Stepper
<svelte:options customElement="my-stepper" />
<script>
function dispatch(type) {
$host().dispatchEvent(new CustomEvent(type));
}
</script>
<button onclick={() => dispatch('decrement')}>décrémenter</button>
<button onclick={() => dispatch('increment')}>incrémenter</button><svelte:options customElement="my-stepper" />
<script lang="ts">
function dispatch(type) {
$host().dispatchEvent(new CustomEvent(type));
}
</script>
<button onclick={() => dispatch('decrement')}>décrémenter</button>
<button onclick={() => dispatch('increment')}>incrémenter</button>App
<script>
import './Stepper.svelte';
let count = $state(0);
</script>
<my-stepper
ondecrement={() => count -= 1}
onincrement={() => count += 1}
></my-stepper>
<p>compte : {count}</p><script lang="ts">
import './Stepper.svelte';
let count = $state(0);
</script>
<my-stepper
ondecrement={() => count -= 1}
onincrement={() => count += 1}
></my-stepper>
<p>compte : {count}</p>Modifier cette page sur Github
précédent suivant