(ru) Update "<template>" page translation (#2304)

* Make title and tags like at EN-page

* Fix translation

* Add skipped example from EN-version

1 files changed, 84 insertions, 54 deletions

diff --git a/files/ru/web/html/element/template/index.html b/files/ru/web/html/element/template/index.html
index 2e4ee629db..e6ead297ab 100644
--- a/files/ru/web/html/element/template/index.html
+++ b/files/ru/web/html/element/template/index.html
@@ -1,21 +1,32 @@
 ---
-title: <template>
+title: '<template>: элемент шаблона контента'
 slug: Web/HTML/Element/template
 tags:
   - Элемент
+  - HTML
+  - HTML Веб-компоненты
+  - HTML:Основной поток
+  - HTML:Метаданные
+  - HTML:Фразовый контент
+  - HTML:Элементы поддержки скриптов
+  - Справочник
+  - Шаблон
+  - Веб
+  - Веб-компоненты
 translation_of: Web/HTML/Element/template
+browser-compat: html.elements.template
 ---
 <div>{{HTMLRef}}</div>
 
-<p><span class="seoSummary"><strong>HTML элемент контент шаблона  <code>&lt;template&gt;</code></strong> - это механизм для отложенного создания клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.</span></p>
+<p><a href="/en-US/docs/Web/HTML">HTML</a>-элемент шаблона контента <strong><code>&lt;template&gt;</code></strong> — это механизм для отложенного создания клиентского контента, который не отображается во время загрузки страницы, но может быть инициализирован при помощи JavaScript.</p>
 
-<p>Шаблон можно представить себе как фрагмент контента, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <code>&lt;template&gt;</code> во время загрузки страницы, он делает это только чтобы убедиться в валидности содержимого; само содержимое при этом не отображается.</p>
+<p>Шаблон можно представить себе как фрагмент контента страницы, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <strong><code>&lt;template&gt;</code></strong> во время загрузки страницы, он делает это, только чтобы убедиться в валидности содержимого, само содержимое при этом не отображается.</p>
 
 <table class="properties">
  <tbody>
   <tr>
-   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
-   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting element</a></td>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#метаданные">Метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#основной_поток">основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#phrasing_content">фразовый контент</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов">элементы поддержки скриптов</a></td>
   </tr>
   <tr>
    <th scope="row">Допустимый контент</th>
@@ -27,7 +38,7 @@ translation_of: Web/HTML/Element/template
   </tr>
   <tr>
    <th scope="row">Разрешённые родители</th>
-   <td>Any element that accepts <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">metadata content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, or <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting elements</a>. Also allowed as a child of a {{HTMLElement("colgroup")}} element that does <em>not</em> have a {{htmlattrxref("span", "colgroup")}} attribute.</td>
+   <td>Любые элементы, которые могут содержать <a href="/ru/docs/Web/Guide/HTML/Content_categories#метаданные">метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#phrasing_content">фразовый контент</a> или <a href="/en-US/docs/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов">элементы поддержки скриптов</a>. Допускается вкладывать элемент в {{HTMLElement("colgroup")}}, у которого <em>отсутствует</em> атрибут {{htmlattrxref("span", "colgroup")}}.</td>
   </tr>
   <tr>
    <th scope="row">Неявные роли ARIA</th>
@@ -44,13 +55,13 @@ translation_of: Web/HTML/Element/template
  </tbody>
 </table>
 
-<h2 id="Атрибуты">Атрибуты</h2>
+<h2 id="Attributes">Атрибуты</h2>
 
 <p>Элемент может иметь <a href="/en-US/docs/Web/HTML/Global_attributes">общие атрибуты</a>.</p>
 
-<p>Однако у <a href="/en-US/docs/Web/API/HTMLTemplateElement"><code>HTMLTemplateElement</code></a> есть свойство <code>content</code>, которое возвращает доступный только для чтения <a href="/ru/docs/Web/API/DocumentFragment"><code>DocumentFragment</code></a>, содержащий DOM-поддерево шаблона. Обратите внимание, что прямое испоользование значения <a href="/en-US/docs/Web/API/HTMLTemplateElement/content" title="content"><code>content</code></a> может привести к непредсказуемому поведению.</p>
+<p>Однако у <code>{{domxref("HTMLTemplateElement")}}</code> есть свойство <code>{{domxref("HTMLTemplateElement.content", "content")}}</code>, которое возвращает доступный только для чтения <code>{{domxref("DocumentFragment")}}</code>, содержащий DOM-поддерево шаблона. Обратите внимание, что прямое использование значения <code>{{domxref("HTMLTemplateElement.content", "content")}}</code> может привести к непредсказуемому поведению, см. раздел <a href="#avoiding_documentfragment_pitfall">ловушка <code>DocumentFragment</code></a> ниже.</p>
 
-<h2 id="Примеры">Примеры</h2>
+<h2 id="Examples">Примеры</h2>
 
 <p>Начнём с HTML.</p>
 
@@ -62,7 +73,7 @@ translation_of: Web/HTML/Element/template
     &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
-    &lt;!-- existing data could optionally be included here --&gt;
+    &lt;!-- данные будут вставлены сюда --&gt;
   &lt;/tbody&gt;
 &lt;/table&gt;
 
@@ -74,40 +85,42 @@ translation_of: Web/HTML/Element/template
 &lt;/template&gt;
 </pre>
 
-<p>Для начала у нас есть таблица, в которую мы собираемся вставить содержимое с помощью Javascript кода. Затем следует шаблон, который описывает структуру HTML фрагмента представляющего одну строку таблицы</p>
+<p>Для начала у нас есть таблица, в которую мы собираемся вставить контент с помощью Javascript. За таблицей следует шаблон, который описывает структуру HTML-фрагмента — строку таблицы.</p>
 
-<p>Теперь, когда таблица была создана и шаблон определён, мы используем JavaScript чтобы вставить строки в таблицу. Каждая строка строится с использованием шаблона.</p>
+<p>Теперь, когда таблица была создана, а шаблон определён, используем JavaScript, чтобы вставить строки в таблицу. Каждая строка будет строиться по шаблону.</p>
 
-<pre class="brush:js;">// Проверяем поддерживает ли браузер тег &lt;template&gt;
-// проверив наличие атрибута content у элемента template
+<pre class="brush:js;">// Убеждаемся, что браузер поддерживает тег &lt;template&gt;,
+// проверив наличие атрибута content у элемента template.
 if ('content' in document.createElement('template')) {
 
-  // Instantiate the table with the existing HTML tbody and the row with the template
-  var t = document.querySelector('#productrow'),
-  td = t.content.querySelectorAll("td");
+  // Находим элемент tbody таблицы
+  // и шаблон строки
+  var tbody = document.querySelector("tbody");
+  var template = document.querySelector('#productrow');
+
+  // Клонируем новую строку и вставляем её в таблицу
+  var clone = template.content.cloneNode(true);
+  var td = clone.querySelectorAll("td");
   td[0].textContent = "1235646565";
   td[1].textContent = "Stuff";
 
-  // клонируем новую строку и вставляем её в таблицу
-  var tb = document.getElementsByTagName("tbody");
-  var clone = document.importNode(t.content, true);
-  tb[0].appendChild(clone);
+  tbody.appendChild(clone);
 
-  // создаём новую строку
+  // Клонируем новую строку ещё раз и вставляем её в таблицу
+  var clone2 = template.content.cloneNode(true);
+  td = clone2.querySelectorAll("td");
   td[0].textContent = "0384928528";
-  td[1].textContent = "Acme Kidney Beans";
+  td[1].textContent = "Acme Kidney Beans 2";
 
- // клонируем новую строку и вставляем её в таблицу
-  var clone2 = document.importNode(t.content, true);
-  tb[0].appendChild(clone2);
+  tbody.appendChild(clone2);
 
 } else {
-  // необходимо найти другой способ добавить строку в таблицу т.к.
-  // тег &lt;template&gt; не поддерживается браузером
+  // Иной способ заполнить таблицу, потому что
+  // HTML-элемент template не поддерживается.
 }
 </pre>
 
-<p>Как результат имеем HTML таблицу с двумя новыми строками добавленными с помощью JavaScript:</p>
+<p>Как результат имеем HTML-таблицу с двумя новыми строками, добавленными с помощью JavaScript:</p>
 
 <div class="hidden">
 <pre class="brush: css">table {
@@ -118,39 +131,56 @@ table td {
 }</pre>
 </div>
 
-<p>{{EmbedLiveSample("Example", 500, 120)}}</p>
+<p>{{EmbedLiveSample("Examples", 500, 120)}}</p>
 
-<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<h2 id="Avoiding_DocumentFragment_pitfall">Ловушка <code>DocumentFragment</code></h2>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Спецификация</th>
-   <th scope="col">Статус</th>
-   <th scope="col">Комментарий</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>No change</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+<p>{{domxref("DocumentFragment")}} не подходит в качестве целевого объекта для многих событий, поэтому предпочтительнее клонировать или ссылаться на элементы внутри него.</p>
+
+<p>Рассмотрим следующие HTML-разметку и JavaScript-код:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;&lt;/div&gt;
+
+&lt;template id="template"&gt;
+  &lt;div&gt;Click me&lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const container = document.getElementById("container");
+const template = document.getElementById("template");
+
+function clickHandler(event) {
+  event.target.append(" — Clicked this div");
+}
+
+const firstClone = template.content.cloneNode(true);
+firstClone.addEventListener("click", clickHandler);
+container.appendChild(firstClone);
+
+const secondClone = template.content.firstElementChild.cloneNode(true);
+secondClone.addEventListener("click", clickHandler);
+container.appendChild(secondClone);</pre>
+
+<h3 id="Result">Результат</h3>
+
+<p>В переменной <code>firstClone</code> у нас экземпляр (клон) <code>DocumentFragment</code>, и хотя у нас получилось отрисовать его внутри контейнера, клик по нему не срабатывает. В переменной <code>secondClone</code> у нас экземпляр (клон) <code>{{domxref("HTMLDivElement")}}</code>, клик по которому работает как ожидается.</p>
+
+<p>{{EmbedLiveSample('Avoiding_DocumentFragment_pitfall')}}</p>
 
-<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+<h2 id="Specifications">Спецификации</h2>
 
+<p>{{Specifications}}</p>
 
+<h2 id="Browser_compatibility">Совместимость с браузерами</h2>
 
-<p>{{Compat("html.elements.template")}}</p>
+<p>{{Compat}}</p>
 
 <h2 id="Смотрите_также">Смотрите также</h2>
 
 <ul>
- <li>Веб компоненты: {{HTMLElement("slot")}} (и устаревший: {{HTMLElement("shadow")}})</li>
- <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a></li>
+  <li>Веб-компоненты: {{HTMLElement("slot")}} (и устаревший: {{HTMLElement("shadow")}})</li>
+  <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a></li>
 </ul>