improve <svelte:element> SSR

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -1352,11 +1352,17 @@ const template_visitors = {
 			context.visit(node.fragment, state)
 		);
 
-		const body = b.block([
-			b.stmt(b.call('$.element', b.id('$$payload'), tag, b.thunk(attributes), b.thunk(children)))
-		]);
-
-		context.state.template.push(block_open, b.if(tag, body), block_close);
+		context.state.template.push(
+			b.stmt(
+				b.call(
+					'$.element',
+					b.id('$$payload'),
+					tag,
+					attributes.body.length > 0 && b.thunk(attributes),
+					children.body.length > 0 && b.thunk(children)
+				)
+			)
+		);
 
 		if (context.state.options.dev) {
 			context.state.template.push(b.stmt(b.call('$.pop_element')));

packages/svelte/src/internal/server/index.js

@@ -72,7 +72,10 @@ export function assign_payload(p1, p2) {
  * @param {() => void} children_fn
  * @returns {void}
  */
-export function element(payload, tag, attributes_fn, children_fn) {
+export function element(payload, tag, attributes_fn = noop, children_fn = noop) {
+	payload.out += `<!---->`;
+
+	if (tag) {
 		payload.out += `<${tag} `;
 		attributes_fn();
 		payload.out += `>`;
@@ -86,6 +89,9 @@ export function element(payload, tag, attributes_fn, children_fn) {
 		}
 	}
 
+	payload.out += `<!---->`;
+}
+
 /**
  * Array of `onDestroy` callbacks that should be called at the end of the server render function
  * @type {Function[]}

packages/svelte/tests/server-side-rendering/samples/head-svelte-components-raw-content/_expected.html

@@ -1,17 +1,17 @@
 <!--[-->
-<!--[-->
+<!---->
 <title>lorem</title>
-<!--]-->
-<!--[-->
+<!---->
+<!---->
 <style>
 	.ipsum {
 		display: block;
 	}
 	</style>
-<!--]-->
-<!--[-->
+<!---->
+<!---->
 <script>
 	console.log(true);
 </script>
-<!--]-->
+<!---->
 <!--]-->

packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js

@@ -3,11 +3,5 @@ import * as $ from "svelte/internal/server";
 export default function Svelte_element($$payload, $$props) {
 	let { tag = 'hr' } = $$props;
 
-	$$payload.out += `<!--[-->`;
-
-	if (tag) {
-		$.element($$payload, tag, () => {}, () => {});
-	}
-
-	$$payload.out += `<!--]-->`;
+	$.element($$payload, tag);
 }