Nuxt•3mo ago

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>

<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>

<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

11 Replies

kapa.ai•3mo ago

Hi @Doritos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The knowledge sources provided do not explicitly discuss the difference between self-closing and non-self-closing slot tags in Vue or Nuxt components, nor do they provide guidance on when to use each form. However, from the code examples in the sources, both self-closing (<slot name="header" />) and non-self-closing (<slot name="header"></slot>) slot tags are used interchangeably in Vue/Nuxt component templates. This is because, in Vue's template syntax (which is based on HTML but processed by Vue's compiler), both forms are functionally equivalent for slots—they both render the slot content if provided. The MDN note you referenced is about standard HTML, where self-closing tags are only valid for void elements (like <img />, <br />, etc.), and <slot /> is not a standard HTML element but a Vue-specific feature. In Vue templates, using either form is acceptable, and it often comes down to personal or team preference, or code style consistency. To summarize: - There is no functional difference between <slot name="header" /> and <slot name="header"></slot> in Vue/Nuxt templates. - You can use either form, but be aware that in pure HTML, only void elements should be self-closed. - For Vue/Nuxt components, choose the style that matches your project's conventions. If you need more detailed guidance, the knowledge sources do not provide further information on this topic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@201422544585097216> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DoritosOP•3mo ago

@kapa.ai are you really sure that there really is no functional difference in the self closing and not self closing slots?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources provided, there is no explicit information about any functional difference between using self-closing (<slot name="header" />) and non-self-closing (<slot name="header"></slot>) slot tags in Vue or Nuxt components. The documentation examples use both forms interchangeably, and there is no mention of a difference in behavior or recommended usage between the two styles in the context of Nuxt or Vue component templates. Therefore, according to the available documentation, there is no documented functional difference between self-closing and non-self-closing slot tags in Nuxt components. If you need a definitive answer about Vue's internal handling, you may need to consult the official Vue documentation or source code, as the Nuxt documentation does not address this detail. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@201422544585097216> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DoritosOP•3mo ago

@kapa.ai but isnt the <slot> in vue used for the examples used here the HTML native slot?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- In the context of the examples provided in the knowledge sources, the <slot> element is used within Vue components to define where slot content should be rendered. While Vue's <slot> syntax is inspired by the native HTML <slot> element used in Web Components, in Vue (and thus in Nuxt), it is processed by Vue's template compiler and is not the native HTML slot. For example, the documentation shows usage like:

<template>
  <div class="callout">
    <slot />
  </div>
</template>

<template>
  <div class="callout">
    <slot />
  </div>
</template>

and

<template>
  <section>
    <h1 class="text-4xl">
      <slot mdc-unwrap="p" />
    </h1>
    <slot name="description" />
  </section>
</template>

<template>
  <section>
    <h1 class="text-4xl">
      <slot mdc-unwrap="p" />
    </h1>
    <slot name="description" />
  </section>
</template>

These are Vue component templates, not native HTML or Web Components. The <slot> here is a Vue feature, not the native HTML slot element. This is further evidenced by the use of Vue-specific features like the mdc-unwrap prop, which is not part of the native HTML slot specification but is supported in Nuxt Content components for Markdown rendering Docs > Components > Slot. So, in summary:
No, the <slot> in the Vue/Nuxt examples is not the native HTML slot, but a Vue template feature that behaves similarly for content distribution within components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@201422544585097216> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Omnislash•3mo ago

Hello Where in the documentation ? Isn't it just to introduce the fallback content ?

Omnislash•3mo ago

Vue kinds of do it here

DoritosOP•3mo ago

I am more curious about why they use empty slots which are not self closing.

Gaming

Programming

Self Closing Slots

Did you find this page helpful?