Елемент template

Вбудований елемент <template> використовується як обгортка для шаблонної розмітки HTML. Браузер не бере до уваги його вміст, лише перевіряє на правильність синтаксису. Ми можемо доступитися та використовувати його у JavaScript, щоб створювати інші елементи.

Теоретично, ми могли б створити будь-який невидимий елемент де-небудь у HTML для зберігання у ньому розмітки HTML. Тоді що ж такого особливого у <template>?

По-перше, він може містити у собі будь-який коректний HTML, навіть якщо за звичайних умов він би потребував якогось додаткового тега.

Наприклад, ми можемо помістити тег рядка таблиці <tr>:

<template> <tr> <td>Вміст</td> </tr> </template>

Зазвичай, якщо ми пробуємо помістити тег <tr> всередину, скажімо, тега <div>, браузер помічає некоректну структуру DOM та “виправляє” її, додаючи навколо <table>. Але це не те, що ми хочемо. На противагу цьому, <template> зберігає дані у тому вигляді, у якому ми їх туди помістили.

Ми також можемо помістити всередину <template> стилі чи скрипт:

<template> <style> p { font-weight: bold; } </style> <script> alert("Привіт"); </script> </template>

Браузер розглядає вміст тега <template> як такий, який існує “за межами документа”: до нього не застосовуються стилі, не виконуються скрипти, <video autoplay> не запускається і тому подібне.

Вміст починає опрацьовуватися (застосовуються стилі, виконуються скрипти і т. ін.), коли ми вставляємо його у документ.

Вставка шаблону

Вміст template доступний у його властивості content як DocumentFragment – спеціальний тип вузла DOM.

Ми можемо працювати з ним як зі всіма іншими вузлами DOM, за винятком однієї особливості: коли ми його кудись вставляємо, вставляються його дочірні елементи, а не він сам.

Наприклад:

<template id="tmpl"> <script> alert("Привіт"); </script> <div class="message">Привіт, світ!</div> </template> <script> let elem = document.createElement('div'); // Клонувати вміст шаблону, для його подальшого використання elem.append(tmpl.content.cloneNode(true)); document.body.append(elem); // Тепер запускається скрипт з <template> </script>

Перепишемо приклад Shadow DOM з попереднього розділу, використовуючи <template>:

<template id="tmpl"> <style> p { font-weight: bold; } </style> <p id="message"></p> </template> <div id="elem">Клікни мене</div> <script> elem.onclick = function() { elem.attachShadow({mode: 'open'}); elem.shadowRoot.append(tmpl.content.cloneNode(true)); // (*) elem.shadowRoot.getElementById('message').innerHTML = "Привіт зі світу тіней!"; }; </script>

У рядку (*), коли ми клонуємо та вставляємо tmpl.content, як його DocumentFragment, натомість отримуємо його дочірні (<style>, <p>).

Вони формують Shadow DOM:

<div id="elem"> #shadow-root <style> p { font-weight: bold; } </style> <p id="message"></p> </div>

Підсумки

Узагальнимо:

• <template> його вмістом може бути будь-який синтаксично правильний HTML.
• <template> вміст вважається “за межами документа”, тому він ні на що не впливає.
• Ми можемо доступитися до template.content з JavaScript, клонувати його, щоб потім знову використати у новому компоненті.

Тег <template> є унікальним, оскільки:

• Браузер перевіряє HTML синтаксис всередині нього (на відміну від рядка всередині скрипта з тією ж розміткою).
• …Але все одно дозволяє використання будь-якого тега HTML, навіть тих, використання яких не має сенсу без відповідної обгортки (напр. <tr>).
• Вміст стає інтерактивним: виконуються скрипти, запускається <video autoplay> і т. ін., коли ми переміщаємо його у документ.

Елемент <template> не має жодних механізмів ітерації, зв’язування даних чи заміни змінних, але ми можемо реалізувати їх поверх нього.