Skip to content

class set by class shorthand is deleted when class directive updates and a spread is used on same element  #13725

@Jibbedi

Description

@Jibbedi

Describe the bug

First off, major congrats on the release :-) Svelte 5 is awesome!

I have an element that sets a class with the short hand syntax class:dark, sets classes via the regular class directive and calls a function to retrieve some (a11y) props.

<input class:dark={true} class={`${focused ? 'borderColor-accent' : ''}`} {...getAriaProps()} >

Whenever the focus state changes, the dark class is removed. And only borderColor-accent is present.
This only happens when {...getAriaProps()} is present. If this is not present on the element, the dark class stays.

  • It does not seem to matter what is returned from the getAriaProps call.
  • It does not seem to matter what is passed to class:dark.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE2VP3UrFMAx-lRAObIM578c2OfgC3nuE09NlUuzakqaClL67dCIqXiTw_SRfknEzliKOzxmd2glHPIeAPcpHqCC-kxXCHqNPrCszRc0myHJxF7EksHmdIq0wwymKEmo3ZSN1Va61JafFeAevJGc26ol9iG1QrPbYQT5swiSJHeRSYW1uuv-JcZNxIQl4d2TNue1gXn4FCycq4N3NJv6vHvcU0FbFOK6K3-b8NXAwc76e8rf5AZqb55X40VvPd0prctLACE1TrgXyMAx_3ugKLNjj7lezGVpxPBa_lE-FMWuQVgEAAA==

If you remove the spread expression, everything works.

Logs

-

System Info

System:
    OS: macOS 14.0
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 5.00 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: 6.24.2 - /usr/local/bin/pnpm
    Watchman: 2023.02.27.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 129.0.6668.101
    Chrome Canary: 132.0.6787.0
    Safari: 17.0
  npmPackages:
    svelte: 5.0.3 => 5.0.3

Severity

annoyance

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions