NuxtN
Nuxt•8mo ago•
14 replies
Doritos

Self Closing Slots

Hey everyone, was wondering the following thing:
In this documentation - here we use self-closing tags
<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>

and here we dont
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

I didnt find out why exactly we do it either way...
So what exactly is a) the diffrence in detail about having self closing tags here and b) when would you consider having self closing tags and when would you not use it?
Webstorm for example mentioned this here: https://developer.mozilla.org/en-US/docs/Glossary/Void_element#self-closing_tags
-> "Self-closing tags (<tag />) do not exist in HTML." - except for void elements
Was this page helpful?
CommunitiesDocsAboutTermsPrivacy