From 18b8cb290722fdf69de60e93f72633bfd7678223 Mon Sep 17 00:00:00 2001
From: sedlukha <sedlukha@icloud.com>
Date: Fri, 8 Nov 2024 21:37:11 +0300
Subject: [PATCH 1/8] [ru]: <template> article translate sync

---
 files/ru/web/html/element/template/index.md | 288 ++++++++++++++++++--
 1 file changed, 262 insertions(+), 26 deletions(-)

diff --git a/files/ru/web/html/element/template/index.md b/files/ru/web/html/element/template/index.md
index f6a818fd52cfd9..c42eb7fe1c8066 100644
--- a/files/ru/web/html/element/template/index.md
+++ b/files/ru/web/html/element/template/index.md
@@ -1,31 +1,81 @@
 ---
 title: "<template>: элемент шаблона контента"
 slug: Web/HTML/Element/template
+l10n:
+  sourceCommit: c749deb4ccb647d792deee4807d4852104bedd9d
 ---
 
 {{HTMLSidebar}}
 
-[HTML](/ru/docs/Web/HTML)-элемент шаблона контента **`<template>`** — это механизм для отложенного создания клиентского контента, который не отображается во время загрузки страницы, но может быть инициализирован при помощи JavaScript.
+[HTML](/ru/docs/Web/HTML)-элемент шаблона контента **`<template>`** служит механизмом хранения фрагментов {{Glossary("HTML")}}, которые могут быть использованы позже при помощи JavaScript или немедленно сгенерированы в теневом DOM.
 
-Шаблон можно представить себе как фрагмент контента страницы, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента **`<template>`** во время загрузки страницы, он делает это, только чтобы убедиться в валидности содержимого, само содержимое при этом не отображается.
+## Атрибуты
 
-| [Категории контента](/ru/docs/Web/Guide/HTML/Content_categories) | [Метаданные](/ru/docs/Web/Guide/HTML/Content_categories#метаданные), [основной поток](/ru/docs/Web/Guide/HTML/Content_categories#основной_поток), [фразовый контент](/ru/docs/Web/Guide/HTML/Content_categories#phrasing_content), [элементы поддержки скриптов](/ru/docs/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов)                                                                                                                  |
-| ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Допустимый контент                                               | Нет ограничений                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| Пропуск тегов                                                    | Нет, открывающий и закрывающий теги обязательны.                                                                                                                                                                                                                                                                                                                                                                                                          |
-| Допустимые родители                                              | Любые элементы, которые могут содержать [метаданные](/ru/docs/Web/Guide/HTML/Content_categories#метаданные), [фразовый контент](/ru/docs/Web/Guide/HTML/Content_categories#phrasing_content) или [элементы поддержки скриптов](/ru/docs/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов). Допускается вкладывать элемент в {{HTMLElement("colgroup")}}, у которого _отсутствует_ атрибут [`span`](/ru/docs/Web/HTML/Element/colgroup#span). |
-| Неявные ARIA-роли                                                | [Нет соответствующей роли](https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role)                                                                                                                                                                                                                                                                                                                                                                    |
-| Допустимые ARIA-роли                                             | Нет                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| DOM-интерфейс                                                    | {{domxref("HTMLTemplateElement")}}                                                                                                                                                                                                                                                                                                                                                                                                                        |
+Элемент может иметь [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
-## Атрибуты
+- `shadowrootmode`
+
+  - : Создает [теневой корень](/en-US/docs/Glossary/Shadow_tree) для родительского элемента.
+    Это декларативная версия метода {{domxref("Element.attachShadow()")}} и принимает те же {{glossary("enumerated", "перечисляемые")}} значения.
+
+    - `open`
+
+      - : Открывает внутренний DOM теневого корня для JavaScript (рекомендуется для большинства случаев использования).
+
+    - `closed`
+
+      - : Скрывает внутренний DOM теневого корня от JavaScript.
+
+    > [!NOTE]
+    > HTML-парсер создает объект {{domxref("ShadowRoot")}} в DOM для первого `<template>` в узле с установленным этим атрибутом на допустимое значение.
+    > Если атрибут не установлен или имеет недопустимое значение — или если `ShadowRoot` уже был создан декларативно в том же родительском узле — то создается {{domxref("HTMLTemplateElement")}}.
+    > {{domxref("HTMLTemplateElement")}} не может быть позже преобразован в теневой корень после разбора, например, путем установки {{domxref("HTMLTemplateElement.shadowRootMode")}}.
+
+    > [!NOTE]
+    > Вы можете найти нестандартный атрибут `shadowroot` в старых руководствах и примерах, которые ранее поддерживались в Chrome 90-110. Этот атрибут был удален и заменен стандартным атрибутом `shadowrootmode`.
+
+- `shadowrootclonable`
+
+  - : Устанавливает значение свойства [`clonable`](/en-US/docs/Web/API/ShadowRoot/clonable) для [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot), созданного с использованием этого элемента, в `true`.
+    Если установлен, клон теневого хоста (родительского элемента этого `<template>`), созданный с помощью {{domxref("Node.cloneNode()")}} или {{domxref("Document.importNode()")}}, будет включать теневой корень в копию.
+
+- `shadowrootdelegatesfocus`
+
+  - : Устанавливает значение свойства [`delegatesFocus`](/en-US/docs/Web/API/ShadowRoot/delegatesFocus) для [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot), созданного с использованием этого элемента, в `true`.
+    Если установлен и выбран нефокусируемый элемент в теневом дереве, то фокус делегируется первому фокусируемому элементу в дереве.
+    Значение по умолчанию - `false`.
+
+- `shadowrootserializable` {{experimental_inline}}
+
+  - : Устанавливает значение свойства [`serializable`](/en-US/docs/Web/API/ShadowRoot/serializable) для [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot), созданного с использованием этого элемента, в `true`.
+    Если установлено, теневой корень может быть сериализован путем вызова методов {{DOMxRef('Element.getHTML()')}} или {{DOMxRef('ShadowRoot.getHTML()')}} с параметром `options.serializableShadowRoots`, установленным в `true`.
+    Значение по умолчанию - `false`.
+
+## Примечания по использованию
+
+Существует два основных способа использования элемента `<template>`.
 
-Элемент может иметь [общие атрибуты](/ru/docs/Web/HTML/Global_attributes).
+### Фрагмент документа шаблона
 
-Однако у `{{domxref("HTMLTemplateElement")}}` есть свойство `{{domxref("HTMLTemplateElement.content", "content")}}`, которое возвращает доступный только для чтения `{{domxref("DocumentFragment")}}`, содержащий DOM-поддерево шаблона. Обратите внимание, что прямое использование значения `{{domxref("HTMLTemplateElement.content", "content")}}` может привести к непредсказуемому поведению, см. раздел [ловушка `DocumentFragment`](#avoiding_documentfragment_pitfall) ниже.
+По умолчанию содержимое элемента не отображается.
+Интерфейс {{domxref("HTMLTemplateElement")}} включает стандартное свойство {{domxref("HTMLTemplateElement.content", "content")}} (без эквивалентного атрибута содержимого/разметки). Это свойство `content` является только для чтения и содержит {{domxref("DocumentFragment")}}, который представляет поддерево DOM, заданное шаблоном.
+Этот фрагмент можно клонировать с помощью метода {{domxref("Node.cloneNode", "cloneNode")}} и вставить в DOM.
+
+Будьте осторожны при использовании свойства `content`, так как возвращаемый `DocumentFragment` может иметь неожиданные свойства.
+Для получения более подробной информации см. раздел [Избегание ошибок DocumentFragment](#avoiding_documentfragment_pitfalls) ниже.
+
+### Декларативный теневой DOM
+
+Если элемент `<template>` содержит атрибут [`shadowrootmode`](#shadowrootmode) со значением `open` или `closed`, HTML-парсер немедленно создает теневой DOM. Элемент заменяется в DOM его содержимым, заключенным в {{domxref("ShadowRoot")}}, который присоединен к родительскому элементу.
+Это декларативный эквивалент вызова {{domxref("Element.attachShadow()")}} для присоединения теневого корня к элементу.
+
+Если элемент имеет другое значение для `shadowrootmode` или не имеет атрибута `shadowrootmode`, парсер создает {{domxref("HTMLTemplateElement")}}.
+Аналогично, если есть несколько декларативных теневых корней, только первый будет заменен на {{domxref("ShadowRoot")}} — последующие экземпляры будут разобраны как объекты {{domxref("HTMLTemplateElement")}}.
 
 ## Примеры
 
+### Генерация строк таблицы
+
 Начнём с HTML.
 
 ```html
@@ -59,19 +109,19 @@ slug: Web/HTML/Element/template
 if ("content" in document.createElement("template")) {
   // Находим элемент tbody таблицы
   // и шаблон строки
-  var tbody = document.querySelector("tbody");
-  var template = document.querySelector("#productrow");
+  const tbody = document.querySelector("tbody");
+  const template = document.querySelector("#productrow");
 
   // Клонируем новую строку и вставляем её в таблицу
-  var clone = template.content.cloneNode(true);
-  var td = clone.querySelectorAll("td");
+  const clone = template.content.cloneNode(true);
+  let td = clone.querySelectorAll("td");
   td[0].textContent = "1235646565";
   td[1].textContent = "Stuff";
 
   tbody.appendChild(clone);
 
   // Клонируем новую строку ещё раз и вставляем её в таблицу
-  var clone2 = template.content.cloneNode(true);
+  const clone2 = template.content.cloneNode(true);
   td = clone2.querySelectorAll("td");
   td[0].textContent = "0384928528";
   td[1].textContent = "Acme Kidney Beans 2";
@@ -96,9 +146,119 @@ table td {
 
 {{EmbedLiveSample("Examples", 500, 120)}}
 
+### Реализация декларативного теневого DOM
+
+В этом примере скрытое предупреждение добавляется в начале разметки. Оно затем будет показано через JavaScript, если браузер не поддерживает атрибут `shadowrootmode`. Далее следуют два элемента {{HTMLElement("article")}}, каждый из которых содержит вложенные элементы {{HTMLElement("style")}} с различным поведением. Первый `<style>` глобален для всего документа. Второй имеет область видимости, ограниченную теневым корнем, созданным вместо элемента `<template>`, благодаря наличию атрибута `shadowrootmode`.
+
+```html
+<p hidden>
+  ⛔ Ваш браузер еще не поддерживает атрибут <code>shadowrootmode</code>.
+</p>
+<article>
+  <style>
+    p {
+      padding: 8px;
+      background-color: wheat;
+    }
+  </style>
+  <p>Я нахожусь в DOM.</p>
+</article>
+<article>
+  <template shadowrootmode="open">
+    <style>
+      p {
+        padding: 8px;
+        background-color: plum;
+      }
+    </style>
+    <p>Я нахожусь в теневом DOM.</p>
+  </template>
+</article>
+```
+
+js
+const isShadowRootModeSupported =
+HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode");
+
+document
+.querySelector("p[hidden]")
+.toggleAttribute("hidden", isShadowRootModeSupported);
+
+
+{{EmbedGHLiveSample("dom-examples/shadow-dom/shadowrootmode/scoping.html", "", "120")}}
+
+### Декларативный теневой DOM с делегированием фокуса
+
+Этот пример демонстрирует, как `shadowrootdelegatesfocus` применяется к теневому корню, созданному декларативно, и как это влияет на фокус.
+
+Сначала в `<div>` объявляется теневой корень с помощью элемента `<template>` с атрибутом `shadowrootmode`.
+Это отображает и нефокусируемый `<div>`, содержащий текст, и фокусируемый элемент `<input>`.
+Также используется CSS для стилизации элементов с [`:focus`](/ru/docs/Web/CSS/:focus) синим цветом и для обычной стилизации элемента-хоста.
+
+```html
+<div>
+  <template shadowrootmode="open">
+    <style>
+      :host {
+        display: block;
+        border: 1px dotted black;
+        padding: 10px;
+        margin: 10px;
+      }
+      :focus {
+        outline: 2px solid blue;
+      }
+    </style>
+    <div>Кликабельный текст в теневом DOM</div>
+    <input type="text" placeholder="Инпут внутри теневого DOM" />
+  </template>
+</div>
+```
+
+Второй блок кода идентичен, за исключением того, что он устанавливает атрибут `shadowrootdelegatesfocus`, который делегирует фокус первому фокусируемому элементу в дереве, если выбран нефокусируемый элемент в дереве.
+
+```html
+<div>
+  <template shadowrootmode="open" shadowrootdelegatesfocus>
+    <style>
+      :host {
+        display: block;
+        border: 1px dotted black;
+        padding: 10px;
+        margin: 10px;
+      }
+      :focus {
+        outline: 2px solid blue;
+      }
+    </style>
+    <div>Кликабельный текст в теневом DOM</div>
+    <input type="text" placeholder="Ввод внутри теневого DOM" />
+  </template>
+</div>
+```
+
+Наконец, мы используем следующий CSS для применения границы желто-зеленого цвета к родительскому элементу `<div>`, когда он имеет фокус.
+
+```css
+div:focus {
+  border: 2px solid red;
+}
+```
+
+Результаты показаны ниже.
+Когда HTML впервые отображается, элементы не имеют стилизации, как показано на первом изображении.
+Для теневого корня, у которого не установлен `shadowrootdelegatesfocus`, вы можете нажать в любом месте, кроме `<input>`, и фокус не изменится (если выбрать элемент `<input>`, он будет выглядеть как на втором изображении).
+
+![Скриншот кода без установленного фокуса](template_with_no_focus.png)
+
+Для теневого корня с установленным `shadowrootdelegatesfocus`, нажатие на текст (который нефокусируем) выбирает элемент `<input>`, так как это первый фокусируемый элемент в дереве.
+Это также фокусирует родительский элемент, как показано ниже.
+
+![Скриншот кода с установленным фокусом](template_with_focus.png)
+
 ## Ловушка `DocumentFragment`
 
-{{domxref("DocumentFragment")}} не подходит в качестве целевого объекта для многих событий, поэтому предпочтительнее клонировать или ссылаться на элементы внутри него.
+Когда значение {{domxref("DocumentFragment")}} передается, методы {{domxref("Node.appendChild")}} и подобные перемещают только _дочерние узлы_ этого значения в целевой узел. Поэтому обычно предпочтительнее привязывать обработчики событий к дочерним элементам `DocumentFragment`, а не к самому `DocumentFragment`.
 
 Рассмотрим следующие HTML-разметку и JavaScript-код:
 
@@ -108,7 +268,7 @@ table td {
 <div id="container"></div>
 
 <template id="template">
-  <div>Click me</div>
+  <div>Кликни на меня</div>
 </template>
 ```
 
@@ -119,24 +279,93 @@ const container = document.getElementById("container");
 const template = document.getElementById("template");
 
 function clickHandler(event) {
-  event.target.append(" — Clicked this div");
+  event.target.append(" — Вы кликнули на этот 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);
+const secondClone = template.content.cloneNode(true);
+secondClone.children[0].addEventListener("click", clickHandler);
 container.appendChild(secondClone);
 ```
 
 ### Результат
 
-В переменной `firstClone` у нас экземпляр (клон) `DocumentFragment`, и хотя у нас получилось отрисовать его внутри контейнера, клик по нему не срабатывает. В переменной `secondClone` у нас экземпляр (клон) `{{domxref("HTMLDivElement")}}`, клик по которому работает как ожидается.
+Поскольку `firstClone` является `DocumentFragment`, только его дочерние элементы добавляются в `container` при вызове `appendChild`; обработчики событий `firstClone` не копируются. В отличие от этого, поскольку обработчик событий добавлен к первому _дочернему узлу_ `secondClone`, обработчик событий копируется при вызове `appendChild`, и клик по нему работает так, как ожидалось.
 
 {{EmbedLiveSample('Avoiding_DocumentFragment_pitfall')}}
 
+## Техническая
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/ru/docs/Web/HTML/Content_categories"
+          >Категории контента</a
+        >
+      </th>
+      <td>
+        <a href="/ru/docs/Web/HTML/Content_categories#метаданные"
+          >Метаданные</a
+        >,
+        <a href="/ru/docs/Web/HTML/Content_categories#основной_поток"
+          >основной поток</a
+        >,
+        <a href="/ru/docs/Web/HTML/Content_categories#фразовый_контент"
+          >фразовый контент</a
+        >,
+        <a
+          href="/ru/docs/Web/HTML/Content_categories#элементы_поддержки_скриптов"
+          >элементы поддержки скриптов</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Допустимый контент</th>
+      <td>Нет ограничений</td>
+    </tr>
+    <tr>
+      <th scope="row">Пропуск тега</th>
+      <td>Отсутствует, открывающий и закрывающий теги обязательны.</td>
+    </tr>
+    <tr>
+      <th scope="row">Допустимые родители</th>
+      <td>
+        Любой элемент, принимающий
+        <a href="/ru/docs/Web/HTML/Content_categories#метаданные"
+          >метаданные</a
+        >,
+        <a href="/ru/docs/Web/HTML/Content_categories#фразовый_контент"
+          >фразовый контент</a
+        >, или
+        <a
+          href="/ru/docs/Web/HTML/Content_categories#элементы_поддержки_скриптов"
+          >элементы поддержки скриптов</a
+        >. Также разрешено как дочерний элемент элемента {{HTMLElement("colgroup")}}, у которого <em>нет</em> атрибута <a href="/en-US/docs/Web/HTML/Element/colgroup#span"><code>span</code></a>.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Неявная ARIA-роль</th>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Нет соответствующей роли</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Допустимые ARIA-роли</th>
+      <td>Роли не допускаются</td>
+    </tr>
+    <tr>
+      <th scope="row">DOM-интерфейс</th>
+      <td>{{domxref("HTMLTemplateElement")}}</td>
+    </tr>
+  </tbody>
+</table>
+
 ## Спецификации
 
 {{Specifications}}
@@ -147,5 +376,12 @@ container.appendChild(secondClone);
 
 ## Смотрите также
 
-- Веб-компоненты: {{HTMLElement("slot")}} (и устаревший: {{HTMLElement("shadow")}})
-- [Использование шаблонов и слотов](/ru/docs/Web/Web_Components/Using_templates_and_slots)
+- HTML-атрибуты [`part`](/en-US/docs/Web/HTML/Global_attributes/part) и [`exportparts`](/en-US/docs/Web/HTML/Global_attributes/exportparts)
+- HTML-элемент {{HTMLElement("slot")}}
+- CSS-псевдоклассы {{CSSXref(":host")}}, {{CSSXref(":host_function", ":host()")}} и {{CSSXref(":host-context", ":host-context()")}}
+- CSS-псевдоэлементы {{CSSXref("::part")}} и {{CSSXref("::slotted")}}
+- Интерфейс [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot)
+- [Использование шаблонов и слотов](/en-US/docs/Web/API/Web_components/Using_templates_and_slots)
+- Модуль [CSS scoping](/en-US/docs/Web/CSS/CSS_scoping)
+- [Декларативный теневой DOM (с использованием html)](/en-US/docs/Web/API/Web_components/Using_shadow_DOM#declaratively_with_html) в _Using Shadow DOM_
+- [Декларативный теневой DOM](https://web.dev/articles/declarative-shadow-dom) на web.dev (2023)

From 2cc0ecc3ddbda74bb85e9427eadb8dffd1c529d3 Mon Sep 17 00:00:00 2001
From: Arthur Sedlukha <sedlukha@icloud.com>
Date: Fri, 8 Nov 2024 21:42:01 +0300
Subject: [PATCH 2/8] Fix extra space

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/ru/web/html/element/template/index.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/files/ru/web/html/element/template/index.md b/files/ru/web/html/element/template/index.md
index c42eb7fe1c8066..c0fcb61ccd8bc7 100644
--- a/files/ru/web/html/element/template/index.md
+++ b/files/ru/web/html/element/template/index.md
@@ -184,7 +184,6 @@ document
 .querySelector("p[hidden]")
 .toggleAttribute("hidden", isShadowRootModeSupported);
 
-
 {{EmbedGHLiveSample("dom-examples/shadow-dom/shadowrootmode/scoping.html", "", "120")}}
 
 ### Декларативный теневой DOM с делегированием фокуса

From 06748e9d0ccf476ba6bfe8f1928d98c1d296d725 Mon Sep 17 00:00:00 2001
From: Arthur Sedlukha <sedlukha@icloud.com>
Date: Fri, 8 Nov 2024 21:44:55 +0300
Subject: [PATCH 3/8] ru: <template> - attributes fix

---
 files/ru/web/html/element/template/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ru/web/html/element/template/index.md b/files/ru/web/html/element/template/index.md
index c0fcb61ccd8bc7..8d0417236f6cac 100644
--- a/files/ru/web/html/element/template/index.md
+++ b/files/ru/web/html/element/template/index.md
@@ -11,7 +11,7 @@ l10n:
 
 ## Атрибуты
 
-Элемент может иметь [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
+К этому элементу применимы [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
 - `shadowrootmode`
 

From f7386c73b3dc24938ed9b92cb4ac1f84e70c9ffa Mon Sep 17 00:00:00 2001
From: sedlukha <sedlukha@icloud.com>
Date: Fri, 8 Nov 2024 21:51:19 +0300
Subject: [PATCH 4/8] [ru]: <template> - fix code example highlight

---
 files/ru/web/html/element/template/index.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/files/ru/web/html/element/template/index.md b/files/ru/web/html/element/template/index.md
index 8d0417236f6cac..bb0242ca39dd6e 100644
--- a/files/ru/web/html/element/template/index.md
+++ b/files/ru/web/html/element/template/index.md
@@ -176,13 +176,14 @@ table td {
 </article>
 ```
 
-js
+```js
 const isShadowRootModeSupported =
 HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode");
 
 document
 .querySelector("p[hidden]")
 .toggleAttribute("hidden", isShadowRootModeSupported);
+```
 
 {{EmbedGHLiveSample("dom-examples/shadow-dom/shadowrootmode/scoping.html", "", "120")}}
 

From e1f30b4bb6983d1e86156e07930816c42900822c Mon Sep 17 00:00:00 2001
From: Arthur Sedlukha <sedlukha@icloud.com>
Date: Sun, 10 Nov 2024 19:05:57 +0300
Subject: [PATCH 5/8] Apply suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/ru/web/html/element/template/index.md | 26 ++++++++++-----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/files/ru/web/html/element/template/index.md b/files/ru/web/html/element/template/index.md
index bb0242ca39dd6e..5b8a93f1806a6a 100644
--- a/files/ru/web/html/element/template/index.md
+++ b/files/ru/web/html/element/template/index.md
@@ -15,7 +15,7 @@ l10n:
 
 - `shadowrootmode`
 
-  - : Создает [теневой корень](/en-US/docs/Glossary/Shadow_tree) для родительского элемента.
+  - : Создает [теневой корень](/ru/docs/Glossary/Shadow_tree) для родительского элемента.
     Это декларативная версия метода {{domxref("Element.attachShadow()")}} и принимает те же {{glossary("enumerated", "перечисляемые")}} значения.
 
     - `open`
@@ -36,18 +36,18 @@ l10n:
 
 - `shadowrootclonable`
 
-  - : Устанавливает значение свойства [`clonable`](/en-US/docs/Web/API/ShadowRoot/clonable) для [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot), созданного с использованием этого элемента, в `true`.
+  - : Устанавливает значение свойства [`clonable`](/ru/docs/Web/API/ShadowRoot/clonable) для [`ShadowRoot`](/ru/docs/Web/API/ShadowRoot), созданного с использованием этого элемента, в `true`.
     Если установлен, клон теневого хоста (родительского элемента этого `<template>`), созданный с помощью {{domxref("Node.cloneNode()")}} или {{domxref("Document.importNode()")}}, будет включать теневой корень в копию.
 
 - `shadowrootdelegatesfocus`
 
-  - : Устанавливает значение свойства [`delegatesFocus`](/en-US/docs/Web/API/ShadowRoot/delegatesFocus) для [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot), созданного с использованием этого элемента, в `true`.
+  - : Устанавливает значение свойства [`delegatesFocus`](/ru/docs/Web/API/ShadowRoot/delegatesFocus) для [`ShadowRoot`](/ru/docs/Web/API/ShadowRoot), созданного с использованием этого элемента, в `true`.
     Если установлен и выбран нефокусируемый элемент в теневом дереве, то фокус делегируется первому фокусируемому элементу в дереве.
     Значение по умолчанию - `false`.
 
 - `shadowrootserializable` {{experimental_inline}}
 
-  - : Устанавливает значение свойства [`serializable`](/en-US/docs/Web/API/ShadowRoot/serializable) для [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot), созданного с использованием этого элемента, в `true`.
+  - : Устанавливает значение свойства [`serializable`](/ru/docs/Web/API/ShadowRoot/serializable) для [`ShadowRoot`](/ru/docs/Web/API/ShadowRoot), созданного с использованием этого элемента, в `true`.
     Если установлено, теневой корень может быть сериализован путем вызова методов {{DOMxRef('Element.getHTML()')}} или {{DOMxRef('ShadowRoot.getHTML()')}} с параметром `options.serializableShadowRoots`, установленным в `true`.
     Значение по умолчанию - `false`.
 
@@ -178,11 +178,11 @@ table td {
 
 ```js
 const isShadowRootModeSupported =
-HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode");
+  HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode");
 
 document
-.querySelector("p[hidden]")
-.toggleAttribute("hidden", isShadowRootModeSupported);
+  .querySelector("p[hidden]")
+  .toggleAttribute("hidden", isShadowRootModeSupported);
 ```
 
 {{EmbedGHLiveSample("dom-examples/shadow-dom/shadowrootmode/scoping.html", "", "120")}}
@@ -344,7 +344,7 @@ container.appendChild(secondClone);
         <a
           href="/ru/docs/Web/HTML/Content_categories#элементы_поддержки_скриптов"
           >элементы поддержки скриптов</a
-        >. Также разрешено как дочерний элемент элемента {{HTMLElement("colgroup")}}, у которого <em>нет</em> атрибута <a href="/en-US/docs/Web/HTML/Element/colgroup#span"><code>span</code></a>.
+        >. Также разрешено как дочерний элемент элемента {{HTMLElement("colgroup")}}, у которого <em>нет</em> атрибута <a href="/ru/docs/Web/HTML/Element/colgroup#span"><code>span</code></a>.
       </td>
     </tr>
     <tr>
@@ -376,12 +376,12 @@ container.appendChild(secondClone);
 
 ## Смотрите также
 
-- HTML-атрибуты [`part`](/en-US/docs/Web/HTML/Global_attributes/part) и [`exportparts`](/en-US/docs/Web/HTML/Global_attributes/exportparts)
+- HTML-атрибуты [`part`](/ru/docs/Web/HTML/Global_attributes/part) и [`exportparts`](/ru/docs/Web/HTML/Global_attributes/exportparts)
 - HTML-элемент {{HTMLElement("slot")}}
 - CSS-псевдоклассы {{CSSXref(":host")}}, {{CSSXref(":host_function", ":host()")}} и {{CSSXref(":host-context", ":host-context()")}}
 - CSS-псевдоэлементы {{CSSXref("::part")}} и {{CSSXref("::slotted")}}
-- Интерфейс [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot)
-- [Использование шаблонов и слотов](/en-US/docs/Web/API/Web_components/Using_templates_and_slots)
-- Модуль [CSS scoping](/en-US/docs/Web/CSS/CSS_scoping)
-- [Декларативный теневой DOM (с использованием html)](/en-US/docs/Web/API/Web_components/Using_shadow_DOM#declaratively_with_html) в _Using Shadow DOM_
+- Интерфейс [`ShadowRoot`](/ru/docs/Web/API/ShadowRoot)
+- [Использование шаблонов и слотов](/ru/docs/Web/API/Web_components/Using_templates_and_slots)
+- Модуль [CSS scoping](/ru/docs/Web/CSS/CSS_scoping)
+- [Декларативный теневой DOM (с использованием html)](/ru/docs/Web/API/Web_components/Using_shadow_DOM#declaratively_with_html) в _Using Shadow DOM_
 - [Декларативный теневой DOM](https://web.dev/articles/declarative-shadow-dom) на web.dev (2023)

From e30ad29e9a9a29a9e027f773ff9b760ba33ef0a0 Mon Sep 17 00:00:00 2001
From: sedlukha <sedlukha@icloud.com>
Date: Thu, 5 Dec 2024 17:43:41 +0300
Subject: [PATCH 6/8] [ru]: update Web/HTML/Element/template translation

---
 files/ru/web/html/element/template/index.md | 29 ++++++++++-----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/files/ru/web/html/element/template/index.md b/files/ru/web/html/element/template/index.md
index 5b8a93f1806a6a..c9479707031434 100644
--- a/files/ru/web/html/element/template/index.md
+++ b/files/ru/web/html/element/template/index.md
@@ -57,19 +57,19 @@ l10n:
 
 ### Фрагмент документа шаблона
 
-По умолчанию содержимое элемента не отображается.
-Интерфейс {{domxref("HTMLTemplateElement")}} включает стандартное свойство {{domxref("HTMLTemplateElement.content", "content")}} (без эквивалентного атрибута содержимого/разметки). Это свойство `content` является только для чтения и содержит {{domxref("DocumentFragment")}}, который представляет поддерево DOM, заданное шаблоном.
+По умолчанию содержимое элемента не отображается.  
+Интерфейс {{domxref("HTMLTemplateElement")}} включает стандартное свойство {{domxref("HTMLTemplateElement.content", "content")}} (без эквивалентного атрибута содержимого/разметки). Это свойство `content` является только для чтения и содержит {{domxref("DocumentFragment")}}, который представляет поддерево DOM, заданное шаблоном.  
 Этот фрагмент можно клонировать с помощью метода {{domxref("Node.cloneNode", "cloneNode")}} и вставить в DOM.
 
-Будьте осторожны при использовании свойства `content`, так как возвращаемый `DocumentFragment` может иметь неожиданные свойства.
+Будьте осторожны при использовании свойства `content`, так как возвращаемый `DocumentFragment` может иметь неожиданные свойства.  
 Для получения более подробной информации см. раздел [Избегание ошибок DocumentFragment](#avoiding_documentfragment_pitfalls) ниже.
 
 ### Декларативный теневой DOM
 
-Если элемент `<template>` содержит атрибут [`shadowrootmode`](#shadowrootmode) со значением `open` или `closed`, HTML-парсер немедленно создает теневой DOM. Элемент заменяется в DOM его содержимым, заключенным в {{domxref("ShadowRoot")}}, который присоединен к родительскому элементу.
+Если элемент `<template>` содержит атрибут [`shadowrootmode`](#shadowrootmode) со значением `open` или `closed`, HTML-парсер немедленно создает теневой DOM. Элемент заменяется в DOM его содержимым, заключенным в {{domxref("ShadowRoot")}}, который присоединен к родительскому элементу.  
 Это декларативный эквивалент вызова {{domxref("Element.attachShadow()")}} для присоединения теневого корня к элементу.
 
-Если элемент имеет другое значение для `shadowrootmode` или не имеет атрибута `shadowrootmode`, парсер создает {{domxref("HTMLTemplateElement")}}.
+Если элемент имеет другое значение для `shadowrootmode` или не имеет атрибута `shadowrootmode`, парсер создает {{domxref("HTMLTemplateElement")}}.  
 Аналогично, если есть несколько декларативных теневых корней, только первый будет заменен на {{domxref("ShadowRoot")}} — последующие экземпляры будут разобраны как объекты {{domxref("HTMLTemplateElement")}}.
 
 ## Примеры
@@ -99,9 +99,9 @@ l10n:
 </template>
 ```
 
-Для начала у нас есть таблица, в которую мы собираемся вставить контент с помощью Javascript. За таблицей следует шаблон, который описывает структуру HTML-фрагмента — строку таблицы.
+Для начала у нас есть таблица, в которую мы планируем вставить контент с помощью JavaScript. За таблицей расположен шаблон, который описывает структуру HTML-фрагмента — строку таблицы.
 
-Теперь, когда таблица была создана, а шаблон определён, используем JavaScript, чтобы вставить строки в таблицу. Каждая строка будет строиться по шаблону.
+После того как таблица создана и шаблон определён, мы используем JavaScript для вставки строк в таблицу. Каждая строка будет создаваться на основе шаблона.
 
 ```js
 // Убеждаемся, что браузер поддерживает тег <template>,
@@ -148,7 +148,7 @@ table td {
 
 ### Реализация декларативного теневого DOM
 
-В этом примере скрытое предупреждение добавляется в начале разметки. Оно затем будет показано через JavaScript, если браузер не поддерживает атрибут `shadowrootmode`. Далее следуют два элемента {{HTMLElement("article")}}, каждый из которых содержит вложенные элементы {{HTMLElement("style")}} с различным поведением. Первый `<style>` глобален для всего документа. Второй имеет область видимости, ограниченную теневым корнем, созданным вместо элемента `<template>`, благодаря наличию атрибута `shadowrootmode`.
+В этом примере скрытое предупреждение добавляется в начале разметки. Оно будет отображено через JavaScript, если браузер не поддерживает атрибут `shadowrootmode`. Далее следуют два элемента {{HTMLElement("article")}}, каждый из которых содержит вложенные элементы {{HTMLElement("style")}} с различным поведением. Первый `<style>` применяется глобально ко всему документу, а второй имеет область видимости, ограниченную теневым корнем, созданным вместо элемента `<template>` благодаря наличию атрибута `shadowrootmode`.
 
 ```html
 <p hidden>
@@ -189,11 +189,10 @@ document
 
 ### Декларативный теневой DOM с делегированием фокуса
 
-Этот пример демонстрирует, как `shadowrootdelegatesfocus` применяется к теневому корню, созданному декларативно, и как это влияет на фокус.
+Этот пример демонстрирует, как атрибут `shadowrootdelegatesfocus` применяется к теневому корню, созданному декларативно, и как это влияет на поведение фокуса.
 
-Сначала в `<div>` объявляется теневой корень с помощью элемента `<template>` с атрибутом `shadowrootmode`.
-Это отображает и нефокусируемый `<div>`, содержащий текст, и фокусируемый элемент `<input>`.
-Также используется CSS для стилизации элементов с [`:focus`](/ru/docs/Web/CSS/:focus) синим цветом и для обычной стилизации элемента-хоста.
+Вначале в элементе `<div>` создаётся теневой корень с использованием элемента `<template>` и атрибута `shadowrootmode`.
+Внутри теневого корня размещается нефокусируемый `<div>` с текстом и фокусируемый элемент `<input>`. Для стилизации элементов используется CSS: элементам с псевдоклассом [`:focus`](/ru/docs/Web/CSS/:focus) задаётся синий цвет, а также применяется базовая стилизация для элемента-хоста.
 
 ```html
 <div>
@@ -237,7 +236,7 @@ document
 </div>
 ```
 
-Наконец, мы используем следующий CSS для применения границы желто-зеленого цвета к родительскому элементу `<div>`, когда он имеет фокус.
+Наконец, мы применяем следующий CSS, чтобы задать границу желто-зеленого цвета для родительского элемента `<div>` при его фокусировке."
 
 ```css
 div:focus {
@@ -251,8 +250,8 @@ div:focus {
 
 ![Скриншот кода без установленного фокуса](template_with_no_focus.png)
 
-Для теневого корня с установленным `shadowrootdelegatesfocus`, нажатие на текст (который нефокусируем) выбирает элемент `<input>`, так как это первый фокусируемый элемент в дереве.
-Это также фокусирует родительский элемент, как показано ниже.
+Для теневого корня с установленным `shadowrootdelegatesfocus`, нажатие на текст (который не является фокусируемым) выбирает элемент `<input>`, так как это первый фокусируемый элемент в дереве.  
+Это также приводит к фокусировке родительского элемента, как показано ниже.
 
 ![Скриншот кода с установленным фокусом](template_with_focus.png)
 

From 2a019b1b077b35d5e638edf096a4b77d68dd4267 Mon Sep 17 00:00:00 2001
From: Arthur Sedlukha <sedlukha@icloud.com>
Date: Thu, 5 Dec 2024 17:52:01 +0300
Subject: [PATCH 7/8] Apply suggestions from code review

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/ru/web/html/element/template/index.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/files/ru/web/html/element/template/index.md b/files/ru/web/html/element/template/index.md
index c9479707031434..a786668829ab33 100644
--- a/files/ru/web/html/element/template/index.md
+++ b/files/ru/web/html/element/template/index.md
@@ -57,19 +57,19 @@ l10n:
 
 ### Фрагмент документа шаблона
 
-По умолчанию содержимое элемента не отображается.  
-Интерфейс {{domxref("HTMLTemplateElement")}} включает стандартное свойство {{domxref("HTMLTemplateElement.content", "content")}} (без эквивалентного атрибута содержимого/разметки). Это свойство `content` является только для чтения и содержит {{domxref("DocumentFragment")}}, который представляет поддерево DOM, заданное шаблоном.  
+По умолчанию содержимое элемента не отображается.
+Интерфейс {{domxref("HTMLTemplateElement")}} включает стандартное свойство {{domxref("HTMLTemplateElement.content", "content")}} (без эквивалентного атрибута содержимого/разметки). Это свойство `content` является только для чтения и содержит {{domxref("DocumentFragment")}}, который представляет поддерево DOM, заданное шаблоном.
 Этот фрагмент можно клонировать с помощью метода {{domxref("Node.cloneNode", "cloneNode")}} и вставить в DOM.
 
-Будьте осторожны при использовании свойства `content`, так как возвращаемый `DocumentFragment` может иметь неожиданные свойства.  
+Будьте осторожны при использовании свойства `content`, так как возвращаемый `DocumentFragment` может иметь неожиданные свойства.
 Для получения более подробной информации см. раздел [Избегание ошибок DocumentFragment](#avoiding_documentfragment_pitfalls) ниже.
 
 ### Декларативный теневой DOM
 
-Если элемент `<template>` содержит атрибут [`shadowrootmode`](#shadowrootmode) со значением `open` или `closed`, HTML-парсер немедленно создает теневой DOM. Элемент заменяется в DOM его содержимым, заключенным в {{domxref("ShadowRoot")}}, который присоединен к родительскому элементу.  
+Если элемент `<template>` содержит атрибут [`shadowrootmode`](#shadowrootmode) со значением `open` или `closed`, HTML-парсер немедленно создает теневой DOM. Элемент заменяется в DOM его содержимым, заключенным в {{domxref("ShadowRoot")}}, который присоединен к родительскому элементу.
 Это декларативный эквивалент вызова {{domxref("Element.attachShadow()")}} для присоединения теневого корня к элементу.
 
-Если элемент имеет другое значение для `shadowrootmode` или не имеет атрибута `shadowrootmode`, парсер создает {{domxref("HTMLTemplateElement")}}.  
+Если элемент имеет другое значение для `shadowrootmode` или не имеет атрибута `shadowrootmode`, парсер создает {{domxref("HTMLTemplateElement")}}.
 Аналогично, если есть несколько декларативных теневых корней, только первый будет заменен на {{domxref("ShadowRoot")}} — последующие экземпляры будут разобраны как объекты {{domxref("HTMLTemplateElement")}}.
 
 ## Примеры
@@ -250,7 +250,7 @@ div:focus {
 
 ![Скриншот кода без установленного фокуса](template_with_no_focus.png)
 
-Для теневого корня с установленным `shadowrootdelegatesfocus`, нажатие на текст (который не является фокусируемым) выбирает элемент `<input>`, так как это первый фокусируемый элемент в дереве.  
+Для теневого корня с установленным `shadowrootdelegatesfocus`, нажатие на текст (который не является фокусируемым) выбирает элемент `<input>`, так как это первый фокусируемый элемент в дереве.
 Это также приводит к фокусировке родительского элемента, как показано ниже.
 
 ![Скриншот кода с установленным фокусом](template_with_focus.png)

From 540b6964001b4e61e0b7fbfab3145607206a2416 Mon Sep 17 00:00:00 2001
From: sedlukha <sedlukha@icloud.com>
Date: Fri, 6 Dec 2024 11:53:15 +0300
Subject: [PATCH 8/8] [ru]: update global attributes translation

---
 files/ru/web/html/element/template/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ru/web/html/element/template/index.md b/files/ru/web/html/element/template/index.md
index a786668829ab33..ab87e0a77f808d 100644
--- a/files/ru/web/html/element/template/index.md
+++ b/files/ru/web/html/element/template/index.md
@@ -11,7 +11,7 @@ l10n:
 
 ## Атрибуты
 
-К этому элементу применимы [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
+Этот элемент поддерживает [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes).
 
 - `shadowrootmode`