You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 8-web-components/4-template-element/article.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,9 @@
1
1
2
2
# Template element
3
3
4
-
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.
4
+
A built-in `<template>` element serves as a storage for HTML markup templates. The browser ignores it contents, only checks for syntax validity, but we can access and use it in JavaScript, to create other elements.
5
5
6
-
In theory, we could create any invisible element somewhere in HTML for markup storage purposes. What's special about `<template>`?
6
+
In theory, we could create any invisible element somewhere in HTML for HTML markup storage purposes. What's special about `<template>`?
7
7
8
8
First, its content can be any valid HTML, even if it normally requires a proper enclosing tag.
9
9
@@ -31,9 +31,9 @@ We can put styles and scripts into `<template>` as well:
31
31
</template>
32
32
```
33
33
34
-
The browser considers `<template>` content "out of the document", so the style is not applied, scripts are not executed, `<video autoplay>` is not run, etc.
34
+
The browser considers `<template>` content "out of the document": styles are not applied, scripts are not executed, `<video autoplay>` is not run, etc.
35
35
36
-
The content becomes live (the script executes) when we insert it.
36
+
The content becomes live (styles apply, scripts run etc) when we insert it into the document.
37
37
38
38
## Inserting template
39
39
@@ -87,7 +87,7 @@ Let's rewrite a Shadow DOM example from the previous chapter using `<template>`:
87
87
</script>
88
88
```
89
89
90
-
In the line `(*)` when we clone and insert `tmpl.content`, its children (`<style>`, `<p>`) are inserted instead.
90
+
In the line `(*)` when we clone and insert `tmpl.content`, as it's `DocumentFragment`, its children (`<style>`, `<p>`) are inserted instead.
91
91
92
92
They form the shadow DOM:
93
93
@@ -109,8 +109,8 @@ To summarize:
109
109
110
110
The `<template>` tag is quite unique, because:
111
111
112
-
- The browser checks the syntax inside it (as opposed to using a template string inside a script).
112
+
- The browser checks HTML syntax inside it (as opposed to using a template string inside a script).
113
113
- ...But still allows to use any top-level HTML tags, even those that don't make sense without proper wrappers (e.g. `<tr>`).
114
114
- The content becomes interactive: scripts run, `<video autoplay>` plays etc, when inserted into the document.
115
115
116
-
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.
116
+
The `<template>`element does not feature any iteration mechanisms, data binding or variable substitutions, but we can implement those on top of it.
0 commit comments