From 435a85432a1696e02ac05dc92b0c9181e092b588 Mon Sep 17 00:00:00 2001
From: Scott <sw@scottwu.ca>
Date: Tue, 5 Nov 2024 10:13:14 -0800
Subject: [PATCH 1/3] add an example for `SvelteHTMLElements`

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

diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index 5e16382187ac..c31ed117ebe5 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -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.

From a18fd9ba91d60adb166c23d7044be035347b3571 Mon Sep 17 00:00:00 2001
From: Scott Wu <sw@scottwu.ca>
Date: Wed, 6 Nov 2024 02:29:07 +0800
Subject: [PATCH 2/3] fix grammar

---
 documentation/docs/07-misc/03-typescript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index c31ed117ebe5..6e721073fe52 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">

From 6250591c9ed2cadcc79a5d3d8f3493bf364c937a Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 6 Nov 2024 17:32:04 +0100
Subject: [PATCH 3/3] Update documentation/docs/07-misc/03-typescript.md

---
 documentation/docs/07-misc/03-typescript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index 6e721073fe52..9e4297b2757e 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -152,7 +152,7 @@ Not all elements have a specific type definition, in those cases, use `SvelteHTM
 <script lang="ts">
 	import type { SvelteHTMLElements } from 'svelte/elements';
 
-	let { children, ...rest }:  SvelteHTMLElements['div'] = $props();
+	let { children, ...rest }: SvelteHTMLElements['div'] = $props();
 </script>
 
 <div {...rest}>