From 26d109cb115507928e944f164ff1da7fdb93f1bd Mon Sep 17 00:00:00 2001
From: Scott <sw@scottwu.ca>
Date: Thu, 7 Nov 2024 00:32:12 +0800
Subject: [PATCH] docs: `SvelteHTMLElements` can be used for creating component
 wrapper (#14162)

---
 documentation/docs/07-misc/03-typescript.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index 5e16382187..9e4297b275 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -132,7 +132,7 @@ The content of `generics` is what you would put between the `<...>` tags of a ge
 
 ## 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
 <script lang="ts">
@@ -146,6 +146,20 @@ In case you're writing a component that wraps a native element, you may want to
 </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`
 
 You can type `$state` like any other variable.