fix: inline style value become undefined (#8517)

fixes #8462

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

src/runtime/internal/dom.ts

@@ -307,7 +307,7 @@ export function attr(node: Element, attribute: string, value?: string) {
 	else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value);
 }
 
-/** 
+/**
  * List of attributes that should always be set through the attr method,
  * because updating them through the property setter doesn't work reliably.
  * In the example of `width`/`height`, the problem is that the setter only
@@ -641,7 +641,7 @@ export function set_input_type(input, type) {
 }
 
 export function set_style(node, key, value, important) {
-	if (value === null) {
+	if (value == null) {
 		node.style.removeProperty(key);
 	} else {
 		node.style.setProperty(key, value, important ? 'important' : '');

test/runtime/samples/inline-style-become-undefined/_config.js

@@ -0,0 +1,11 @@
+export default {
+	async test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		const click = new window.MouseEvent('click');
+
+		assert.htmlEqual(target.innerHTML, '<div style="background: red;"></div>');
+		await div.dispatchEvent(click);
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, '<div style=""></div>');
+	}
+};

test/runtime/samples/inline-style-become-undefined/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	let bg = "red";
+
+	const handle = () => {
+			bg = undefined;
+	};
+</script>
+
+<div style:background={bg} on:click={handle}></div>