Skip to content

Commit 9dd81cd

Browse files
Add an API entry for <template> (#2154)
1 parent 95aabcf commit 9dd81cd

File tree

1 file changed

+24
-1
lines changed

1 file changed

+24
-1
lines changed

src/api/built-in-special-elements.md

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Built-in Special Elements {#built-in-special-elements}
22

33
:::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.
55
:::
66

77
## `<component>` {#component}
@@ -139,3 +139,26 @@ Denotes slot content outlets in templates.
139139
`<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).
140140

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

Comments
 (0)