bind:value on input type="color" causes hydration missmatch and other errors in Svelte 5

[andreasmwenzel]

Describe the bug

Trying to bind:value of a color input in svelte 5 creates a hydration mismatch.

In svelte 4, we can have a simple component that binds the value and uses it in the style attribute of an div:

<script lang="ts">
  let color = '#ff3e00';
</script>

<input type="color" bind:value={color} />

<div style="background-color: {color}">Hello world!</div>

Using this exact code in a fresh svelte5 project crashes the app with the error:

TypeError: element2.getAttribute is not a function

Removing the div brings the color picker back with a warning of a Hydration Missmatch

Reproduction

Working Svelte 4 minimal repo: https://github.com/andreasmwenzel/bind-color Broken Svelte 5 minimal repo: https://github.com/andreasmwenzel/bind-color5

Logs

client.js?v=31a987c0:312 Uncaught (in promise) TypeError: element2.getAttribute is not a function

    in {expression}
    in +page.svelte
    in layout.svelte
    in root.svelte

    at Module.set_attribute (chunk-NGRGLIWV.js?v=31a987c0:1369:38)
    at {expression} (+page.svelte:2:31)
    at update_reaction (chunk-6DMA274Y.js?v=31a987c0:1617:23)
    at update_effect (chunk-6DMA274Y.js?v=31a987c0:1714:21)
    at create_effect (chunk-6DMA274Y.js?v=31a987c0:1019:7)
    at render_effect (chunk-6DMA274Y.js?v=31a987c0:1138:10)
    at Module.template_effect (chunk-6DMA274Y.js?v=31a987c0:1146:10)
    at _page (+page.svelte:2:31)
    at chunk-NGRGLIWV.js?v=31a987c0:226:58
    at :5174/update_reactio…e is not a function
    at Module.set_attribute (chunk-NGRGLIWV.js?v=31a987c0:1369:38)
    at {expression} (+page.svelte:2:31)
    at update_reaction (chunk-6DMA274Y.js?v=31a987c0:1617:23)
    at update_effect (chunk-6DMA274Y.js?v=31a987c0:1714:21)
    at create_effect (chunk-6DMA274Y.js?v=31a987c0:1019:7)
    at render_effect (chunk-6DMA274Y.js?v=31a987c0:1138:10)
    at Module.template_effect (chunk-6DMA274Y.js?v=31a987c0:1146:10)
    at _page (+page.svelte:2:31)
    at chunk-NGRGLIWV.js?v=31a987c0:226:58
    at update_reaction (chunk-6DMA274Y.js?v=31a987c0:1617:23)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H
    Memory: 13.01 GB / 31.68 GB
  Binaries:
    Node: 22.8.0 - C:\Program Files\nodejs\node.EXE   
    npm: 9.8.0 - C:\Program Files\nodejs\npm.CMD      
  Browsers:
    Edge: Chromium (128.0.2739.79)
    Internet Explorer: 11.0.19041.4355

Severity

serious, but I can work around it

Additional Information

No response

[eltigerchino]

I wasn't able to reproduce the issue locally or in stackblitz https://stackblitz.com/~/github.com/andreasmwenzel/bind-color5 Can you confirm if this issue still occurs?

[andreasmwenzel]

Interesting, I see the exact same issue using the stackblitz link

For curiosity's sake, I opened up firefox (130.0.1 (64-bit)) and am not seeing the issue there. Edge is also fine: 129.0.2792.52 (Official build) (64-bit). The initial issue appeared when using chrome: 129.0.6668.59 (Official Build) (64-bit) (cohort: Stable)

If other people cannot reproduce the issue, I'm willing to believe that somehow my chrome browser is the culprit.

[eltigerchino]

I've tested it on Chrome Version 129.0.6668.101 (Official Build) (64-bit) on Windows. Could you specify your operating system too?

[andreasmwenzel]

I figured out that the issue was with one of my chrome extensions. Specifically: https://chromewebstore.google.com/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

Removing the extension from chrome resolved the issue. A coworker installed the extension and saw the same error. I'll be looking for a new eye-dropper extension.

I'm happy to consider this issue resolved, but will let you decide whether to close it or if you want to chase it down.

Thanks!

[eltigerchino]

Thanks @andreasmwenzel if you'd like you can re-open the issue in the Svelte repository https://github.com/sveltejs/svelte regarding the extension and the hydration issue