Update slots.md

[claushellsing]

Update documentation in order to indicate how to use conditional render of default slot

Description of Problem

Proposed Solution

Additional Information

[netlify[bot]]

✅ Deploy Preview for vuejs ready!

Name	Link
🔨 Latest commit	a0a53261e4a1a1a9e21321317bd57af62fa8ff9f
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs/deploys/66321ac018d09b0008658007
😎 Deploy Preview	https://deploy-preview-2806--vuejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[brc-dd]

Can you provide more context on why this is needed? Isn't it obvious from the example above that, that $slots.foo is needed to check for <slot name="foo" />? Regarding the name when name is not explicitly specified, the docs mention:

A <slot> outlet without name implicitly has the name "default".

[claushellsing]

You're right. According to the documentation, one can interpolate knowledge and assume a $slots.default exists to check if the slot is present. However personally, I tend to prefer explicitness. It's just a personal preference.

[brc-dd]

Instead of two examples, can this be updated in the above example itself?

[claushellsing]

Like this ?

In the example below we define a Card component with three conditional slots: header, footer and the default one. When the header / footer / default is present we want wrap them to provide additional styling:

<template>
  <div class="card">
    <div v-if="$slots.header" class="card-header">
      <slot name="header" />
    </div>

    <div v-if="$slots.default" class="card-content">
      <slot />
    </div>

    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

[brc-dd]

Yeah, looks fine to me.