fix sveltejs#15386

adiguba · Feb 25, 2025 · 5d6bb2f · 5d6bb2f
1 parent 4f63f9d
commit 5d6bb2f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -326,8 +326,16 @@ export function set_attributes(
 			continue;
 		}
 
+		if (key === 'class') {
+			var is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
+			set_class(element, is_html, value, css_hash, prev?.[CLASS], next[CLASS]);
+			current[key] = value;
+			current[CLASS] = next[CLASS];
+			continue;
+		}
+
 		var prev_value = current[key];
-		if (value === prev_value && key !== 'class') continue;
+		if (value === prev_value) continue;
 
 		current[key] = value;
 
@@ -377,9 +385,6 @@ export function set_attributes(
 				// @ts-ignore
 				element[`__${event_name}`] = undefined;
 			}
-		} else if (key === 'class') {
-			var is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
-			set_class(element, is_html, value, css_hash, prev?.[CLASS], next[CLASS]);
 		} else if (key === 'style' && value != null) {
 			element.style.cssText = value + '';
 		} else if (key === 'autofocus') {

diff --git a/packages/svelte/src/internal/client/dom/elements/class.js b/packages/svelte/src/internal/client/dom/elements/class.js
@@ -6,8 +6,8 @@ import { hydrating } from '../hydration.js';
  * @param {boolean | number} is_html
  * @param {string | null} value
  * @param {string} [hash]
- * @param {Record<string, boolean>} [prev_classes]
- * @param {Record<string, boolean>} [next_classes]
+ * @param {Record<string, any>} [prev_classes]
+ * @param {Record<string, any>} [next_classes]
  * @returns {Record<string, boolean> | undefined}
  */
 export function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
@@ -34,12 +34,10 @@ export function set_class(dom, is_html, value, hash, prev_classes, next_classes)
 		// @ts-expect-error need to add __className to patched prototype
 		dom.__className = value;
 	} else if (next_classes) {
-		prev_classes ??= {};
-
 		for (var key in next_classes) {
 			var is_present = !!next_classes[key];
 
-			if (is_present !== !!prev_classes[key]) {
+			if (prev_classes == null || is_present !== !!prev_classes[key]) {
 				dom.classList.toggle(key, is_present);
 			}
 		}