svelte:element with static attributes and content gets compiled to innerHTML without tag name substitution

[ramonsnir]

Describe the bug

If an element has entirely static contents, Svelte compiles it to a simple component that uses innerHTML in c() that includes all of its static content. The bug occurs when <svelte:element /> is used without dynamic attributes and without dynamic content. We noticed this when creating an HTML slot (not Svelte slot) for a custom element that didn't have default content:

<svelte:element this="slot" name="empty" />

Svelte 3.51.0 compiles the parent of this element with div.innerHTML = '<svelte:element name="empty"></svelte:element>';, which is not the intended result (the final HTML should be <slot name="empty" />).

This is an annoyance and a pitfall. If the issue is known to the user, an easy workaround it to add content that seems dynamic:

<svelte:element this="slot" name="empty">{''}</svelte:element>

I intend to submit (my first) PR to fix this issue.

Related PRs:

• Use innerHTML for static elements? #23 seems to introduce the concept
• [fix] style shorthand lost in production mode #7390 fixes a similar issue (in that case: style:prop wasn't regarded as dynamic)

Reproduction

See this REPL: https://svelte.dev/repl/d81915a399ff40dab45e4f00c17ce9b8?version=3.51.0

Logs

No response

System Info

N/A

Severity

annoyance

[Conduitry]

This should be fixed in 3.55.1 - https://svelte.dev/repl/d81915a399ff40dab45e4f00c17ce9b8?version=3.55.1