fix: collect all necessary setters of html elements (#11371)

When spreading attributes, the setters of the element are checked. If they contain the key in question, it's set via that setter. For certain setters on certain elements this didn't work because the element prototype was not HTMLElement, rather a descendant of that (for example HTMLDivElement), which meant that only the setters of the descendant, not the superclass were taken into account. This fixes that by walking up the prototype chain until we find the Element prototype.

fixes #11179

.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
+	// Stop at Element, from there on there's only unnecessary setters we're not interested in
-	var descriptors = get_descriptors(element.__proto__);
+	while (proto.constructor.name !== 'Element') {
+		descriptors = get_descriptors(proto);
 
-	for (var key in descriptors) {
+		for (var key in descriptors) {
-		if (descriptors[key].set && !always_set_through_set_attribute.includes(key)) {
+			if (descriptors[key].set && !always_set_through_set_attribute.includes(key)) {
-			setters.push(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', {
+		await compile_directory(test_dir, 'server', config.compileOptions);
-			...config.compileOptions,
-			runes: test_dir.includes('runtime-runes')
-		});
 
 		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>