Skip to content

$$slots to check whether slots is provided #4602

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

Merged
merged 3 commits into from
Aug 13, 2020

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