False positive TypeScript error when spreading attributes on div HTML element

[kwangure]

Describe the bug

There's a type mismatch between the <div> element type and HTMLAttributes<HTMLDivElement>

Reproduction

Type this into a Svelte file in VS Code. Notice the error on the spread of restProps on the <div>.

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

	const { children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
</script>

<div {...restProps}>
	{@render children?.()}
</div>

I've encountered a few issues related to spreading of props. Most are fairly simple to work around by just Omit<>ing the offending attribute and typing it correctly. As a catch all, it might be a good idea to create a TypeScript test for all of the elements in import('svelte/element').SvelteHTMLElements.

Logs

Types of property 'hidden' are incompatible.
      Type 'boolean | "" | "until-found" | null | undefined' is not assignable to type 'boolean | null | undefined'.
        Type '""' is not assignable to type 'boolean | null | undefined'.ts(2345)

System Info

Svelte: ^5.1.3 => 5.1.3

Severity

annoyance

[webJose]

This doesn't seem to be reproducible anymore in v5.16.0.

[RoryDuncan]

Heya, I believe this is an issue in svelte@4.2.19, as well.
I can't test in REPL, but my tsconfig has very few differences from the basic sveltekit-generated one.

Example of encountered errors

Here are a couple of the type errors I came across while tinkering. Order in which the variable is spread onto the element appears to matter, sometimes.

<script lang="ts">
	import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
	let name = 'world';

	let buttonProps: Partial<HTMLButtonAttributes> = {};
</script>

<h1>Hello {name}!</h1>

<!--
Error: Type 'ClassValue | null' is not assignable to type 'string | null | undefined'.
  Type 'ClassArray' is not assignable to type 'string'. (ts)
-->
<button
	class="option"
	{...buttonProps}
	>
	hello
	</button>

<!-- 
Error: Argument of type '{ class: string; "on:click": { (...data: any[]): void; (message?: any, ...optionalParams: any[]): void; }; disabled?: boolean | undefined | null; form?: string | undefined | null; formaction?: string | undefined | null; ... 438 more ...; onfullscreenerrorcapture?: EventHandler<...> | ... 1 more ... | undefined; }' is not assignable to parameter of type 'HTMLProps<"button", HTMLAttributes<any>>'.
  Type '{ class: string; "on:click": { (...data: any[]): void; (message?: any, ...optionalParams: any[]): void; }; disabled?: boolean | undefined | null; form?: string | undefined | null; formaction?: string | undefined | null; ... 438 more ...; onfullscreenerrorcapture?: EventHandler<...> | ... 1 more ... | undefined; }' is not assignable to type 'Omit<HTMLButtonAttributes, keyof HTMLAttributes<any>>'.
    Types of property 'hidden' are incompatible.
      Type 'boolean | "" | "until-found" | null | undefined' is not assignable to type 'boolean | null | undefined'.
        Type '""' is not assignable to type 'boolean | null | undefined'. (ts)
 -->
<button {...buttonProps} class="option" on:click={console.log}>hello</button>


<!--
Error: Type 'ClassValue | null' is not assignable to type 'string | null | undefined'.
  Type 'ClassArray' is not assignable to type 'string'. (ts)
-->
<button class="option" on:click={console.log} {...buttonProps}>hello</button>

Workarounds

As @kwangure mentioned — if you omit and re-type as a stronger type it can be spread again. Certain elements might require different omissions and re-types — only encountered it with <button>.

Leaving a sample in case anyone needs a quick solution:

export let buttonProps: Partial<Omit<HTMLButtonAttributes, "class" | "hidden"> & { class: string; hidden: boolean }> = {};