Svelte 5: Spreading attributes to element breaks hidden

[huntabyte]

Describe the bug

When you have an element setup like this:

<script lang="ts">
	let isHidden = $state(false)
</script>

<div {...restProps} hidden={isHidden}>
</div>

When isHidden changes, hidden becomes "false", which is still hidden.

If you remove the spread obj. from the attributes, if hidden is false, it's removed from the attributes, making the element visible.

<div hidden={isHidden}>
</div>

So the issue is around the inconsistencies, as well as the type Svelte expects for the hidden attribute, which is currently boolean | null | undefined, but should be string | null | undefined.

Reproduction

REPL

Logs

No response

System Info

Svelte 5 REPL environment

Severity

annoyance

[brunnerh]

hidden is not a boolean attribute, it a) probably should not be treated like a boolean attribute and b) might still need some special attention.

These are valid:

<div hidden > <!-- same as hidden="hidden" -->
<div hidden=""> <!-- same as hidden="hidden" -->
<div hidden="hidden">
<div hidden="until-found">

Toggling between "hidden" and undefined works.
Toggling between "" and undefined does not quite work.

[huntabyte]

Understood @brunnerh, thanks for the clarification! I guess what is confusing is that the second div in my repl would lead one to believe that it does work that way... until you try to spread some additional attributes and it suddenly stops working that way!

The attribute is also typed in Svelte as boolean | null | undefined, so unless you're in a REPL it's unlikely you'd ever even try using a string.

[anatolzak]

@brunnerh currently, the TS type for the hidden property is boolean | null | undefined

[brunnerh]

until-found is fairly new and not even supported in many browsers.
Sometimes boolean attributes just somehow turn into enumerations 😅.

[dummdidumm]

FWIW the same happens in Svelte 4