Skip to content

Slot passthrough breaks default slot content #11047

@innermatrix

Description

@innermatrix

Astro Info

Astro                    v4.8.3
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

If component A uses slot passthrough to a child component B, and component B uses slot default content, then default content is incorrectly not shown when empty slot is passed through A.

A:

---
  import B from './B.astro';
---
<div>
<div>A start</div>
<B>
<slot name="s" slot="s" />
</B>
<div>A end</div>
</div>

B:

<div>
<div>B start</div>
<slot name="s">
<div>Default content</div>
</slot>
<div>B end</div>
</div>

A is rendered as

<div>
<div>A start</div>
<div>
<div>B start</div>
<div>B end</div>
</div>
<div>A end</div>
</div>

What's the expected result?

A should be rendered as

<div>
<div>A start</div>
<div>
<div>B start</div>
<div>Default content</div>
<div>B end</div>
</div>
<div>A end</div>
</div>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-mvb5lj

Participation

  • I am willing to submit a pull request for this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageIssue needs to be triaged

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions