fix: collect all necessary setters of html elements

.changeset/blue-lemons-wait.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: collect all necessary setters of html elements when spreading attributes

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

@@ -1,6 +1,6 @@
 import { DEV } from 'esm-env';
 import { hydrating } from '../hydration.js';
-import { get_descriptors, map_get, map_set, object_assign } from '../../utils.js';
+import { get_descriptors, get_prototype_of, map_get, map_set } from '../../utils.js';
 import { AttributeAliases, DelegatedEvents, namespace_svg } from '../../../../constants.js';
 import { delegate } from './events.js';
 import { autofocus } from './misc.js';
@@ -241,14 +241,20 @@ var setters_cache = new Map();
 function get_setters(element) {
 	/** @type {string[]} */
 	var setters = [];
+	var descriptors;
+	var proto = get_prototype_of(element);
 
-	// @ts-expect-error
-	var descriptors = get_descriptors(element.__proto__);
+	// Stop at Element, from there on there's only unnecessary setters we're not interested in
+	while (proto.constructor.name !== 'Element') {
+		descriptors = get_descriptors(proto);
 
-	for (var key in descriptors) {
-		if (descriptors[key].set && !always_set_through_set_attribute.includes(key)) {
-			setters.push(key);
+		for (var key in descriptors) {
+			if (descriptors[key].set && !always_set_through_set_attribute.includes(key)) {
+				setters.push(key);
+			}
 		}
+
+		proto = get_prototype_of(proto);
 	}
 
 	return setters;

packages/svelte/tests/runtime-browser/test-ssr.ts

@@ -17,10 +17,7 @@ export async function run_ssr_test(
 	test_dir: string
 ) {
 	try {
-		await compile_directory(test_dir, 'server', {
-			...config.compileOptions,
-			runes: test_dir.includes('runtime-runes')
-		});
+		await compile_directory(test_dir, 'server', config.compileOptions);
 
 		const Component = (await import(`${test_dir}/_output/server/main.svelte.js`)).default;
 		const { html } = render(Component, { props: config.props || {} });

packages/svelte/tests/runtime-runes/samples/attribute-spread-hidden/_config.js

@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ target, assert }) {
+		const div = target.querySelector('div');
+		const btn = target.querySelector('button');
+
+		assert.equal(div?.hidden, true);
+
+		await btn?.click();
+		assert.equal(div?.hidden, false);
+	}
+});

packages/svelte/tests/runtime-runes/samples/attribute-spread-hidden/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	let hidden = $state(true);
+
+	const restProps = {
+		id: '123'
+	}
+</script>
+
+<button onclick={() => hidden = !hidden}>
+	toggle hidden
+</button>
+
+<div {...restProps} hidden={hidden}>
+	hello world (with spread attrs)
+</div>