Skip to content

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 tanhauhau force-pushed the tanhauhau/slot-nested-in-slot branch from 5ee476c to e2eae53 Compare January 21, 2020 14:08
@tanhauhau tanhauhau added the slot label Mar 3, 2020
@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