From 524828b0f8e3bbb58bac1a25a7dec1ac09b0b20c Mon Sep 17 00:00:00 2001 From: Tati Date: Mon, 19 Jun 2023 21:10:34 +0100 Subject: [PATCH 1/2] Update article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit  Ukrainian translation performed --- 8-web-components/3-shadow-dom/article.md | 111 +++++++++++------------ 1 file changed, 55 insertions(+), 56 deletions(-) diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md index 92614f777..4ec814a47 100644 --- a/8-web-components/3-shadow-dom/article.md +++ b/8-web-components/3-shadow-dom/article.md @@ -1,32 +1,32 @@ # Shadow DOM -Shadow DOM serves for encapsulation. It allows a component to have its very own "shadow" DOM tree, that can't be accidentally accessed from the main document, may have local style rules, and more. +Тіньовий DOM ('Shadow DOM') використовується для інкапсуляції. Він дозволяє компоненту мати своє власне "тіньове" DOM-дерево, що не може бути випадково доступним з головного документу, a також може мати власні локальні правила стилів, та ін. -## Built-in shadow DOM +## Вбудований shadow DOM -Did you ever think how complex browser controls are created and styled? +Чи замислювались ви коли-небудь, як влаштовані та стилізовані складні браузерні елементи керування? -Such as ``: +Такі як ``:

-The browser uses DOM/CSS internally to draw them. That DOM structure is normally hidden from us, but we can see it in developer tools. E.g. in Chrome, we need to enable in Dev Tools "Show user agent shadow DOM" option. +Браузер використовує DOM/CSS на свій розсуд, щоб відобразити їх. Така структура DOM зазвичай прихована від нас, але ми можемо її побачити в інструментах розробника. Наприклад, у Chrome нам знадобиться активувати опцію "Show user agent shadow DOM". -Then `` looks like this: +Отже, `` виглядає так: ![](shadow-dom-range.png) -What you see under `#shadow-root` is called "shadow DOM". +Те, що відображено під `#shadow-root` і є "тіньовим DOM" (shadow DOM). -We can't get built-in shadow DOM elements by regular JavaScript calls or selectors. These are not regular children, but a powerful encapsulation technique. +Ми не можемо отримати доступ до тіньового DOM вбудованих елементів засобами звичайних JavaScript-викликів чи за допомогою селекторів. Це не просто звичайні нащадки, а потужний засіб інкапсуляції. -In the example above, we can see a useful attribute `pseudo`. It's non-standard, exists for historical reasons. We can use it style subelements with CSS, like this: +У вищенаведеному прикладі зверніть увагу на корисний атрибут `pseudo`. Він є нестандартним та існує через історичні причини. Його можна використовувати задля стилізації піделементи через CSS, наприклад, так: ```html run autorun @@ -116,7 +116,7 @@ For example: ``` -1. The style from the document does not affect the shadow tree. -2. ...But the style from the inside works. -3. To get elements in shadow tree, we must query from inside the tree. +1. Стилі головного документу не впливають на тіньове дерево. +2. ...Але стиль зсередини працює. +3. Щоб дістатися елементів тіньового дерева, запит повинен виконуватись зсередини дерева. -## References +## Довідки - DOM: -- Compatibility: -- Shadow DOM is mentioned in many other specifications, e.g. [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) specifies that shadow root has `innerHTML`. +- Сумісність: +- Тіньовий DOM згадується у багатьох інших специфікаціях, наприклад, [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) вказує на те, що у shadow root є `innerHTML`. +## Висновки -## Summary +Тіньовий DOM – це спосіб створити ізольоване DOM-дерево для компонента. -Shadow DOM is a way to create a component-local DOM. +1. `shadowRoot = elem.attachShadow({mode: open|closed})` -- створює тіньовий DOM для `elem`. Якщо `mode="open"`, то він є досяжним як властивість `elem.shadowRoot`. +2. Ми можемо створити піделементи `shadowRoot`, використовуючи `innerHTML` чи інші методи DOM. -1. `shadowRoot = elem.attachShadow({mode: open|closed})` -- creates shadow DOM for `elem`. If `mode="open"`, then it's accessible as `elem.shadowRoot` property. -2. We can populate `shadowRoot` using `innerHTML` or other DOM methods. +Тіньові елементи DOM: +- Мають власну область видимості ідентифікаторів; +- Невидимі для селекторів JavaScript з головного документу, таким, як `querySelector`; +- Використовують стилі тільки з тіньового дерева, не з головного документу. -Shadow DOM elements: -- Have their own ids space, -- Invisible to JavaScript selectors from the main document, such as `querySelector`, -- Use styles only from the shadow tree, not from the main document. - -Shadow DOM, if exists, is rendered by the browser instead of so-called "light DOM" (regular children). In the chapter we'll see how to compose them. +Тіньовий DOM, якщо існує, рендериться браузером замість так званого "світлого DOM" (звичайних нащадків). У главі ми розберемо, як поєднювати їх. From 708d58da6196f8793eff3f8948399b240a381c9e Mon Sep 17 00:00:00 2001 From: Stanislav Date: Mon, 7 Aug 2023 13:52:23 +0300 Subject: [PATCH 2/2] Apply suggestions from code review --- 8-web-components/3-shadow-dom/article.md | 47 ++++++++++++------------ 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/8-web-components/3-shadow-dom/article.md b/8-web-components/3-shadow-dom/article.md index 4ec814a47..79533dcbd 100644 --- a/8-web-components/3-shadow-dom/article.md +++ b/8-web-components/3-shadow-dom/article.md @@ -1,10 +1,10 @@ -# Shadow DOM +# Тіньовий DOM (Shadow DOM) -Тіньовий DOM ('Shadow DOM') використовується для інкапсуляції. Він дозволяє компоненту мати своє власне "тіньове" DOM-дерево, що не може бути випадково доступним з головного документу, a також може мати власні локальні правила стилів, та ін. +Тіньовий DOM ('Shadow DOM') використовується для інкапсуляції. Він дозволяє компоненті мати своє власне "тіньове" DOM-дерево, що не може бути випадково змінено з головного документу, a також може мати власні локальні стилі, та ін. -## Вбудований shadow DOM +## Вбудований тіньовий DOM -Чи замислювались ви коли-небудь, як влаштовані та стилізовані складні браузерні елементи керування? +Чи замислювались ви коли-небудь, як влаштовані та стилізовані складні браузерні інтерактивні елементи? Такі як ``: @@ -12,7 +12,7 @@

-Браузер використовує DOM/CSS на свій розсуд, щоб відобразити їх. Така структура DOM зазвичай прихована від нас, але ми можемо її побачити в інструментах розробника. Наприклад, у Chrome нам знадобиться активувати опцію "Show user agent shadow DOM". +Браузер використовує DOM/CSS на свій розсуд, щоб відобразити їх. Така структура DOM зазвичай прихована від нас, але ми можемо її побачити в інструментах розробника. Наприклад, у Chrome нам знадобиться активувати опцію "Show user agent shadow DOM". Отже, `` виглядає так: @@ -20,9 +20,9 @@ Те, що відображено під `#shadow-root` і є "тіньовим DOM" (shadow DOM). -Ми не можемо отримати доступ до тіньового DOM вбудованих елементів засобами звичайних JavaScript-викликів чи за допомогою селекторів. Це не просто звичайні нащадки, а потужний засіб інкапсуляції. +Ми не можемо отримати доступ до тіньового DOM вбудованих елементів звичайними засобами JavaScript чи за допомогою селекторів. Це не просто дочірні елементи, а потужний спосіб інкапсуляції, тобто захисту від зовнішнього втручання у внутрішню структуру. -У вищенаведеному прикладі зверніть увагу на корисний атрибут `pseudo`. Він є нестандартним та існує через історичні причини. Його можна використовувати задля стилізації піделементи через CSS, наприклад, так: +У вищенаведеному прикладі зверніть увагу на корисний атрибут `pseudo`. Він є нестандартним та існує через історичні причини. Його можна використовувати задля стилізації вкладених елементів через CSS, наприклад, так: ```html run autorun @@ -132,7 +132,7 @@ alert(elem.shadowRoot.host === elem); // true ``` 1. Стилі головного документу не впливають на тіньове дерево. -2. ...Але стиль зсередини працює. +2. ...Але стилі зсередини працюють. 3. Щоб дістатися елементів тіньового дерева, запит повинен виконуватись зсередини дерева. ## Довідки @@ -141,16 +141,17 @@ alert(elem.shadowRoot.host === elem); // true - Сумісність: - Тіньовий DOM згадується у багатьох інших специфікаціях, наприклад, [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) вказує на те, що у shadow root є `innerHTML`. -## Висновки -Тіньовий DOM – це спосіб створити ізольоване DOM-дерево для компонента. +## Підсумки + +Тіньовий DOM -- це спосіб створити ізольоване DOM-дерево для компоненти. 1. `shadowRoot = elem.attachShadow({mode: open|closed})` -- створює тіньовий DOM для `elem`. Якщо `mode="open"`, то він є досяжним як властивість `elem.shadowRoot`. -2. Ми можемо створити піделементи `shadowRoot`, використовуючи `innerHTML` чи інші методи DOM. +2. Ми можемо записати щось всередину `shadowRoot`, використовуючи `innerHTML` чи інші DOM-методи. Тіньові елементи DOM: -- Мають власну область видимості ідентифікаторів; -- Невидимі для селекторів JavaScript з головного документу, таким, як `querySelector`; -- Використовують стилі тільки з тіньового дерева, не з головного документу. +- Мають окрему область для унікальності значень в атрибутах `id` HTML-елементів, +- Невидимі для селекторів JavaScript з головного документу, таким методам, як `querySelector`; +- Використовують стилі тільки з тіньового дерева, а не глобальні стилі документу. Тіньовий DOM, якщо існує, рендериться браузером замість так званого "світлого DOM" (звичайних нащадків). У главі ми розберемо, як поєднювати їх.