Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

allow <slot> to be part of a slot #4295

Merged
merged 3 commits into from
Sep 29, 2020

Conversation

tanhauhau
Copy link
Member

@tanhauhau tanhauhau commented Jan 21, 2020

Fixes #2079

  • allow <slot> to have slot="name".
  • currently let: binding on <slot> not supported yet.

@tanhauhau tanhauhau force-pushed the tanhauhau/slot-nested-in-slot branch from fb851f1 to 5ee476c Compare January 21, 2020 13:49
@tanhauhau
Copy link
Member Author

tanhauhau commented Mar 10, 2020

Related to #1824, can do

<svelte:component this={Bar}>
      <slot></slot>
      <slot name="header" slot="header"></slot>
</svelte:component>

<script>
	import Bar from './Bar.svelte';
</script>

as a forwarding workaround

@ZerdoX-x
Copy link
Contributor

ZerdoX-x commented May 7, 2020

I want to make some add-ons or wrappers on components e.g
BigButton.svelte

<script>
import Button from './Button.svelte'
</script>

<Button fz="16" h="64" {...$$props}>
  <slot slot="prepend" name="prepend" />
  <slot />
  <slot slot="append" name="append" />
</Button>

But it doesn't work so I have to wrap slots in useless and interfering divs or spans like this:

<Button fz="16" h="64" {...$$props}>
  <span slot="prepend"><slot name="prepend" /></span>
  <slot />
  <span slot="append"><slot name="append" /></span>
</Button>

@Conduitry Conduitry merged commit 8056829 into sveltejs:master Sep 29, 2020
taylorzane pushed a commit to taylorzane/svelte that referenced this pull request Dec 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

<slot slot="…"> (for passing slots through to child components) silently fails
3 participants