From 8a28d1bb382e75546ca8b53e5235113bf82f9ecd Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 11 Sep 2020 03:28:22 +0800
Subject: [PATCH] valid XHTML syntax in innerHTML for static elements (#5317)

---
 CHANGELOG.md                                  |  1 +
 .../render_dom/wrappers/Element/index.ts      |  6 ++-
 .../expected.js                               | 39 +++++++++++++++++++
 .../input.svelte                              |  3 ++
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 test/js/samples/valid-inner-html-for-static-element/expected.js
 create mode 100644 test/js/samples/valid-inner-html-for-static-element/input.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 19e8cced8f..d3bd11c8b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 * Fix using `<svelte:component>` in `{:catch}` ([#5259](https://github.com/sveltejs/svelte/issues/5259))
 * Fix setting one-way bound `<input>` `value` to `undefined` when it has spread attributes ([#5270](https://github.com/sveltejs/svelte/issues/5270))
 * Fix deep two-way bindings inside an `{#each}` involving a store ([#5286](https://github.com/sveltejs/svelte/issues/5286))
+* Use valid XHTML for elements that are optimised and inserted with `.innerHTML` ([#5315](https://github.com/sveltejs/svelte/issues/5315))
 * Fix reactivity of `$$props` in slot fallback content ([#5367](https://github.com/sveltejs/svelte/issues/5367))
 
 ## 3.24.1
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index b3533d2fa0..2e35f0271f 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -997,12 +997,14 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapp
 				state.quasi.value.raw += `"`;
 			});
 
-			state.quasi.value.raw += '>';
-
 			if (!wrapper.void) {
+				state.quasi.value.raw += '>';
+
 				to_html(wrapper.fragment.nodes as Array<ElementWrapper | TextWrapper>, block, literal, state);
 
 				state.quasi.value.raw += `</${wrapper.node.name}>`;
+			} else {
+				state.quasi.value.raw += '/>';
 			}
 		}
 	});
diff --git a/test/js/samples/valid-inner-html-for-static-element/expected.js b/test/js/samples/valid-inner-html-for-static-element/expected.js
new file mode 100644
index 0000000000..f1ced27ba4
--- /dev/null
+++ b/test/js/samples/valid-inner-html-for-static-element/expected.js
@@ -0,0 +1,39 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			div.innerHTML = `<img alt="Star" width="100" height="100" src="http://mdn.mozillademos.org/files/12676/star.svg"/>`;
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/valid-inner-html-for-static-element/input.svelte b/test/js/samples/valid-inner-html-for-static-element/input.svelte
new file mode 100644
index 0000000000..3990b2a0c2
--- /dev/null
+++ b/test/js/samples/valid-inner-html-for-static-element/input.svelte
@@ -0,0 +1,3 @@
+<div>
+    <img alt="Star" width="100" height="100" src="http://mdn.mozillademos.org/files/12676/star.svg" />
+</div>
\ No newline at end of file