code review fixes

Co-authored-by: Stanislav <[email protected]>

Author: SamGreenberg

Diff for: 8-web-components/6-shadow-dom-style/article.md

@@ -1,6 +1,6 @@
 # Стилізація тіньового DOM
 
-Тіньовий DOM може включати в себе обидва теги `<style>` та `<link rel="stylesheet" href="…">`. В останньому випадку, таблиці стилів зберігаються в кеші  HTTP, тому вони не завантажуються наново для кількох компонентів, які використовують один і той самий шаблон.
+Тіньовий DOM може включати в себе обидва теги `<style>` та `<link rel="stylesheet" href="…">`. В останньому випадку, таблиці стилів зберігаються в кеші HTTP, тому вони не завантажуються наново для кількох компонентів, які використовують один і той самий шаблон.
 
 Як правило, локальні стилі працюють лише всередині тіньового дерева та стилі документу працюють ззовні. Але є декілька винятків.
 
@@ -15,7 +15,7 @@
 ```html run autorun="no-epub" untrusted height=80
 <template id="tmpl">
   <style>
-    /* стиль буде застосовано зсередини до елементу custom-dialog */
+    /* стилі буде застосовано зсередини до елементу custom-dialog */
     :host {
       position: fixed;
       left: 50%;
@@ -46,7 +46,7 @@ customElements.define('custom-dialog', class extends HTMLElement {
 
 Тіньовий хост (безпосередньо `<custom-dialog>`) розташований в світлому DOM, тому на нього впливають CSS-правила документу.
 
-Якщо деяка властивість має стилі в `:host` локально та в документі, тоді пріоритет мають стилі документу.
+Якщо властивість задана як локально через `:host`, так і глобально в документі, пріоритет мають стилі документу.
 
 Наприклад, якщо в документі ми маємо:
 ```html
@@ -58,9 +58,9 @@ custom-dialog {
 ```
 ...Тоді `<custom-dialog>` не матиме відступів.
 
-Це дуже зручно, оскільки ми можемо встановити типові стилі компоненту всередині його `:host` правила, та легко перевизначити їх в документі опісля.
+Це дуже зручно, оскільки ми можемо встановити типові стилі компоненту локально всередині його `:host` правила, та легко перетерти їх стилями документу.
 
-Винятком є ситуація, в якій локальна властивість позначена як `!important`, для таких властивостей, пріоритет надається локальним стилям.
+Винятком є ситуація, коли локальна властивість позначена як `!important`, для таких властивостей, пріоритет надається локальним стилям.
 
 
 ## :host(selector)
@@ -111,15 +111,15 @@ customElements.define('custom-dialog', class extends HTMLElement {
 
 Тепер додаткові стилі центрування застосовуються лише до першого діалогу: `<custom-dialog centered>`.
 
-Підсумовуючи, ми можемо використовувати сімейство селекторів `:host` для стилізації основного елементу компоненту. Ці стилі (окрім позначених як `!important`) можуть бути перевизначені всередині документу.
+Підсумовуючи, ми можемо використовувати сімейство селекторів `:host` для стилізації основного елементу компоненту. Ці стилі (окрім позначених як `!important`) можуть бути перевизначені глобальними стилями документу.
 
 ## Стилізація контенту слотів
 
 Розглянемо ситуацію зі слотами.
 
 Елементи слотів приходять зі світлого DOM, тому вони використовують стилі документу. Локальні стилі не впливають на вміст слотів.
 
-У наведеному нижче прикладі , `<span>` має жирний шрифт, згідно стилю документу, але не приймає `background` з локального стилю:
+У наведеному нижче прикладі, `<span>` має жирний шрифт, згідно стилю документу, але не приймає `background` з локального стилю:
 ```html run autorun="no-epub" untrusted height=80
 <style>
 *!*
@@ -178,12 +178,12 @@ customElements.define('user-card', class extends HTMLElement {
 
 В даному випадку, `<p>Петро Щур</p>` має жирний шрифт, оскільки CSS успадкування діє між `<slot>` та його наповненням. Але в самому CSS не всі властивості успадковуються.
 
-Другою опцією є використання псевдо-класу `::slotted(selector)`. Він співвідносить елементи відповідно двом умовам:
+Другою опцією є використання псевдо-класу `::slotted(selector)`. Він застосовує стилі відповідно до двох умов:
 
-1. Це елемент, що приходить зі світлого DOM. Назва слоту не має значення. Будь-який елемент, але лише цей елемент, а не його діти.
+1. Це елемент-слот, що приходить зі світлого DOM. Назва слоту не має значення. Будь-який слот, але саме цей елемент, а не його діти.
 2. Елемент збігається з `selector`.
 
-В нашому прикладі, `::slotted(div)` обирає саме `<div slot="username">`, без дочірніх елементів:
+В нашому прикладі, `::slotted(div)` застосовується саме до `<div slot="username">`, без дочірніх елементів:
 
 ```html run autorun="no-epub" untrusted height=80
 <user-card>
@@ -229,7 +229,7 @@ customElements.define('user-card', class extends HTMLElement {
 
 Селектори по типу `:host` застосовують правила до елементу `<custom-dialog>` чи `<user-card>`, але як стилізувати елементи тіньового DOM всередині нього?
 
-Жоден селектор не може напряму вплинути на стилі тіньового DOM зсередини документу. Але так само, як ми надали доступ до методів, аби ті взаємодіяли з нашим компонентом, ми можемо відкрити для стилізації CSS змінні(кастомні CSS властивості).
+Жоден селектор не може напряму вплинути на стилі тіньового DOM з глобальних стилів документу. Але так само, як ми надали доступ до методів, щоб взаємодіяти з нашим компонентом, ми можемо відкрити CSS змінні(кастомні CSS властивості) для його стилізації.
 
 **Кастомні CSS властивості існують на всіх рівнях, як в світловому, так і в тіньовому.**
 
@@ -303,11 +303,11 @@ customElements.define('user-card', class extends HTMLElement {
 Локальні стилі можуть впливати на:
 - тіньове дерево,
 - тіньовий хост з псевдокласами `:host` та `:host()`,
-- елементи(приходять зі світлого DOM), `::slotted(selector)` дозволяє обрати лише їх, без дочірніх елементів.
+- елементи-слоти (які приходять зі світлого DOM), `::slotted(selector)` дозволяє обрати лише їх, без дочірніх елементів.
 
 Стилі документу можуть впливати на:
 - тіньовий хост (через його перебування в зовнішньому документі)
-- елементи та їх вміст (також через перебування в зовнішньому документі)
+- елементи-слоти та їх вміст (також через перебування в зовнішньому DOM документа)
 
 Коли CSS властивості суперечать одна одній, зазвичай стилі документу мають перевагу, якщо дана властивість не позначена як `!important`. Тоді перевага надається локальним стилям.