fix rendering void tag for <svelte:element>

src/compiler/compile/render_ssr/handlers/Element.ts

@@ -197,11 +197,15 @@ export default function (node: Element, renderer: Renderer, options: RenderOptio
 	}
 
 	function add_close_tag() {
-		if (!is_void(node.name)) {
-			renderer.add_string('</');
-			add_tag_name();
-			renderer.add_string('>');
+		if (node.tag_expr.node.type === 'Literal') {
+			if (!is_void(node.tag_expr.node.value as string)) {
+				renderer.add_string('</');
+				add_tag_name();
+				renderer.add_string('>');
+			}
+			return;
 		}
+		renderer.add_expression(x`((tag) => @is_void(String(tag || '')) ? '' : \`</\${tag}>\`)(${node.tag_expr.node})`);
 	}
 
 	function add_tag_name() {

src/runtime/internal/ssr.ts

@@ -1,6 +1,7 @@
 import { set_current_component, current_component } from './lifecycle';
 import { run_all, blank_object } from './utils';
 import { boolean_attributes } from '../../compiler/compile/render_ssr/handlers/shared/boolean_attributes';
+export { is_void } from '../../compiler/utils/names';
 
 export const invalid_attribute_name_character = /[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u;
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
@@ -19,7 +20,7 @@ export function spread(args, attrs_to_add) {
 				attributes.class += ' ' + classes_to_add;
 			}
 		}
-		
+
 		if (styles_to_add) {
 			if (attributes.style == null) {
 				attributes.style = style_object_to_string(styles_to_add);
@@ -55,7 +56,7 @@ export function merge_ssr_styles(style_attribute, style_directive) {
 		if (!name) continue;
 		style_object[name] = value;
 	}
-	
+
 	for (const name in style_directive) {
 		const value = style_directive[name];
 		if (value) {

test/runtime/index.ts

@@ -155,13 +155,14 @@ describe('runtime', () => {
 
 					const target = window.document.querySelector('main');
 
+					let ssrHtml: string | undefined = undefined;
 					if (hydrate && from_ssr_html) {
 						// ssr into target
 						compileOptions.generate = 'ssr';
 						cleanRequireCache();
 						const SsrSvelteComponent = require(`./samples/${dir}/main.svelte`).default;
-						const { html } = SsrSvelteComponent.render(config.props);
-						target.innerHTML = html;
+						ssrHtml = SsrSvelteComponent.render(config.props).html;
+						target.innerHTML = ssrHtml;
 						delete compileOptions.generate;
 					} else {
 						target.innerHTML = '';
@@ -210,7 +211,8 @@ describe('runtime', () => {
 							target,
 							window,
 							raf,
-							compileOptions
+							compileOptions,
+							ssrHtml
 						})).then(() => {
 							component.$destroy();
 

test/runtime/samples/dynamic-element-string/_config.js

@@ -1,3 +1,7 @@
 export default {
-	html: '<div>Foo</div>'
+	html: '<div>Foo</div>',
+
+	test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML,	'<div>Foo</div>');
+	}
 };

test/runtime/samples/dynamic-element-void-tag/_config.js

@@ -0,0 +1,15 @@
+export default {
+	props: {
+		propTag: 'hr'
+	},
+	html: '<h1></h1><h2></h2><h3></h3><hr><input><br>',
+
+	test({ assert, component, target, ssrHtml }) {
+		assert.htmlEqual(target.innerHTML, '<h1></h1><h2></h2><h3></h3><hr><input><br>');
+		if (ssrHtml) {
+			assert.equal(ssrHtml, '<h1></h1>\n<h2></h2>\n<h3></h3>\n<hr>\n<input>\n<br>');
+		}
+		component.propTag = 'link';
+		assert.htmlEqual(target.innerHTML, '<h1></h1><h2></h2><h3></h3><link><input><br>');
+	}
+};

test/runtime/samples/dynamic-element-void-tag/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let propTag;
+	const static_tag = 'input';
+	const func_tag = () => 'br';
+</script>
+
+<h1></h1>
+<svelte:element this="{'h2'}"></svelte:element>
+<svelte:element this="h3"></svelte:element>
+<svelte:element this="{propTag}"></svelte:element>
+<svelte:element this="{static_tag}"></svelte:element>
+<svelte:element this="{func_tag()}"></svelte:element>