|
1 | 1 | # Built-in Special Elements {#built-in-special-elements}
|
2 | 2 |
|
3 | 3 | :::info Not Components
|
4 |
| -`<component>` and `<slot>` are component-like features and part of the template syntax. They are not true components and are compiled away during template compilation. As such, they are conventionally written with lowercase in templates. |
| 4 | +`<component>`, `<slot>` and `<template>` are component-like features and part of the template syntax. They are not true components and are compiled away during template compilation. As such, they are conventionally written with lowercase in templates. |
5 | 5 | :::
|
6 | 6 |
|
7 | 7 | ## `<component>` {#component}
|
@@ -139,3 +139,26 @@ Denotes slot content outlets in templates.
|
139 | 139 | `<slot>` elements in Vue templates are compiled into JavaScript, so they are not to be confused with [native `<slot>` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).
|
140 | 140 |
|
141 | 141 | - **See also:** [Component - Slots](/guide/components/slots.html)
|
| 142 | + |
| 143 | +## `<template>` {#template} |
| 144 | + |
| 145 | +The `<template>` tag is used as a placeholder when we want to use a built-in directive without rendering an element in the DOM. |
| 146 | + |
| 147 | +- **Details:** |
| 148 | + |
| 149 | + The special handling for `<template>` is only triggered if it is used with one of these directives: |
| 150 | + |
| 151 | + - `v-if`, `v-else-if`, or `v-else` |
| 152 | + - `v-for` |
| 153 | + - `v-slot` |
| 154 | + |
| 155 | + If none of those directives are present then it will be rendered as a [native `<template>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) instead. |
| 156 | + |
| 157 | + A `<template>` with a `v-for` can also have a [`key` attribute](/api/built-in-special-attributes.html#key). All other attributes and directives will be discarded, as they aren't meaningful without a corresponding element. |
| 158 | + |
| 159 | + Single-file components use a [top-level `<template>` tag](/api/sfc-spec.html#language-blocks) to wrap the entire template. That usage is separate from the use of `<template>` described above. That top-level tag is not part of the template itself and doesn't support template syntax, such as directives. |
| 160 | + |
| 161 | +- **See also:** |
| 162 | + - [Guide - `v-if` on `<template>`](/guide/essentials/conditional.html#v-if-on-template) |
| 163 | + - [Guide - `v-for` on `<template>`](/guide/essentials/list.html#v-for-on-template) |
| 164 | + - [Guide - Named slots](/guide/components/slots.html#named-slots) |
0 commit comments