Skip to content

If slot content consists only of &nbsp, it is not passed to component #8359

Closed
@danieldiekmeier

Description

@danieldiekmeier

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 &nbsp;:

<MyComponent>&nbsp;</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">&nbsp;</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 &nbsp; away, and does not even try to pass it to the component.

<MyComponent>
	&nbsp;
</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>&nbsp;</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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions