Closed
Description
Describe the bug
I have a simple component like this:
<h3 class="text-xl font-bold">
<slot />
</h3>
Sometimes I don't want to show any content, but still want it to take up space. To achieve that, I want to pass an
:
<MyComponent> </MyComponent>
But I noticed that the actual output in the DOM does not contain any spaces at all:
<h3 class="text-xl font-bold"></h3>
I expected:
<h3 class="text-xl font-bold"> </h3>
Reproduction
https://svelte.dev/repl/9ece32e45c564cd68693684349802da6?version=3.55.1
If you look at the compiled JS output (especially obvious when using SSR), you can see that the compiler already "optimized" the
away, and does not even try to pass it to the component.
<MyComponent>
</MyComponent>
Which leads to this output:
${validate_component(MyComponent, "MyComponent").$$render($$result, {}, {}, {})}
// ^ Note the missing default
As a workaround, I was able to add an additional <span>
:
<MyComponent>
<span> </span>
</MyComponent>
Which leads to this output, which is what I would expect:
${validate_component(MyComponent, "MyComponent").$$render($$result, {}, {}, {
default: () => {
return `<span> </span>`;
}
})}
Logs
No response
System Info
Svelte 3.55.1, straight from the REPL
Severity
annoyance
Metadata
Metadata
Assignees
Labels
No labels