Svelte 5 での Native HTML element attributes の付け方

Svelteで Button componentなど作成する際に HTMLが提供している attributes をpropsで渡せるようにしたい時があります。Svelte 5 で Rune を使用した場合の方法のおさらいです。

今までの方法

interface $$Props extends HTMLAttributes<HTMLButtonElement>{} のように interface を定義する必要がありました。下記がサンプルコードです。

<script lang="ts">
	import type { HTMLAttributes } from 'svelte/elements';

	interface $$Props extends HTMLAttributes<HTMLButtonElement> {
		customProp: boolean;
	}

	export let customProp: boolean;
</script>

<button {...$$props}>
	{customProp}
</button>

Svelte 5 でのやり方

新しいやり方では Props type を定義して $props() の返り値のオブジェクトに型定義をくっつけるだけで大丈夫です。より直感的になりましたね。

<script lang="ts">
	import type { HTMLAttributes } from 'svelte/elements';

	type Props = {
		customProp: boolean;
	} & HTMLAttributes<HTMLButtonElement>;

	const { customProp, ...restProps }: Props = $props();
</script>

<button {...restProps}>
	{customProp}
</button>

Svelte 5 の Rune は賛否両論ありますが、実際使用するとり便利さを感じてきます。