mirror of https://github.com/sveltejs/svelte
38 lines
1.2 KiB
38 lines
1.2 KiB
5 months ago
|
---
|
||
|
|
title: $host
|
||
|
|
---
|
||
|
|
|
||
|
|
When compiling a component as a custom element, the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
```svelte
|
||
|
|
/// file: Stepper.svelte
|
||
|
|
<svelte:options customElement="my-stepper" />
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function dispatch(type) {
|
||
|
|
+++$host()+++.dispatchEvent(new CustomEvent(type));
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<button onclick={() => dispatch('decrement')}>decrement</button>
|
||
|
|
<button onclick={() => dispatch('increment')}>increment</button>
|
||
|
|
```
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
```svelte
|
||
|
|
/// file: 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>
|
||
|
|
```
|