[fix] style: directive should prevent innerHTML optimization (#7390)

Fixes #7386
sveltejs · Mar 30, 2022 · 9f4602a · 9f4602a
1 parent 0eee98a
commit 9f4602a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -219,6 +219,7 @@ export default class ElementWrapper extends Wrapper {
 				node.classes.length > 0 ||
 				node.intro || node.outro ||
 				node.handlers.length > 0 ||
+				node.styles.length > 0 ||
 				this.node.name === 'option' ||
 				renderer.options.dev
 			) {

diff --git a/test/runtime/samples/inline-style-directive/_config.js b/test/runtime/samples/inline-style-directive/_config.js
@@ -1,6 +1,8 @@
 export default {
 	html: `
-		<p style="color: red;"></p>
+		<div>
+			<p style="color: red;"></p>
+		</div>
 	`,
 
 	test({ assert, target, window }) {

diff --git a/test/runtime/samples/inline-style-directive/main.svelte b/test/runtime/samples/inline-style-directive/main.svelte
@@ -2,4 +2,6 @@
 	export let myColor = "red";
 </script>
 
-<p style:color={myColor} />
+<div>
+	<p style:color={myColor} />
+</div>
diff --git a/test/runtime/samples/inline-style/_config.js b/test/runtime/samples/inline-style/_config.js
@@ -4,9 +4,9 @@ export default {
 	`,
 
 	test({ assert, component, target, window }) {
-		const p = target.querySelector('div');
+		const div = target.querySelector('div');
 
-		const styles = window.getComputedStyle(p);
+		const styles = window.getComputedStyle(div);
 		assert.equal(styles.color, 'red');
 	}
 };