fix(perf): use classList.toggle instead of add/remove (#8629)

`classList.toggle(..., flag)` has been a part of the DOM standard forever,
so better use it instead of possibly causing browser deopts by using dynamic attribute access.
The `!!` is required because an `undefined` flag means flipping the current state.

---------

Co-authored-by: Dominik G <dominik.goepel@gmx.de>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>

Author: 5 people

CHANGELOG.md

@@ -16,6 +16,7 @@
 * **breaking** Error on falsy values instead of stores passed to `derived` ([#7947](https://github.com/sveltejs/svelte/pull/7947))
 * **breaking** Custom store implementers now need to pass an `update` function additionally to the `set` function ([#6750](https://github.com/sveltejs/svelte/pull/6750))
 * **breaking** Change order in which preprocessors are applied ([#8618](https://github.com/sveltejs/svelte/pull/8618))
+* **breaking** The runtime now makes use of `classList.toggle(name, boolean)` which does not work in very old browsers ([#8629](https://github.com/sveltejs/svelte/pull/8629))
 * **breaking** apply `inert` to outroing elements ([#8627](https://github.com/sveltejs/svelte/pull/8627))
 * Add a way to modify attributes for script/style preprocessors ([#8618](https://github.com/sveltejs/svelte/pull/8618))
 * Improve hydration speed by adding `data-svelte-h` attribute to detect unchanged HTML elements ([#7426](https://github.com/sveltejs/svelte/pull/7426))

src/runtime/internal/dom.js

@@ -993,7 +993,8 @@ export { ResizeObserverSingleton };
 /**
  * @returns {void} */
 export function toggle_class(element, name, toggle) {
-	element.classList[toggle ? 'add' : 'remove'](name);
+	// The `!!` is required because an `undefined` flag means flipping the current state.
+	element.classList.toggle(name, !!toggle);
 }
 
 /**