Unable to make `...rest` prop bindable

[MaddyGuthridge]

Describe the bug

As per this documentation, I am trying to create a wrapper around a <select> element, but unlike the examples, I want to forward the bindable-ness of the values to the inner component.

However, when I try to bind to any attributes in ...rest, I get the warning: Cannot use 'bind:' with this property. It is declared as non-bindable inside the component. To mark a property as bindable: 'let { value = $bindable() } = $props()'ts(2322).

When I try to write ...rest = $bindable(), I get a number of errors:

• Unexpected token https://svelte.dev/e/js_parse_error
• A rest element cannot have an initializer.ts(1186)

How can I forward binding for all bindable properties for the original HTML element?

For now, I am stuck with forwarding all properties that I intend to use, which is a very frustrating user experience.

Reproduction

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

  let { children, ...rest = $bindable() }: HTMLSelectAttributes = $props();
</script>

<!-- Don't think this is the right syntax either -->
<select bind:{...rest}>
  {@render children?.()}
</select>

Logs

System Info

System:
    OS: Linux 6.12 Fedora Linux 41 (Workstation Edition)
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 50.22 GB / 62.41 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.12.0 - /run/user/1000/fnm_multishells/45856_1738052668661/bin/node
    npm: 10.9.0 - /run/user/1000/fnm_multishells/45856_1738052668661/bin/npm
    bun: 1.1.34 - ~/.bun/bin/bun
  Browsers:
    Chrome: 132.0.6834.110
  npmPackages:
    svelte: ^5.6.0 => 5.19.3

Severity

annoyance

[Rich-Harris]

This is by design — the consumer of the wrapper component needs to know which properties can be bound, and there's no way to express that in types, so it has to be done with $bindable() on a per-prop basis. Since element bindings are finite, you can just enumerate them:

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

  let { children, value = $bindable(), ...rest }: HTMLSelectAttributes = $props();
</script>

<select {...rest} bind:value>
  {@render children?.()}
</select>

Though thinking further, I suppose strictly speaking this isn't complete, since you could have dimension bindings as well, and this wouldn't cover any additional bindings we added in future versions:

let {
  children,
  value = $bindable(),
  clientWidth = $bindable(),
  clientHeight = $bindable(),
  offsetWidth = $bindable(),
  offsetHeight = $bindable(),
  ...rest
}: HTMLSelectAttributes = $props();

I'm not sure what a good, 100% future-proof solution to that would look like.

[MaddyGuthridge]

That's fair, it's hardly a simple issue to solve. I'm not too stressed about this for the time being -- I'm very much able to get things done, it just annoys my sense of code duplication a little.

[Ocean-OS]

Though thinking further, I suppose strictly speaking this isn't complete, since you could have dimension bindings as well, and this wouldn't cover any additional bindings we added in future versions:

let {
children,
value = $bindable(),
clientWidth = $bindable(),
clientHeight = $bindable(),
offsetWidth = $bindable(),
offsetHeight = $bindable(),
...rest
}: HTMLSelectAttributes = $props();
I'm not sure what a good, 100% future-proof solution to that would look like.

Perhaps there could be some sort of extra sub-rune to $bindable, like $bindable.group({value: defaultValue, clientHeight: defaultValue})? Not quite sure how this would easily work with $props declarations, though...

[adiguba]

Hello,

Though thinking further, I suppose strictly speaking this isn't complete, since you could have dimension bindings as well, and this wouldn't cover any additional bindings we added in future versions:

let {
  children,
  value = $bindable(),
  clientWidth = $bindable(),
  clientHeight = $bindable(),
  offsetWidth = $bindable(),
  offsetHeight = $bindable(),
  ...rest
}: HTMLSelectAttributes = $props();

Maybe I'm wrong, but this will enable the ResizeObserver for all instance of the component, even if there is no bind: on the component...