From f660241b3931b052dfe2a49feffd4c9afd21959d Mon Sep 17 00:00:00 2001
From: Danylo Kolumbet <kolumbetko@gmail.com>
Date: Sun, 14 Aug 2022 16:10:35 +0300
Subject: [PATCH 1/2] Update 8-web-components/5-slots-composition/article.md

---
 .../5-slots-composition/article.md            | 282 +++++++++---------
 .../5-slots-composition/menu.view/index.html  |   8 +-
 2 files changed, 145 insertions(+), 145 deletions(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index ada52a06a..9c25c830b 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -1,33 +1,33 @@
-# Shadow DOM slots, composition
+# Слоти тіньового DOM, композиція
 
-Many types of components, such as tabs, menus, image galleries, and so on, need the content to render.
+Різні типи компонентів, такі як вкладки, меню, галереї зображень і таке інше, потребують вміст для відображення.
 
-Just like built-in browser `<select>` expects `<option>` items, our `<custom-tabs>` may expect the actual tab content to be passed. And a `<custom-menu>` may expect menu items.
+Так само, як вбудований в браузер елемент `<select>` очікує елементи `<option>`, наш компонент `<custom-tabs>` може очікувати що йому передадуть вміст вкладок. А `<custom-menu>` може очікувати елементи меню.
 
-The code that makes use of `<custom-menu>` can look like this:
+Ось приклад використання компонента `<custom-menu>`:
 
 ```html
 <custom-menu>
-  <title>Candy menu</title>
-  <item>Lollipop</item>
-  <item>Fruit Toast</item>
-  <item>Cup Cake</item>
+  <title>Меню солодощів</title>
+  <item>Льодяник</item>
+  <item>Фруктовий тост</item>
+  <item>Капкейк</item>
 </custom-menu>
 ```
 
-...Then our component should render it properly, as a nice menu with given title and items, handle menu events, etc.
+...Далі наш компонент має відобразити їх належним чином, як гарне меню з наданими заголовком та елементами, опрацьовувати події взаємодії з ним та інше.
 
-How to implement it?
+Як це реалізувати?
 
-We could try to analyze the element content and dynamically copy-rearrange DOM nodes. That's possible, but if we're moving elements to shadow DOM, then CSS styles from the document do not apply in there, so the visual styling may be lost. Also that requires some coding.
+Ми могли б спробувати проаналізувати вміст елементу і динамічно копіювати і перегруповувати вузли DOM. Це можливо, але якщо ми помістимо елементи у "тіньовий" (shadow) DOM, то CSS стилі документу не будуть застосовані для них, що призведе до втрати візуального оформлення. Також це потребує написання певного коду.
 
-Luckily, we don't have to. Shadow DOM supports `<slot>` elements, that are automatically filled by the content from light DOM.
+На щастя, ми не маємо робити це. Тіньовий DOM підтримує елементи `<slot>`, які автоматично наповнюються вмістом зі "світлого" (light) DOM.
 
-## Named slots
+## Іменовані слоти
 
-Let's see how slots work on a simple example.
+Розглянемо як працюють слоти на простому прикладі.
 
-Here, `<user-card>` shadow DOM provides two slots, filled from light DOM:
+Тут тіньовий DOM компонента `<user-card>` надає два слоти, що наповнені зі звичайного (світлого) DOM:
 
 ```html run autorun="no-epub" untrusted height=80
 <script>
@@ -35,12 +35,12 @@ customElements.define('user-card', class extends HTMLElement {
   connectedCallback() {
     this.attachShadow({mode: 'open'});
     this.shadowRoot.innerHTML = `
-      <div>Name:
+      <div>Ім’я:
 *!*
         <slot name="username"></slot>
 */!*
       </div>
-      <div>Birthday:
+      <div>Дата народження:
 *!*
         <slot name="birthday"></slot>
 */!*
@@ -51,45 +51,45 @@ customElements.define('user-card', class extends HTMLElement {
 </script>
 
 <user-card>
-  <span *!*slot="username"*/!*>John Smith</span>
+  <span *!*slot="username"*/!*>Тарас Мельник</span>
   <span *!*slot="birthday"*/!*>01.01.2001</span>
 </user-card>
 ```
 
-In the shadow DOM, `<slot name="X">` defines an "insertion point", a place where elements with `slot="X"` are rendered.
+У тіньовому DOM, `<slot name="X">` визначає "точку вставки", тобто місце, де будуть відображені елементи з `slot="X"`.
 
-Then the browser performs "composition": it takes elements from the light DOM and renders them in corresponding slots of the shadow DOM. At the end, we have exactly what we want -- a component that can be filled with data.
+Далі браузер виконує "композицію": він бере елементи зі світлого DOM і відображає їх у відповідних слотах тіньового DOM. Зрештою ми отримуємо саме те, що нам необхідно -- компонент, який можна наповнити даними.
 
-Here's the DOM structure after the script, not taking composition into account:
+Ось структура DOM після виконання скрипту, якщо не брати до уваги композицію:
 
 ```html
 <user-card>
   #shadow-root
-    <div>Name:
+    <div>Ім’я:
       <slot name="username"></slot>
     </div>
-    <div>Birthday:
+    <div>Дата народження:
       <slot name="birthday"></slot>
     </div>
-  <span slot="username">John Smith</span>
+  <span slot="username">Тарас Мельник</span>
   <span slot="birthday">01.01.2001</span>
 </user-card>
 ```
 
-We created the shadow DOM, so here it is, under `#shadow-root`. Now the element has both light and shadow DOM.
+Ми створили тіньовий DOM, який можемо побачити під позначкою `#shadow-root`. Тепер елемент містить і світлий, і тіньовий DOM.
 
-For rendering purposes, for each `<slot name="...">` in shadow DOM, the browser looks for `slot="..."` with the same name in the light DOM. These elements are rendered inside the slots:
+З метою відображення, для кожного `<slot name="...">` в тіньовому DOM, браузер шукає `slot="..."` з таким самим іменем у світлому DOM. Такі елементи відображаються всередині слотів:
 
 ![](shadow-dom-user-card.svg)
 
-The result is called "flattened" DOM:
+В результаті отримуємо DOM, що називається "розгорнутим" (flattened):
 
 ```html
 <user-card>
   #shadow-root
     <div>Name:
       <slot name="username">
-        <!-- slotted element is inserted into the slot -->
+        <!-- елемент помістили у відповідний слот -->
         <span slot="username">John Smith</span>
       </slot>
     </div>
@@ -101,76 +101,76 @@ The result is called "flattened" DOM:
 </user-card>
 ```
 
-...But the flattened DOM exists only for rendering and event-handling purposes. It's kind of "virtual". That's how things are shown. But the nodes in the document are actually not moved around!
+...Але розгорнутий DOM існує лише з метою відображення та обробки подій. Він у певному розумінні "віртуальний". Таким чином речі відображаються. Але вузли в документі насправді нікуди не переміщаються!
 
-That can be easily checked if we run `querySelectorAll`: nodes are still at their places.
+Це можна легко перевірити якщо запустити `querySelectorAll`: вузли все ще на своїх місцях.
 
 ```js
-// light DOM <span> nodes are still at the same place, under `<user-card>`
+// вузли <span> у світлому DOM все ще на своїх місцях всередині `<user-card>`
 alert( document.querySelectorAll('user-card span').length ); // 2
 ```
 
-So, the flattened DOM is derived from shadow DOM by inserting slots. The browser renders it and uses for style inheritance, event propagation (more about that later). But JavaScript still sees the document "as is", before flattening.
+Отже, розгорнутий DOM утворений з тіньового DOM за допомогою підставки слотів. Браузер відображає його і використовує для наслідування стилів, розповсюдження подій (більше про це буде далі). Але JavaScript все ще бачить документ "як є", до розгортання.
 
-````warn header="Only top-level children may have slot=\"...\" attribute"
-The `slot="..."` attribute is only valid for direct children of the shadow host (in our example, `<user-card>` element). For nested elements it's ignored.
+````warn header="Лише нащадки верхнього рівня можуть мати slot=\"...\""
+Атрибут `slot="..."` доречний лише для безпосередніх нащадків shadow host (в нашому прикладі це елемент `<user-card>`). У вкладених елементів він ігнорується.
 
-For example, the second `<span>` here is ignored (as it's not a top-level child of `<user-card>`):
+Наприклад, тут другий `<span>` проігнорований (оскільки він не є нащадком верхнього рівня для `<user-card>`)
 ```html
 <user-card>
   <span slot="username">John Smith</span>
   <div>
-    <!-- invalid slot, must be direct child of user-card -->
+    <!-- недійсний слот, оскільки має бути безпосереднім нащадком user-card -->
     <span slot="birthday">01.01.2001</span>
   </div>
 </user-card>
 ```
 ````
 
-If there are multiple elements in light DOM with the same slot name, they are appended into the slot, one after another.
+Якщо у світлому DOM є декілька елементів з однаковим іменем слота, вони поміщаються у слот один за одним.
 
-For example, this:
+Наприклад такий код:
 ```html
 <user-card>
-  <span slot="username">John</span>
-  <span slot="username">Smith</span>
+  <span slot="username">Тарас</span>
+  <span slot="username">Мельник</span>
 </user-card>
 ```
 
-Gives this flattened DOM with two elements in `<slot name="username">`:
+Утворить розгорнутий DOM з двома елементами всередині `<slot name="username">`:
 
 ```html
 <user-card>
   #shadow-root
-    <div>Name:
+    <div>Ім’я:
       <slot name="username">
-        <span slot="username">John</span>
-        <span slot="username">Smith</span>
+        <span slot="username">Тарас</span>
+        <span slot="username">Мельник</span>
       </slot>
     </div>
-    <div>Birthday:
+    <div>День народження:
       <slot name="birthday"></slot>
     </div>
 </user-card>
 ```
 
-## Slot fallback content
+## Резервний вміст слота
 
-If we put something inside a `<slot>`, it becomes the fallback, "default" content. The browser shows it if there's no corresponding filler in light DOM.
+Все, що ми помістимо щось всередині `<slot>`, стане резервом, вмістом "за замовчуванням". Браузер відобразить його, якщо у світлому DOM не знайдеться відповідного наповнення.
 
-For example, in this piece of shadow DOM, `Anonymous` renders if there's no `slot="username"` in light DOM.
+Наприклад, у цьому шматку shadow DOM, буде відображено `Анонім`, якщо у світлому DOM немає `slot="username"`.
 
 ```html
-<div>Name:
-  <slot name="username">Anonymous</slot>
+<div>Ім’я:
+  <slot name="username">Анонім</slot>
 </div>
 ```
 
-## Default slot: first unnamed
+## Слот за замовчуванням: перший безіменний
 
-The first `<slot>` in shadow DOM that doesn't have a name is a "default" slot. It gets all nodes from the light DOM that aren't slotted elsewhere.
+У тіньовому DOM перший слот, що не має імені, використовується як слот "за замовчуванням". Він отримає всі вузли зі світлого DOM, що не були розміщені деінде.
 
-For example, let's add the default slot to our `<user-card>` that shows all unslotted information about the user:
+Наприклад, давайте додамо слот за замовчуванням в `<user-card>`, який буде відображати всю інформацію про користувача, що не була розподілена до певного слота:
 
 ```html run autorun="no-epub" untrusted height=140
 <script>
@@ -178,14 +178,14 @@ customElements.define('user-card', class extends HTMLElement {
   connectedCallback() {
     this.attachShadow({mode: 'open'});
     this.shadowRoot.innerHTML = `
-    <div>Name:
+    <div>Ім’я:
       <slot name="username"></slot>
     </div>
-    <div>Birthday:
+    <div>День народження:
       <slot name="birthday"></slot>
     </div>
     <fieldset>
-      <legend>Other information</legend>
+      <legend>Інша інформація</legend>
 *!*
       <slot></slot>
 */!*
@@ -197,69 +197,69 @@ customElements.define('user-card', class extends HTMLElement {
 
 <user-card>
 *!*
-  <div>I like to swim.</div>
+  <div>Я люблю плавати.</div>
 */!*
-  <span slot="username">John Smith</span>
+  <span slot="username">Тарас Мельник</span>
   <span slot="birthday">01.01.2001</span>
 *!*
-  <div>...And play volleyball too!</div>
+  <div>...А також грати у волейбол!</div>
 */!*
 </user-card>
 ```
 
-All the unslotted light DOM content gets into the "Other information" fieldset.
+Весь вміст світлого DOM, що не був розподілений у певний слот, опиниться в полі "Інша інформація".
 
-Elements are appended to a slot one after another, so both unslotted pieces of information are in the default slot together.
+Елементи поміщаються у слот один за одним, тож обидва шматки інформації опиняться у слоті за замовчуванням разом.
 
-The flattened DOM looks like this:
+Розгорнутий DOM матиме наступний вигляд:
 
 ```html
 <user-card>
   #shadow-root
-    <div>Name:
+    <div>Ім’я:
       <slot name="username">
-        <span slot="username">John Smith</span>
+        <span slot="username">Тарас Мельник</span>
       </slot>
     </div>
-    <div>Birthday:
+    <div>День народження:
       <slot name="birthday">
         <span slot="birthday">01.01.2001</span>
       </slot>
     </div>
     <fieldset>
-      <legend>Other information</legend>
+      <legend>Інша інформація</legend>
 *!*
       <slot>
-        <div>I like to swim.</div>
-        <div>...And play volleyball too!</div>
+        <div>Я люблю плавати.</div>
+        <div>...А також грати у волейбол!</div>
       </slot>
 */!*
     </fieldset>
 </user-card>
 ```
 
-## Menu example
+## Приклад меню
 
-Now let's back to `<custom-menu>`, mentioned at the beginning of the chapter.
+А тепер повернемось до компоненту `<custom-menu>`, який ми згадували на початку розділу.
 
-We can use slots to distribute elements.
+Ми можемо використовувати слоти, щоб розподіляти елементи.
 
-Here's the markup for `<custom-menu>`:
+Ось розмітка для `<custom-menu>`:
 
 ```html
 <custom-menu>
-  <span slot="title">Candy menu</span>
-  <li slot="item">Lollipop</li>
-  <li slot="item">Fruit Toast</li>
-  <li slot="item">Cup Cake</li>
+  <span slot="title">Меню солодощів</span>
+  <li slot="item">Льодяник</li>
+  <li slot="item">Фруктовий тост</li>
+  <li slot="item">Капкейк</li>
 </custom-menu>
 ```
 
-The shadow DOM template with proper slots:
+Шаблон тіньового DOM з відповідними слотами:
 
 ```html
 <template id="tmpl">
-  <style> /* menu styles */ </style>
+  <style> /* стилі для меню */ </style>
   <div class="menu">
     <slot name="title"></slot>
     <ul><slot name="item"></slot></ul>
@@ -267,72 +267,72 @@ The shadow DOM template with proper slots:
 </template>
 ```
 
-1. `<span slot="title">` goes into `<slot name="title">`.
-2. There are many `<li slot="item">` in the template, but only one `<slot name="item">` in the template. So all such `<li slot="item">` are appended to `<slot name="item">` one after another, thus forming the list.
+1. `<span slot="title">` потрапить в `<slot name="title">`.
+2. В розмітці є декілька `<li slot="item">`, але в шаблоні лише один `<slot name="item">`. Тож усі `<li slot="item">` будуть додані в `<slot name="item">` один за одним, таким чином утворять список.
 
-The flattened DOM becomes:
+Розгорнутий DOM має такий вигляд:
 
 ```html
 <custom-menu>
   #shadow-root
-    <style> /* menu styles */ </style>
+    <style> /* стилі для меню */ </style>
     <div class="menu">
       <slot name="title">
-        <span slot="title">Candy menu</span>
+        <span slot="title">Меню солодощів</span>
       </slot>
       <ul>
         <slot name="item">
-          <li slot="item">Lollipop</li>
-          <li slot="item">Fruit Toast</li>
-          <li slot="item">Cup Cake</li>
+          <li slot="item">Льодяник</li>
+          <li slot="item">Фруктовий тост</li>
+          <li slot="item">Капкейк</li>
         </slot>
       </ul>
     </div>
 </custom-menu>
 ```
 
-One might notice that, in a valid DOM, `<li>` must be a direct child of `<ul>`. But that's flattened DOM, it describes how the component is rendered, such thing happens naturally here.
+Можна помітити, що для валідного DOM, `<li>` мав би бути безпосереднім нащадком `<ul>`. Але це розгорнутий DOM, який описує як компонент має відобразитись, тож така ситуація є цілком нормальною.
 
-We just need to add a `click` handler to open/close the list, and the `<custom-menu>` is ready:
+Нам залишилось додати обробник події `click`, щоб розгортати/згортати список, і `<custom-menu>` готовий:
 
 ```js
 customElements.define('custom-menu', class extends HTMLElement {
   connectedCallback() {
     this.attachShadow({mode: 'open'});
 
-    // tmpl is the shadow DOM template (above)
+    // tmpl це шаблон для тіньового DOM (вгорі)
     this.shadowRoot.append( tmpl.content.cloneNode(true) );
 
-    // we can't select light DOM nodes, so let's handle clicks on the slot
+    // ми не можемо обрати світлі вузли DOM, тож будемо опрацьовувати натискання на сам слот
     this.shadowRoot.querySelector('slot[name="title"]').onclick = () => {
-      // open/close the menu
+      // розгорнути/згорнути меню
       this.shadowRoot.querySelector('.menu').classList.toggle('closed');
     };
   }
 });
 ```
 
-Here's the full demo:
+Ось повний приклад:
 
 [iframe src="menu" height=140 edit]
 
-Of course, we can add more functionality to it: events, methods and so on.
+Звісно, ми можемо надати йому більше функціоналу: події, методи і таке інше.
 
-## Updating slots
+## Оновлення слотів
 
-What if the outer code wants to add/remove menu items dynamically?
+Що якщо зовнішній код хоче додати/прибрати пункт меню динамічно?
 
-**The browser monitors slots and updates the rendering if slotted elements are added/removed.**
+**Браузер моніторить слоти і оновлює відображення, якщо елементи в слотах були додані/прибрані**
 
-Also, as light DOM nodes are not copied, but just rendered in slots, the changes inside them immediately become visible.
+Також, оскільки вузли світлого DOM не копіюються, а лише відображаються у слотах, зміни всередині них відображаються одразу.
 
-So we don't have to do anything to update rendering. But if the component code wants to know about slot changes, then `slotchange` event is available.
+Тож нам не потрібно нічого робити, щоб оновити відображення. Але якщо код компонента бажає дізнаватись про зміни у слотах, можна прослуховувати подію `slotchange`.
 
-For example, here the menu item is inserted dynamically after 1 second, and the title changes after 2 seconds:
+Наприклад, тут пункт меню поміщається динамічно через 1 секунду, а заголовок змінюється через 2 секунди:
 
 ```html run untrusted height=80
 <custom-menu id="menu">
-  <span slot="title">Candy menu</span>
+  <span slot="title">Меню солодощів</span>
 </custom-menu>
 
 <script>
@@ -344,7 +344,7 @@ customElements.define('custom-menu', class extends HTMLElement {
       <ul><slot name="item"></slot></ul>
     </div>`;
 
-    // shadowRoot can't have event handlers, so using the first child
+    // shadowRoot не може мати обробники подій, тож використовуємо першого нащадка
     this.shadowRoot.firstElementChild.addEventListener('slotchange',
       e => alert("slotchange: " + e.target.name)
     );
@@ -352,49 +352,49 @@ customElements.define('custom-menu', class extends HTMLElement {
 });
 
 setTimeout(() => {
-  menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Lollipop</li>')
+  menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Льодяник</li>')
 }, 1000);
 
 setTimeout(() => {
-  menu.querySelector('[slot="title"]').innerHTML = "New menu";
+  menu.querySelector('[slot="title"]').innerHTML = "Нове меню";
 }, 2000);
 </script>
 ```
 
-The menu rendering updates each time without our intervention.
+Відображення меню оновлюється кожного разу без нашого втручання.
 
-There are two `slotchange` events here:
+В цьому прикладі відбудуться дві події `slotchange`:
 
-1. At initialization:
+1. Під час ініціалізації:
 
-    `slotchange: title` triggers immediately, as the `slot="title"` from the light DOM gets into the corresponding slot.
-2. After 1 second:
+    `slotchange: title` спрацьовує миттєво, оскільки `slot="title"` зі світлого DOM потрапляє у відповідний слот.
+2. Через 1 секунду:
 
-    `slotchange: item` triggers, when a new `<li slot="item">` is added.
+    `slotchange: item` спрацьовує після того, як додається `<li slot="item">`.
 
-Please note: there's no `slotchange` event after 2 seconds, when the content of `slot="title"` is modified. That's because there's no slot change. We modify the content inside the slotted element, that's another thing.
+Зверніть увагу: через 2 секунди не відбувається подія `slotchange`, після того, як змінюється вміст елементу з атрибутом `slot="title"`. Причиною є те, що не було змін у слотах. Ми модифікували вміст одного з елементів в слоті, а це інша річ.
 
-If we'd like to track internal modifications of light DOM from JavaScript, that's also possible using a more generic mechanism: [MutationObserver](info:mutation-observer).
+Якщо ми маємо намір відслідковувати модифікації світлого DOM з JavaScript, можемо скористатись більш загальним механізмом: [MutationObserver](info:mutation-observer).
 
-## Slot API
+## API слотів
 
-Finally, let's mention the slot-related JavaScript methods.
+Зрештою, давайте зачепимо методи JavaScript, що пов’язані зі слотами.
 
-As we've seen before, JavaScript looks at the "real" DOM, without flattening. But, if the shadow tree has `{mode: 'open'}`, then we can figure out which elements assigned to a slot and, vise-versa, the slot by the element inside it:
+Як ми вже бачили, JavaScrip дивиться на "справжній" DOM, без розгортання. Але якщо тіньове дерево має `{mode: 'open'}`, тоді ми можемо визначити які елементи призначені до слота і навпаки, знайти слот за елементом всередині нього:
 
-- `node.assignedSlot` -- returns the `<slot>` element that the `node` is assigned to.
-- `slot.assignedNodes({flatten: true/false})` -- DOM nodes, assigned to the slot. The `flatten` option is `false` by default. If explicitly set to `true`, then it looks more deeply into the flattened DOM, returning nested slots in case of nested components and the fallback content if no node assigned.
-- `slot.assignedElements({flatten: true/false})` -- DOM elements, assigned to the slot (same as above, but only element nodes).
+- `node.assignedSlot` -- повертає елемент `<slot>` до якого був призначений `node`.
+- `slot.assignedNodes({flatten: true/false})` -- вузли DOM, що були призначені до слота. Опція `flatten` має значення `false` за замовчуванням. Якщо вказати `true`, тоді цей метод дивиться глибше у розгорнутий DOM, повертає вкладені слоти у разі вкладених компонентів, або резервний вміст, якщо жоден вузол не був призначений.
+- `slot.assignedElements({flatten: true/false})` -- DOM елементи, що були призначені слоту (так само, як у попередньому методі, але повертаються лише вузли, що є елементами).
 
-These methods are useful when we need not just show the slotted content, but also track it in JavaScript.
+Ці методи корисні, коли ми потребуємо не лише показати вміст розподілений по слотам, але ще й відслідковувати його у JavaScript.
 
-For example, if `<custom-menu>` component wants to know, what it shows, then it could track `slotchange` and get the items from `slot.assignedElements`:
+Наприклад, якщо компонент `<custom-menu>` хоче знати, що він показує, тоді можна відслідковувати `slotchange` і отримати елементи за допомогою `slot.assignedElements`:
 
 ```html run untrusted height=120
 <custom-menu id="menu">
-  <span slot="title">Candy menu</span>
-  <li slot="item">Lollipop</li>
-  <li slot="item">Fruit Toast</li>
+  <span slot="title">Меню солодощів</span>
+  <li slot="item">Льодяник</li>
+  <li slot="item">Фруктовий тост</li>
 </custom-menu>
 
 <script>
@@ -408,7 +408,7 @@ customElements.define('custom-menu', class extends HTMLElement {
       <ul><slot name="item"></slot></ul>
     </div>`;
 
-    // triggers when slot content changes
+    // спрацьовує коли вміст слотів змінюється
 *!*
     this.shadowRoot.firstElementChild.addEventListener('slotchange', e => {
       let slot = e.target;
@@ -423,35 +423,35 @@ customElements.define('custom-menu', class extends HTMLElement {
 
 // items update after 1 second
 setTimeout(() => {
-  menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Cup Cake</li>')
+  menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Капкейк</li>')
 }, 1000);
 </script>
 ```
 
 
-## Summary
+## Підсумки
 
-Usually, if an element has shadow DOM, then its light DOM is not displayed. Slots allow to show elements from light DOM in specified places of shadow DOM.
+Зазвичай, якщо елемент має тіньовий DOM, тоді його світлий DOM не відображається. Слоти дозволяють показати елементи зі світлого DOM у зазначених місцях тіньового DOM.
 
-There are two kinds of slots:
+Є два типи слотів:
 
-- Named slots: `<slot name="X">...</slot>` -- gets light children with `slot="X"`.
-- Default slot: the first `<slot>` without a name (subsequent unnamed slots are ignored) -- gets unslotted light children.
-- If there are many elements for the same slot -- they are appended one after another.
-- The content of `<slot>` element is used as a fallback. It's shown if there are no light children for the slot.
+- Іменовані слоти: `<slot name="X">...</slot>` -- отримує світлі потомки зі `slot="X"`.
+- Слот за замовчуванням: перший `<slot>` без імені (наступні безіменні слоти ігноруються) -- отримує світлі потомки, що не були призначені жодному слоту.
+- Якщо є багато елементів для одного й того самого слота -- вони прикріпляються один за одним.
+- Вміст елементу `<slot>` використовується як резервний вміст. Він відображається, якщо немає світлих нащадків для слота.
 
-The process of rendering slotted elements inside their slots is called "composition". The result is called a "flattened DOM".
+Процес відображення елементів всередині їх слотів називається "композиція". Результат називається "розгорнутий DOM".
 
-Composition does not really move nodes, from JavaScript point of view the DOM is still same.
+Композиція насправді не пересуває вузли, з точки зору JavaScript, DOM залишається без змін.
 
-JavaScript can access slots using methods:
-- `slot.assignedNodes/Elements()` -- returns nodes/elements inside the `slot`.
-- `node.assignedSlot` -- the reverse property, returns slot by a node.
+JavaScript може отримати доступ до слотів використовуючи наступні методи:
+- `slot.assignedNodes/Elements()` -- повертає вузли/елементи всередині `slot`.
+- `node.assignedSlot` -- зворотна властивість, повертає слот для певного вузла.
 
-If we'd like to know what we're showing, we can track slot contents using:
-- `slotchange` event -- triggers the first time a slot is filled, and on any add/remove/replace operation of the slotted element, but not its children. The slot is `event.target`.
-- [MutationObserver](info:mutation-observer) to go deeper into slot content, watch changes inside it.
+Є два способи за допомогою яких можна відслідковувати вміст слотів, у разі якщо ми хочемо знати, що саме в них відображається:
+- подія `slotchange` -- спрацьовує після першого наповнення слота і надалі, у тому разі, якщо була здійснена операція додавання/прибирання/заміни елемент слоту, але не його нащадків. Слот доступний через `event.target`.
+- [MutationObserver](info:mutation-observer) щоб зануритись глибше у вміст слоту, відслідковувати зміни всередині нього.
 
-Now, as we know how to show elements from light DOM in shadow DOM, let's see how to style them properly. The basic rule is that shadow elements are styled inside, and light elements -- outside, but there are notable exceptions.
+Тепер, оскільки ми знаємо як показувати елементи зі світлого DOM у тіньовий DOM, давайте поглянемо як стилізувати їх належним чином. Головне правило полягає в тому, що тіньові елементи стилізуються всередині, а світлі елементи -- зовні, але є певні винятки.
 
-We'll see the details in the next chapter.
+Ми розглянемо подробиці у наступному розділі.
diff --git a/8-web-components/5-slots-composition/menu.view/index.html b/8-web-components/5-slots-composition/menu.view/index.html
index 86b31d860..6b4df48ad 100644
--- a/8-web-components/5-slots-composition/menu.view/index.html
+++ b/8-web-components/5-slots-composition/menu.view/index.html
@@ -47,8 +47,8 @@
 </script>
 
 <custom-menu>
-  <span slot="title">Candy menu</span>
-  <li slot="item">Lollipop</li>
-  <li slot="item">Fruit Toast</li>
-  <li slot="item">Cup Cake</li>
+  <span slot="title">Меню солодощів</span>
+  <li slot="item">Льодяник</li>
+  <li slot="item">Фруктовий тост</li>
+  <li slot="item">Капкейк</li>
 </custom-menu>

From 677cba0ab3266b3d09bd5a7b2678376f24799d52 Mon Sep 17 00:00:00 2001
From: Danylo Kolumbet <kolumbetko@gmail.com>
Date: Fri, 21 Oct 2022 20:06:47 +0300
Subject: [PATCH 2/2] Apply suggestions from code review

Co-authored-by: Stanislav <s.dolgachov@gmail.com>
---
 .../5-slots-composition/article.md            | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md
index 9c25c830b..c76e8ea0b 100644
--- a/8-web-components/5-slots-composition/article.md
+++ b/8-web-components/5-slots-composition/article.md
@@ -156,7 +156,7 @@ alert( document.querySelectorAll('user-card span').length ); // 2
 
 ## Резервний вміст слота
 
-Все, що ми помістимо щось всередині `<slot>`, стане резервом, вмістом "за замовчуванням". Браузер відобразить його, якщо у світлому DOM не знайдеться відповідного наповнення.
+Все, що ми помістимо у `<slot>`, стане резервним типовим вмістом. Браузер відобразить його, якщо у світлому DOM не знайдеться відповідного наповнення.
 
 Наприклад, у цьому шматку shadow DOM, буде відображено `Анонім`, якщо у світлому DOM немає `slot="username"`.
 
@@ -166,11 +166,11 @@ alert( document.querySelectorAll('user-card span').length ); // 2
 </div>
 ```
 
-## Слот за замовчуванням: перший безіменний
+## Типовий слот: перший слот без імені
 
-У тіньовому DOM перший слот, що не має імені, використовується як слот "за замовчуванням". Він отримає всі вузли зі світлого DOM, що не були розміщені деінде.
+У тіньовому DOM перший слот, що не має імені, використовується як типовий. Він отримає всі вузли зі світлого DOM, що не були розміщені деінде.
 
-Наприклад, давайте додамо слот за замовчуванням в `<user-card>`, який буде відображати всю інформацію про користувача, що не була розподілена до певного слота:
+Наприклад, давайте додамо типовий слот в `<user-card>`, який буде відображати всю інформацію про користувача, що не була розподілена до певного слота:
 
 ```html run autorun="no-epub" untrusted height=140
 <script>
@@ -209,7 +209,7 @@ customElements.define('user-card', class extends HTMLElement {
 
 Весь вміст світлого DOM, що не був розподілений у певний слот, опиниться в полі "Інша інформація".
 
-Елементи поміщаються у слот один за одним, тож обидва шматки інформації опиняться у слоті за замовчуванням разом.
+Елементи поміщаються у слот один за одним, тож обидва шматки інформації опиняться у типовому слоті разом.
 
 Розгорнутий DOM матиме наступний вигляд:
 
@@ -268,7 +268,7 @@ customElements.define('user-card', class extends HTMLElement {
 ```
 
 1. `<span slot="title">` потрапить в `<slot name="title">`.
-2. В розмітці є декілька `<li slot="item">`, але в шаблоні лише один `<slot name="item">`. Тож усі `<li slot="item">` будуть додані в `<slot name="item">` один за одним, таким чином утворять список.
+2. В розмітці є декілька `<li slot="item">`, але в шаблоні лише один `<slot name="item">`. Тож усі `<li slot="item">` будуть додані в `<slot name="item">` один за одним утворюючи список.
 
 Розгорнутий DOM має такий вигляд:
 
@@ -328,7 +328,7 @@ customElements.define('custom-menu', class extends HTMLElement {
 
 Тож нам не потрібно нічого робити, щоб оновити відображення. Але якщо код компонента бажає дізнаватись про зміни у слотах, можна прослуховувати подію `slotchange`.
 
-Наприклад, тут пункт меню поміщається динамічно через 1 секунду, а заголовок змінюється через 2 секунди:
+Наприклад, тут пункт меню вставляється динамічно через 1 секунду, а заголовок змінюється через 2 секунди:
 
 ```html run untrusted height=80
 <custom-menu id="menu">
@@ -380,10 +380,10 @@ setTimeout(() => {
 
 Зрештою, давайте зачепимо методи JavaScript, що пов’язані зі слотами.
 
-Як ми вже бачили, JavaScrip дивиться на "справжній" DOM, без розгортання. Але якщо тіньове дерево має `{mode: 'open'}`, тоді ми можемо визначити які елементи призначені до слота і навпаки, знайти слот за елементом всередині нього:
+Як ми вже бачили, JavaScript дивиться на "справжній" DOM, без розгортання. Але якщо тіньове дерево має `{mode: 'open'}`, тоді ми можемо визначити які елементи призначені до слота і навпаки, знайти слот за елементом всередині нього:
 
 - `node.assignedSlot` -- повертає елемент `<slot>` до якого був призначений `node`.
-- `slot.assignedNodes({flatten: true/false})` -- вузли DOM, що були призначені до слота. Опція `flatten` має значення `false` за замовчуванням. Якщо вказати `true`, тоді цей метод дивиться глибше у розгорнутий DOM, повертає вкладені слоти у разі вкладених компонентів, або резервний вміст, якщо жоден вузол не був призначений.
+- `slot.assignedNodes({flatten: true/false})` -- вузли DOM, що були призначені до слота. Опція `flatten` має типове значення `false`. Якщо вказати `true`, тоді цей метод дивиться глибше у розгорнутий DOM, повертає вкладені слоти у разі вкладених компонентів, або резервний вміст, якщо жоден вузол не був призначений.
 - `slot.assignedElements({flatten: true/false})` -- DOM елементи, що були призначені слоту (так само, як у попередньому методі, але повертаються лише вузли, що є елементами).
 
 Ці методи корисні, коли ми потребуємо не лише показати вміст розподілений по слотам, але ще й відслідковувати його у JavaScript.
@@ -440,7 +440,7 @@ setTimeout(() => {
 - Якщо є багато елементів для одного й того самого слота -- вони прикріпляються один за одним.
 - Вміст елементу `<slot>` використовується як резервний вміст. Він відображається, якщо немає світлих нащадків для слота.
 
-Процес відображення елементів всередині їх слотів називається "композиція". Результат називається "розгорнутий DOM".
+Процес відображення елементів всередині їх слотів називається "композиція". Результат цього процесу --  "розгорнутий DOM".
 
 Композиція насправді не пересуває вузли, з точки зору JavaScript, DOM залишається без змін.
 
@@ -449,9 +449,9 @@ JavaScript може отримати доступ до слотів викори
 - `node.assignedSlot` -- зворотна властивість, повертає слот для певного вузла.
 
 Є два способи за допомогою яких можна відслідковувати вміст слотів, у разі якщо ми хочемо знати, що саме в них відображається:
-- подія `slotchange` -- спрацьовує після першого наповнення слота і надалі, у тому разі, якщо була здійснена операція додавання/прибирання/заміни елемент слоту, але не його нащадків. Слот доступний через `event.target`.
+- подія `slotchange` -- спрацьовує після першого наповнення слота і надалі, у тому разі, якщо була здійснена операція додавання/прибирання/заміни елементу слоту, але не його нащадків. Слот доступний через `event.target`.
 - [MutationObserver](info:mutation-observer) щоб зануритись глибше у вміст слоту, відслідковувати зміни всередині нього.
 
-Тепер, оскільки ми знаємо як показувати елементи зі світлого DOM у тіньовий DOM, давайте поглянемо як стилізувати їх належним чином. Головне правило полягає в тому, що тіньові елементи стилізуються всередині, а світлі елементи -- зовні, але є певні винятки.
+Тепер, оскільки ми знаємо як показувати елементи зі світлого DOM у тіньовому DOM, давайте поглянемо як стилізувати їх належним чином. Головне правило полягає в тому, що тіньові елементи стилізуються всередині, а світлі елементи -- зовні, але є певні винятки.
 
 Ми розглянемо подробиці у наступному розділі.