[fix] always use set_attributes for attribute of <svelte:element> (…

…sveltejs#7486)

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -750,7 +750,7 @@ export default class ElementWrapper extends Wrapper {
 			}
 		});
 
-		if (this.node.attributes.some(attr => attr.is_spread)) {
+		if (this.node.attributes.some(attr => attr.is_spread) || this.node.is_dynamic_element) {
 			this.add_spread_attributes(block);
 			return;
 		}

test/runtime/samples/dynamic-element-attribute-boolean/_config.js

@@ -0,0 +1,15 @@
+export default {
+	props: {
+		disabled: false
+	},
+	html: '<button>Click me</button>',
+
+	test({ assert, component, target }) {
+		const button = target.querySelector('button');
+		assert.equal(button.disabled, false);
+
+		component.disabled = true;
+		assert.htmlEqual(target.innerHTML, '<button disabled>Click me</button>');
+		assert.equal(button.disabled, true);
+	}
+};

test/runtime/samples/dynamic-element-attribute-boolean/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let disabled = false;
+</script>
+
+<svelte:element {disabled} this="button">Click me</svelte:element>

test/runtime/samples/dynamic-element-attribute-spread/_config.js

@@ -0,0 +1,23 @@
+export default {
+	props: {
+		props: {
+			disabled: true,
+			type: 'button',
+			'data-named': 'foo'
+		}
+	},
+	html: '<button disabled type="button" data-named="foo">Click me</button>',
+
+	test({ assert, component, target }) {
+		const button = target.querySelector('button');
+		assert.equal(button.disabled, true);
+		assert.equal(button.type, 'button');
+		assert.equal(button.dataset.named, 'foo');
+
+		component.props = { type: 'submit' };
+		assert.htmlEqual(target.innerHTML, '<button type="submit">Click me</button>');
+		assert.equal(button.disabled, false);
+		assert.equal(button.type, 'submit');
+		assert.equal(button.dataset.named, undefined);
+	}
+};

test/runtime/samples/dynamic-element-attribute-spread/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let props = {
+		disabled: false,
+		type: 'button',
+		'data-named': 'foo'
+	};
+</script>
+
+<svelte:element this="button" {...props}>Click me</svelte:element>