fix: use setAttribute for spellcheck and translate

.changeset/forty-guests-chew.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use `setAttribute` for spellcheck and translate

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -346,9 +346,10 @@ export function set_dynamic_element_attributes(node, prev, next, css_hash) {
  * In the example of `width`/`height`, the problem is that the setter only
  * accepts numeric values, but the attribute can also be set to a string like `50%`.
  * In case of draggable trying to set `element.draggable='false'` will actually set
- * draggable to `true`. If this list becomes too big, rethink this approach.
+ * draggable to `true`, same fore spellcheck and translate. If this list becomes
+ * too big, rethink this approach.
  */
-var always_set_through_set_attribute = ['width', 'height', 'draggable'];
+var always_set_through_set_attribute = ['width', 'height', 'draggable', 'spellcheck', 'translate'];
 
 /** @type {Map<string, string[]>} */
 var setters_cache = new Map();

packages/svelte/tests/runtime-runes/samples/svelte-element-draggable-spellcheck-translate/_config.js

@@ -0,0 +1,27 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+html: `<div draggable="false" spellcheck="false" translate="no"></div><div draggable="false" spellcheck="false" translate="no"></div>`,
+
+async test({ assert, target, logs }) {
+const [div, div2] = target.querySelectorAll('div');
+ok(div);
+ok(div2);
+
+assert.deepEqual(div.getAttribute('draggable'), 'false');
+assert.deepEqual(div.draggable, false);
+assert.deepEqual(div2.getAttribute('draggable'), 'false');
+assert.deepEqual(div2.draggable, false);
+
+assert.deepEqual(div.getAttribute('translate'), 'no');
+assert.deepEqual(div.translate, false);
+assert.deepEqual(div2.getAttribute('translate'), 'no');
+assert.deepEqual(div2.translate, false);
+
+// for some reason element.spellcheck is undefined instead of
+// false initially it might be a JSDom quirk
+assert.deepEqual(div.getAttribute('spellcheck'), 'false');
+assert.deepEqual(div2.getAttribute('spellcheck'), 'false');
+}
+});

packages/svelte/tests/runtime-runes/samples/svelte-element-draggable-spellcheck-translate/main.svelte

@@ -0,0 +1,7 @@
+<script>
+let attrs = $state({ draggable: 'false', spellcheck: 'false', translate: 'no' });
+</script>
+
+<svelte:element this={'div'} draggable="false" spellcheck="false" translate="no"></svelte:element>
+
+<div {...attrs}></div>