diff --git a/.changeset/weak-knives-battle.md b/.changeset/weak-knives-battle.md new file mode 100644 index 0000000000..702053ee9e --- /dev/null +++ b/.changeset/weak-knives-battle.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure `undefined` class still applies scoping class, if necessary diff --git a/packages/svelte/src/internal/client/dom/elements/class.js b/packages/svelte/src/internal/client/dom/elements/class.js index ecbfcbc010..fc081b8956 100644 --- a/packages/svelte/src/internal/client/dom/elements/class.js +++ b/packages/svelte/src/internal/client/dom/elements/class.js @@ -14,7 +14,11 @@ export function set_class(dom, is_html, value, hash, prev_classes, next_classes) // @ts-expect-error need to add __className to patched prototype var prev = dom.__className; - if (hydrating || prev !== value) { + if ( + hydrating || + prev !== value || + prev === undefined // for edge case of `class={undefined}` + ) { var next_class_name = to_class(value, hash, next_classes); if (!hydrating || next_class_name !== dom.getAttribute('class')) { diff --git a/packages/svelte/tests/css/samples/undefined-with-scope/expected.html b/packages/svelte/tests/css/samples/undefined-with-scope/expected.html index 5eecaa9bb2..5548be6e5a 100644 --- a/packages/svelte/tests/css/samples/undefined-with-scope/expected.html +++ b/packages/svelte/tests/css/samples/undefined-with-scope/expected.html @@ -1 +1,2 @@ -

Foo

\ No newline at end of file +

Foo

+

Bar

\ No newline at end of file diff --git a/packages/svelte/tests/css/samples/undefined-with-scope/input.svelte b/packages/svelte/tests/css/samples/undefined-with-scope/input.svelte index c68fb40dea..20639600d0 100644 --- a/packages/svelte/tests/css/samples/undefined-with-scope/input.svelte +++ b/packages/svelte/tests/css/samples/undefined-with-scope/input.svelte @@ -1,3 +1,4 @@ -

Foo

\ No newline at end of file +

Foo

+

Bar