Skip to content

Conversation

@tanhauhau
Copy link
Member

@tanhauhau tanhauhau commented Mar 26, 2020

Related #2106

Introducing $$slots

you can use $$slots to determine whether a slot is provided. $$slots is an object, where the keys are the only slot names that are provided and value is true.

for example, if you have a component, Modal,

<Modal>
   <div slot="a">hello</div>
</Modal>

will give you $$slots = { a: true }, while

<Modal>
   <div slot="a">hello</div>
   <div slot="b">world</div>

will give you $$slots = { a: true, b: true }.

You can use it to conditionally render a slot

{#if $$slots.b}
    <div>
         <slot name="b" />
    </div>
{/if}

- can't get the slotted elements at this point, because they are created after instance function.
- A viable alternative is to provide a callback to get the slotted elements after mount.
- the syntax <slot bind:this={slottedElements} /> suggested in #2106 (comment) becomes more natural that way

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases features are absent for a reason.
  • This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them.
  • Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to npm run lint!)

Tests

  • Run the tests tests with npm test or yarn test)

@tanhauhau tanhauhau added the slot label Mar 26, 2020
@Conduitry
Copy link
Member

Hi @tanhauhau sorry this has been sitting so long, even after we decided we should go forward with this. Would you mind resolving the conflicts with master please? I'm also not sure I understand the bullet points in the PR description. Are there limitations that should be kept in mind when using this?

@tanhauhau
Copy link
Member Author

@Conduitry i've resolved the conflicts. thank you for looking into this.

also, can help look at #4556 too? :)

@tvanc
Copy link

tvanc commented Sep 4, 2020

When can we expect to see this in a release? Currently working on a problem where this would be ideal

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.

3 participants