From 02d23d1bf02d4be42315f98428dadf618ac05fe7 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Wed, 1 Apr 2026 13:35:40 +0200
Subject: [PATCH] fix: class toggle

---
 .../src/internal/client/dom/operations.js     |  4 +--
 .../samples/class-directive/_config.js        | 27 +++++++++++++++++++
 .../samples/class-directive/main.svelte       |  6 +++++
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte/tests/custom-renderers/samples/class-directive/_config.js
 create mode 100644 packages/svelte/tests/custom-renderers/samples/class-directive/main.svelte

diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 4539d12af5..fe9fbb4eda 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -770,7 +770,7 @@ export function set_css_text(element, value) {
  */
 export function class_list_toggle(element, name, force) {
 	if (renderer) {
-		const classes = element.getAttribute('class')?.split(/\s+/) ?? [];
+		const classes = renderer.getAttribute(element, 'class')?.split(/\s+/) ?? [];
 		const has_class = classes.includes(name);
 		if (force === has_class) {
 			return;
@@ -783,7 +783,7 @@ export function class_list_toggle(element, name, force) {
 				classes.splice(index, 1);
 			}
 		}
-		element.setAttribute('class', classes.join(' '));
+		renderer.setAttribute(element, 'class', classes.join(' '));
 		return;
 	}
 	element.classList.toggle(name, force);
diff --git a/packages/svelte/tests/custom-renderers/samples/class-directive/_config.js b/packages/svelte/tests/custom-renderers/samples/class-directive/_config.js
new file mode 100644
index 0000000000..b34ad3dc62
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/class-directive/_config.js
@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<div class="base">content</div> <button>toggle</button>',
+	test({ assert, target, serialize, dispatch_event }) {
+		const button = target.children.find(
+			(/**@type {any} */ n) => n.type === 'element' && n.name === 'button'
+		);
+		assert.ok(button);
+
+		// Click to add the "active" class
+		dispatch_event(button, 'click');
+		flushSync();
+
+		assert.equal(
+			serialize(target),
+			'<div class="base active">content</div> <button>toggle</button>'
+		);
+
+		// Click again to remove the "active" class
+		dispatch_event(button, 'click');
+		flushSync();
+
+		assert.equal(serialize(target), '<div class="base">content</div> <button>toggle</button>');
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples/class-directive/main.svelte b/packages/svelte/tests/custom-renderers/samples/class-directive/main.svelte
new file mode 100644
index 0000000000..6335828e9c
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples/class-directive/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let active = $state(false);
+</script>
+
+<div class="base" class:active>content</div>
+<button onclick={() => active = !active}>toggle</button>