Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions 8-web-components/4-template-element/article.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

# Template element

A built-in `<template>` element serves as a storage for markup. The browser ignores it contents, only checks for syntax validity, but we can access and use it in JavaScript, to create other elements.
A built-in `<template>` element serves as a storage for HTML markup templates. The browser ignores its contents, only checks for syntax validity, but we can access and use it in JavaScript, to create other elements.

In theory, we could create any invisible element somewhere in HTML for markup storage purposes. What's special about `<template>`?
In theory, we could create any invisible element somewhere in HTML for HTML markup storage purposes. What's special about `<template>`?

First, its content can be any valid HTML, even if it normally requires a proper enclosing tag.

Expand Down Expand Up @@ -31,9 +31,9 @@ We can put styles and scripts into `<template>` as well:
</template>
```

The browser considers `<template>` content "out of the document", so the style is not applied, scripts are executed, `<video autoplay>` is not run, etc.
The browser considers `<template>` content "out of the document": styles are not applied, scripts are not executed, `<video autoplay>` is not run, etc.

The content becomes live (the script executes) when we insert it.
The content becomes live (styles apply, scripts run etc) when we insert it into the document.

## Inserting template

Expand Down Expand Up @@ -87,7 +87,7 @@ Let's rewrite a Shadow DOM example from the previous chapter using `<template>`:
</script>
```

In the line `(*)` when we clone and insert `tmpl.content`, its children (`<style>`, `<p>`) are inserted instead.
In the line `(*)` when we clone and insert `tmpl.content`, as its `DocumentFragment`, its children (`<style>`, `<p>`) are inserted instead.

They form the shadow DOM:

Expand All @@ -109,8 +109,8 @@ To summarize:

The `<template>` tag is quite unique, because:

- The browser checks the syntax inside it (as opposed to using a template string inside a script).
- ...But still allows to use any top-level HTML tags, even those that don't make sense without proper wrappers (e.g. `<tr>`).
- The browser checks HTML syntax inside it (as opposed to using a template string inside a script).
- ...But still allows use of any top-level HTML tags, even those that don't make sense without proper wrappers (e.g. `<tr>`).
- The content becomes interactive: scripts run, `<video autoplay>` plays etc, when inserted into the document.

The `<template>` tag does not feature any sophisticated iteration mechanisms, data binding or variable substitutions, making it less powerful than frameworks. But we can build those on top of it.
The `<template>` element does not feature any iteration mechanisms, data binding or variable substitutions, but we can implement those on top of it.