Skip to content

Commit 094ea6d

Browse files
Rich-Harrisgithub-actions[bot]
authored andcommitted
sync svelte docs
1 parent 42cd65f commit 094ea6d

File tree

1 file changed

+15
-1
lines changed

1 file changed

+15
-1
lines changed

apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ The content of `generics` is what you would put between the `<...>` tags of a ge
132132

133133
## Typing wrapper components
134134

135-
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:
135+
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:
136136

137137
```svelte
138138
<script lang="ts">
@@ -146,6 +146,20 @@ In case you're writing a component that wraps a native element, you may want to
146146
</button>
147147
```
148148

149+
Not all elements have a specific type definition, in those cases, use `SvelteHTMLElements`:
150+
151+
```svelte
152+
<script lang="ts">
153+
import type { SvelteHTMLElements } from 'svelte/elements';
154+
155+
let { children, ...rest }: SvelteHTMLElements['div'] = $props();
156+
</script>
157+
158+
<div {...rest}>
159+
{@render children()}
160+
</div>
161+
```
162+
149163
## Typing `$state`
150164

151165
You can type `$state` like any other variable.

0 commit comments

Comments
 (0)