diff --git a/.changeset/nervous-turkeys-end.md b/.changeset/nervous-turkeys-end.md new file mode 100644 index 0000000000..a6235a52bd --- /dev/null +++ b/.changeset/nervous-turkeys-end.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: improve spreading of attributes diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index 9dd95bb78b..94ea12be99 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -104,6 +104,9 @@ export function set_attributes(element, prev, attrs, lowercase_attributes, css_h var setters = map_get(setters_cache, element.nodeName); if (!setters) map_set(setters_cache, element.nodeName, (setters = get_setters(element))); + // @ts-expect-error + var attributes = /** @type {Record} **/ (element.__attributes ??= {}); + for (key in next) { var value = next[key]; if (value === prev?.[key]) continue; @@ -140,6 +143,7 @@ export function set_attributes(element, prev, attrs, lowercase_attributes, css_h } } } else if (value == null) { + attributes[key] = null; element.removeAttribute(key); } else if (key === 'style') { element.style.cssText = value + ''; diff --git a/packages/svelte/tests/runtime-runes/samples/spread-props-2/_config.js b/packages/svelte/tests/runtime-runes/samples/spread-props-2/_config.js new file mode 100644 index 0000000000..81cc057828 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/spread-props-2/_config.js @@ -0,0 +1,23 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + async test({ assert, target }) { + const btn = target.querySelector('button'); + + flushSync(() => { + btn?.click(); + }); + + assert.htmlEqual(target.innerHTML, `

Style: not red

`); + + flushSync(() => { + btn?.click(); + }); + + assert.htmlEqual( + target.innerHTML, + `

Style: red

` + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/spread-props-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/spread-props-2/main.svelte new file mode 100644 index 0000000000..f438964d28 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/spread-props-2/main.svelte @@ -0,0 +1,11 @@ + + + + +

Style: {isRed ? 'red' : 'not red'}