<template>
Niewidoczny szablon HTML, który skrypt kopiuje i wstawia na stronę.
- Wyświetlanie
- none
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Dowolna treść, przechowywana, ale niewyświetlana
Przykład
#<ul id="courses"></ul>
<template id="course-row">
<li><strong class="name"></strong> · liczba lekcji: <span class="lessons"></span></li>
</template>
<script>
const courses = [
{ name: 'HTML od podstaw', lessons: 24 },
{ name: 'CSS i Flexbox', lessons: 18 },
{ name: 'JavaScript na start', lessons: 32 }
]
const template = document.getElementById('course-row')
const list = document.getElementById('courses')
courses.forEach((course) => {
const item = template.content.cloneNode(true)
item.querySelector('.name').textContent = course.name
item.querySelector('.lessons').textContent = course.lessons
list.append(item)
})
</script>Definicja i zastosowanie
#Element <template> przechowuje fragment HTML, który nie jest wyświetlany ani uruchamiany przy wczytywaniu strony. Obrazy w szablonie się nie pobierają, skrypty się nie wykonują, a jego elementów nie znajdzie document.querySelector. Szablon czeka, aż użyjesz go w JavaScripcie.
Zawartość szablonu jest dostępna przez właściwość content. Wywołujesz template.content.cloneNode(true), uzupełniasz kopię danymi i wstawiasz ją do dokumentu. Tak buduje się powtarzalne elementy: wiersze tabeli, karty produktów, wiadomości w czacie.
Szablon jest też podstawą komponentów webowych (Web Components). Z atrybutem shadowrootmode przeglądarka od razu zamienia go w Shadow DOM elementu, w którym stoi, bez pisania JavaScriptu.
Składnia
#<template id="szablon">
…
</template>Atrybuty
#open | closed
Zamienia szablon w Shadow DOM elementu nadrzędnego już podczas wczytywania strony (tak zwany deklaratywny Shadow DOM).openpozwala skryptom zajrzeć do środka przezelement.shadowRoot, aclosedna to nie pozwala. Style z Shadow DOM nie wychodzą na zewnątrz, a style strony nie wchodzą do środka, co widać w przykładzie.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#shadowrootmode
open | closedZamienia szablon w Shadow DOM elementu nadrzędnego już podczas wczytywania strony (tak zwany deklaratywny Shadow DOM). open pozwala skryptom zajrzeć do środka przez element.shadowRoot, a closed na to nie pozwala. Style z Shadow DOM nie wychodzą na zewnątrz, a style strony nie wchodzą do środka, co widać w przykładzie.
<style>
p { color: #f97316; }
</style>
<p>Ten akapit jest pomarańczowy, bo dotyczy go styl strony.</p>
<div>
<template shadowrootmode="open">
<p>Ten akapit jest w Shadow DOM, więc styl strony go nie dotyczy.</p>
</template>
</div>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
template {
display: none;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Uzupełniając kopię szablonu danymi, używaj
textContent, a nieinnerHTML. Chronisz się w ten sposób przed wstrzyknięciem obcego kodu. - Pamiętaj o argumencie w
cloneNode(true). Beztrueskopiujesz tylko pusty fragment, bez elementów w środku. - Szablon możesz umieścić w dowolnym miejscu dokumentu, także w
<head>czy wewnątrz tabeli. Nie zepsuje układu, bo nie jest wyświetlany.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.