docs: `SvelteHTMLElements` can be used for creating component wrapper (#14162)

pull/14191/head
Scott 1 week ago committed by GitHub
parent 9b2a8f15fb
commit 26d109cb11
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -132,7 +132,7 @@ The content of `generics` is what you would put between the `<...>` tags of a ge
## Typing wrapper components ## Typing wrapper components
In case you're writing a component that wraps a native element, you may want to expose all the attributes of underlying element to the user. In that case, use (or extend from) one of the interfaces provided by `svelte/elements`. Here's an example for a `Button` component: In case you're writing a component that wraps a native element, you may want to expose all the attributes of the underlying element to the user. In that case, use (or extend from) one of the interfaces provided by `svelte/elements`. Here's an example for a `Button` component:
```svelte ```svelte
<script lang="ts"> <script lang="ts">
@ -146,6 +146,20 @@ In case you're writing a component that wraps a native element, you may want to
</button> </button>
``` ```
Not all elements have a specific type definition, in those cases, use `SvelteHTMLElements`:
```svelte
<script lang="ts">
import type { SvelteHTMLElements } from 'svelte/elements';
let { children, ...rest }: SvelteHTMLElements['div'] = $props();
</script>
<div {...rest}>
{@render children()}
</div>
```
## Typing `$state` ## Typing `$state`
You can type `$state` like any other variable. You can type `$state` like any other variable.

Loading…
Cancel
Save