Jun 28, 2022 · Jun 28, 2022 · Jun 28, 2022 · Jun 28, 2022
diff --git a/8-web-components/4-template-element/article.md b/8-web-components/4-template-element/article.md

 #Template element
 #Елемент template

 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 inJavaScript,to create other elements.
 Вбудований елемент `<template>`використовується як обгортка для шаблонної розмітки HTML. Браузер не бере до уваги його вміст, лише перевіряє на правильність синтаксису. Ми можемо доступитися та використовувати його уJavaScript,щоб створювати інші елементи.

 In theory, we could create any invisible element somewhere inHTMLfor HTML markup storage purposes. What's special about `<template>`?
 Теоретично, ми могли б створити будь-який невидимий елемент де-небудь уHTMLдля зберігання у ньому розмітки HTML. Тоді що ж такого особливого у `<template>`?

 First, its content can be any validHTML,even if it normally requires a proper enclosing tag.
 По-перше, він може містити у собі будь-який коректнийHTML,навіть якщо за звичайних умов він би потребував якогось додаткового тега.

 For example, we can put there a table row `<tr>`:
 Наприклад, ми можемо помістити тег рядка таблиці `<tr>`:
 ```html
 <template>
  <tr>
    <td>Contents</td>
    <td>Вміст</td>
  </tr>
 </template>
 ```

 Usually, if we try to put `<tr>`inside, say, a `<div>`,the browser detects the invalidDOMstructure and "fixes" it, adds`<table>` around. That's not what we want. On the other hand, `<template>`keeps exactly what we place there.
 Зазвичай, якщо ми пробуємо помістити тег `<tr>`всередину, скажімо, тега `<div>`,браузер помічає некоректну структуруDOMта "виправляє" її, додаючи навколо`<table>`. Але це не те, що ми хочемо. На противагу цьому, `<template>`зберігає дані у тому вигляді, у якому ми їх туди помістили.

 We can put styles and scripts into`<template>`as well:
 Ми також можемо помістити всередину`<template>`стилі чи скрипт:

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

 The browser considers`<template>`content "out of the document": styles are not applied, scripts are not executed, `<video autoplay>`is not run, etc.
 Браузер розглядає вміст тега`<template>`як такий, який існує "за межами документа": до нього не застосовуються стилі, не виконуються скрипти, `<video autoplay>`не запускається і тому подібне.

 The content becomes live (styles apply, scripts run etc) when we insert it into the document.
 Вміст починає опрацьовуватися (застосовуються стилі, виконуються скрипти і т. ін.), коли ми вставляємо його у документ.

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

 The templatecontent is available in its`content`property as a[DocumentFragment](info:modifying-document#document-fragment) --a special type ofDOM node.
 Вміст templateдоступний у його властивості`content`як[DocumentFragment](info:modifying-document#document-fragment) --спеціальний тип вузлаDOM.

 We can treat it as any other DOM node, except one special property: when we insert it somewhere, its children are inserted instead.
 Ми можемо працювати з ним як зі всіма іншими вузлами DOM, за винятком однієї особливості: коли ми його кудись вставляємо, вставляються його дочірні елементи, а не він сам.

 For example:
 Наприклад:

 ```html run
 <template id="tmpl">
  <script>
    alert("Hello");
    alert("Привіт");
  </script>
  <div class="message">Hello, world!</div>
  <div class="message">Привіт, світ!</div>
 </template>

 <script>
  let elem = document.createElement('div');

 *!*
  //Clone the template content to reuse it multiple times
  //Клонувати вміст шаблону, для його подальшого використання
  elem.append(tmpl.content.cloneNode(true));
 */!*

  document.body.append(elem);
  //Now the script from <template> runs
  //Тепер запускається скрипт з <template>
 </script>
 ```

 Let's rewrite aShadow DOMexample from the previous chapter using `<template>`:
 Перепишемо прикладShadow DOMз попереднього розділу, використовуючи `<template>`:

 ```html run untrusted autorun="no-epub" height=60
 <template id="tmpl">
  <style> p { font-weight: bold; } </style>
  <p id="message"></p>
 </template>

 <div id="elem">Click me</div>
 <div id="elem">Клікни мене</div>

 <script>
  elem.onclick = function() {
    elem.shadowRoot.append(tmpl.content.cloneNode(true)); // (*)
 */!*

    elem.shadowRoot.getElementById('message').innerHTML = "Hello from the shadows!";
    elem.shadowRoot.getElementById('message').innerHTML = "Привіт зі світу тіней!";
  };
 </script>
 ```

 In the line`(*)` when we clone and insert `tmpl.content`,as its `DocumentFragment`,its children(`<style>`, `<p>`) are inserted instead.
 У рядку`(*)`, коли ми клонуємо та вставляємо `tmpl.content`,як його `DocumentFragment`,натомість отримуємо його дочірні(`<style>`, `<p>`).

 They form the shadow DOM:
 Вони формують Shadow DOM:

 ```html
 <div id="elem">
 </div>
 ```

 ##Summary
 ##Підсумки

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

 - `<template>`content can be any syntactically correct HTML.
 - `<template>`content is considered "out of the document",so it doesn't affect anything.
 -We can access`template.content`from JavaScript,clone it to reuse in a new component.
 - `<template>`його вмістом може бути будь-який синтаксично правильний HTML.
 - `<template>`вміст вважається "за межами документа",тому він ні на що не впливає.
 -Ми можемо доступитися до`template.content`з JavaScript,клонувати його, щоб потім знову використати у новому компоненті.

 The `<template>`tag is quite unique, because:
 Тег `<template>`є унікальним, оскільки:

 -The browser checksHTMLsyntax 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.
 -Браузер перевіряєHTMLсинтаксис всередині нього (на відміну від рядка всередині скрипта з тією ж розміткою).
 - ...Але все одно дозволяє використання будь-якого тега HTML, навіть тих, використання яких не має сенсу без відповідної обгортки (напр. `<tr>`).
 -Вміст стає інтерактивним: виконуються скрипти, запускається`<video autoplay>`і т. ін., коли ми переміщаємо його у документ.

 The `<template>`element does not feature any iteration mechanisms, data binding or variable substitutions, but we can implement those on top of it.
 Елемент `<template>`не має жодних механізмів ітерації, зв’язування даних чи заміни змінних, але ми можемо реалізувати їх поверх нього.
Original file line number	Diff line number	Diff line change
		@@ -1,78 +1,78 @@

		#Template element
		#Елемент template

		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 inJavaScript,to create other elements.
		Вбудований елемент `<template>`використовується як обгортка для шаблонної розмітки HTML. Браузер не бере до уваги його вміст, лише перевіряє на правильність синтаксису. Ми можемо доступитися та використовувати його уJavaScript,щоб створювати інші елементи.

		In theory, we could create any invisible element somewhere inHTMLfor HTML markup storage purposes. What's special about `<template>`?
		Теоретично, ми могли б створити будь-який невидимий елемент де-небудь уHTMLдля зберігання у ньому розмітки HTML. Тоді що ж такого особливого у `<template>`?

		First, its content can be any validHTML,even if it normally requires a proper enclosing tag.
		По-перше, він може містити у собі будь-який коректнийHTML,навіть якщо за звичайних умов він би потребував якогось додаткового тега.

		For example, we can put there a table row `<tr>`:
		Наприклад, ми можемо помістити тег рядка таблиці `<tr>`:
		```html
		<template>
		<tr>
		<td>Contents</td>
		<td>Вміст</td>
		</tr>
		</template>
		```

		Usually, if we try to put `<tr>`inside, say, a `<div>`,the browser detects the invalidDOMstructure and "fixes" it, adds`<table>` around. That's not what we want. On the other hand, `<template>`keeps exactly what we place there.
		Зазвичай, якщо ми пробуємо помістити тег `<tr>`всередину, скажімо, тега `<div>`,браузер помічає некоректну структуруDOMта "виправляє" її, додаючи навколо`<table>`. Але це не те, що ми хочемо. На противагу цьому, `<template>`зберігає дані у тому вигляді, у якому ми їх туди помістили.

		We can put styles and scripts into`<template>`as well:
		Ми також можемо помістити всередину`<template>`стилі чи скрипт:

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

		The browser considers`<template>`content "out of the document": styles are not applied, scripts are not executed, `<video autoplay>`is not run, etc.
		Браузер розглядає вміст тега`<template>`як такий, який існує "за межами документа": до нього не застосовуються стилі, не виконуються скрипти, `<video autoplay>`не запускається і тому подібне.

		The content becomes live (styles apply, scripts run etc) when we insert it into the document.
		Вміст починає опрацьовуватися (застосовуються стилі, виконуються скрипти і т. ін.), коли ми вставляємо його у документ.

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

		The templatecontent is available in its`content`property as a[DocumentFragment](info:modifying-document#document-fragment) --a special type ofDOM node.
		Вміст templateдоступний у його властивості`content`як[DocumentFragment](info:modifying-document#document-fragment) --спеціальний тип вузлаDOM.

		We can treat it as any other DOM node, except one special property: when we insert it somewhere, its children are inserted instead.
		Ми можемо працювати з ним як зі всіма іншими вузлами DOM, за винятком однієї особливості: коли ми його кудись вставляємо, вставляються його дочірні елементи, а не він сам.

		For example:
		Наприклад:

		```html run
		<template id="tmpl">
		<script>
		alert("Hello");
		alert("Привіт");
		</script>
		<div class="message">Hello, world!</div>
		<div class="message">Привіт, світ!</div>
		</template>

		<script>
		let elem = document.createElement('div');

		!
		//Clone the template content to reuse it multiple times
		//Клонувати вміст шаблону, для його подальшого використання
		elem.append(tmpl.content.cloneNode(true));
		/!

		document.body.append(elem);
		//Now the script from <template> runs
		//Тепер запускається скрипт з <template>
		</script>
		```

		Let's rewrite aShadow DOMexample from the previous chapter using `<template>`:
		Перепишемо прикладShadow DOMз попереднього розділу, використовуючи `<template>`:

		```html run untrusted autorun="no-epub" height=60
		<template id="tmpl">
		<style> p { font-weight: bold; } </style>
		<p id="message"></p>
		</template>

		<div id="elem">Click me</div>
		<div id="elem">Клікни мене</div>

		<script>
		elem.onclick = function() {
Expand All		@@ -82,14 +82,14 @@ Let's rewrite a Shadow DOM example from the previous chapter using `<template>`:
		elem.shadowRoot.append(tmpl.content.cloneNode(true)); // (*)
		/!

		elem.shadowRoot.getElementById('message').innerHTML = "Hello from the shadows!";
		elem.shadowRoot.getElementById('message').innerHTML = "Привіт зі світу тіней!";
		};
		</script>
		```

		In the line`(*)` when we clone and insert `tmpl.content`,as its `DocumentFragment`,its children(`<style>`, `<p>`) are inserted instead.
		У рядку`(*)`, коли ми клонуємо та вставляємо `tmpl.content`,як його `DocumentFragment`,натомість отримуємо його дочірні(`<style>`, `<p>`).

		They form the shadow DOM:
		Вони формують Shadow DOM:

		```html
		<div id="elem">
Expand All		@@ -99,18 +99,18 @@ They form the shadow DOM:
		</div>
		```

		##Summary
		##Підсумки

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

		- `<template>`content can be any syntactically correct HTML.
		- `<template>`content is considered "out of the document",so it doesn't affect anything.
		-We can access`template.content`from JavaScript,clone it to reuse in a new component.
		- `<template>`його вмістом може бути будь-який синтаксично правильний HTML.
		- `<template>`вміст вважається "за межами документа",тому він ні на що не впливає.
		-Ми можемо доступитися до`template.content`з JavaScript,клонувати його, щоб потім знову використати у новому компоненті.

		The `<template>`tag is quite unique, because:
		Тег `<template>`є унікальним, оскільки:

		-The browser checksHTMLsyntax 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.
		-Браузер перевіряєHTMLсинтаксис всередині нього (на відміну від рядка всередині скрипта з тією ж розміткою).
		- ...Але все одно дозволяє використання будь-якого тега HTML, навіть тих, використання яких не має сенсу без відповідної обгортки (напр. `<tr>`).
		-Вміст стає інтерактивним: виконуються скрипти, запускається`<video autoplay>`і т. ін., коли ми переміщаємо його у документ.

		The `<template>`element does not feature any iteration mechanisms, data binding or variable substitutions, but we can implement those on top of it.
		Елемент `<template>`не має жодних механізмів ітерації, зв’язування даних чи заміни змінних, але ми можемо реалізувати їх поверх нього.