Providing Content for a Named Slot Conflicts With Fallback Content for a Nameless Slot

[daniel-nagy]

When providing content for a named slot, if there is any whitespace it will be slotted to the default slot and the default slot's fallback content will not be rendered.

e.g.

@customElement('x-element')
class XElement extends LitElement {
  render() {
    return html`
      <v-slot>
        <v-slot-fallback-content>Test</v-slot-fallback-content>
      </v-slot>
      <v-slot name="other-slot"></v-slot>
    `;
  }
}

<x-element>
  <div v-slot="other-slot">Other Content</div>
<x-element>

Empty text nodes will be created and slotted to the nameless slot, preventing the fallback content from rendering.

[daniel-nagy]

A workaround would be to assign a name to each slot.