Skip to content

Transitioning when slot element changes does not update slot element #3542

@jf908

Description

@jf908

Describe the bug

If a transition happens on an element that contains a slot, the slot does not properly update if it is rendered again immediately after the transition ends.

To Reproduce

https://svelte.dev/repl/46ba49b1c588454f8f4899b4b47b8df0?version=3.12.0

In the repl, 1. is an example of this bug, 2. is an example showing how if the component is transitioned out completely then the slot is updated properly.

Expected behavior

In the repl, 1. should fade out "Foo" and fade in "Bar" rather than fade out "Foo" and fade in "Foo".

Information about your Svelte project:

Chrome v76
Windows 10
Svelte v3.12.0
See REPL

Severity

Not too important as it is a corner case but additional context explains why fixing it may be useful.

Additional context

I discovered this bug because I was trying to create page transitions in sapper but could not find a elegant way of doing so which resulted in me trying this workaround and finding this bug.

The main problem is that there is no way of adding a transition when a <slot> changes unless you add transitions to the slot contents which is a problem in sapper because there isn't an easy way of wrapping every page component to include intro and outro transitions.

Fixing this bug would allow the parent component to add any kind of transitioning to <slot> elements.

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