Skip to content

Commit 708d58d

Browse files
dolgachiodolgachio
authored
Apply suggestions from code review
1 parent 524828b commit 708d58d

File tree

1 file changed

+24
-23
lines changed

1 file changed

+24
-23
lines changed

‎8-web-components/3-shadow-dom/article.md‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
# Shadow DOM
1+
# Тіньовий DOM (Shadow DOM)
22

3-
Тіньовий DOM ('Shadow DOM') використовується для інкапсуляції. Він дозволяє компоненту мати своє власне "тіньове" DOM-дерево, що не може бути випадково доступним з головного документу, a також може мати власні локальні правила стилів, та ін.
3+
Тіньовий DOM ('Shadow DOM') використовується для інкапсуляції. Він дозволяє компоненті мати своє власне "тіньове" DOM-дерево, що не може бути випадково змінено з головного документу, a також може мати власні локальні стилі, та ін.
44

5-
## Вбудований shadow DOM
5+
## Вбудований тіньовий DOM
66

7-
Чи замислювались ви коли-небудь, як влаштовані та стилізовані складні браузерні елементи керування?
7+
Чи замислювались ви коли-небудь, як влаштовані та стилізовані складні браузерні інтерактивні елементи?
88

99
Такі як `<input type="range">`:
1010

1111
<p>
1212
<input type="range">
1313
</p>
1414

15-
Браузер використовує DOM/CSS на свій розсуд, щоб відобразити їх. Така структура DOM зазвичай прихована від нас, але ми можемо її побачити в інструментах розробника. Наприклад, у Chrome нам знадобиться активувати опцію "Show user agent shadow DOM".
15+
Браузер використовує DOM/CSS на свій розсуд, щоб відобразити їх. Така структура DOM зазвичай прихована від нас, але ми можемо її побачити в інструментах розробника. Наприклад, у Chrome нам знадобиться активувати опцію "Show user agent shadow DOM".
1616

1717
Отже, `<input type="range">` виглядає так:
1818

1919
![](shadow-dom-range.png)
2020

2121
Те, що відображено під `#shadow-root` і є "тіньовим DOM" (shadow DOM).
2222

23-
Ми не можемо отримати доступ до тіньового DOM вбудованих елементів засобами звичайних JavaScript-викликів чи за допомогою селекторів. Це не просто звичайні нащадки, а потужний засіб інкапсуляції.
23+
Ми не можемо отримати доступ до тіньового DOM вбудованих елементів звичайними засобами JavaScript чи за допомогою селекторів. Це не просто дочірні елементи, а потужний спосіб інкапсуляції, тобто захисту від зовнішнього втручання у внутрішню структуру.
2424

25-
У вищенаведеному прикладі зверніть увагу на корисний атрибут `pseudo`. Він є нестандартним та існує через історичні причини. Його можна використовувати задля стилізації піделементи через CSS, наприклад, так:
25+
У вищенаведеному прикладі зверніть увагу на корисний атрибут `pseudo`. Він є нестандартним та існує через історичні причини. Його можна використовувати задля стилізації вкладених елементів через CSS, наприклад, так:
2626

2727
```html run autorun
2828
<style>
@@ -35,9 +35,9 @@ input::-webkit-slider-runnable-track {
3535
<input type="range">
3636
```
3737

38-
Наголошуємо, `pseudo` є нестандартним атрибутом. Хронологічно, браузери спочатку почали експерементувати з внутрішнімі DOM-структурами для здійснення контролю, а потім, через певний час, тіньовий DOM було стандартизовано, щоб дати можливість нам, розробникам, робити те саме.
38+
Наголошуємо, `pseudo` є нестандартним атрибутом. Історично, браузери спочатку почали експерементувати зі внутрішнімі DOM-структурами для створення інтерактивних елементів, і тільки потім, через певний час, тіньовий DOM було стандартизовано, щоб надати можливість нам, розробникам, робити те саме.
3939

40-
Надалі ми використовуватимемо сучасний тіньовий стандарт DOM, покритий [DOM специфікацією](https://dom.spec.whatwg.org/#shadow-trees) та іншими спорідненими специфікаціями.
40+
Надалі ми використовуватимемо сучасний тіньовий стандарт DOM, відображений у [DOM специфікації](https://dom.spec.whatwg.org/#shadow-trees) та в інших споріднених специфікаціях.
4141

4242
## Тіньове дерево
4343

@@ -46,9 +46,9 @@ DOM-елемент може мати два типи DOM піддерев:
4646
1. Light tree -- звичайне "cвітле" DOM піддерево, що складається з HTML-нащадків. Усі піддерева, про які йшлося у попередніх розділах, були "cвітлі".
4747
2. Shadow tree -- приховане "тіньове" DOM піддерево, не відображене у HTML та сховане від сторонніх очей.
4848

49-
Якщо елемент має обидва, то браузер відмальовує тільки тіньове дерево. Також ми можемо встановити певний вид композиції між тіньовим та світлим деревами. Ми обговоримо ці деталі надалі у розділі <info:slots-composition>.
49+
Якщо елемент має обидва, то браузер відображає тільки тіньове дерево. Також ми можемо встановити певний вид композиції (взаємодії) між тіньовим та світлим деревами. Ми обговоримо ці деталі надалі у розділі <info:slots-composition>.
5050

51-
Тіньове дерево може бути використаним в користувацьких елементах (сustom elements), щоб приховати внутрішній склад компонента і застосувати до нього локальні стилі.
51+
Тіньове дерево може бути використаним в користувацьких елементах (сustom elements), щоб приховати внутрішню структуру компонента і застосувати до нього локальні стилі, захищені від зовнішнього втручання.
5252

5353
Наприклад, цей `<show-hello>` елемент приховує свій внутрішній DOM у тіньовому дереві:
5454

@@ -75,19 +75,19 @@ customElements.define('show-hello', class extends HTMLElement {
7575

7676
Існує два обмеження:
7777
1. Для одного елементу можливо створити тільки один тіньовий root.
78-
2. `elem` повинен бути або кастомним елементом, або одним з наступних: "article", "aside", "blockquote", "body", "div", "footer", "h1..h6", "header", "main" "nav", "p", "section", or "span". Інші елементи, як `<img>`, не можуть містити тіньове дерево.
78+
2. `elem` повинен бути або кастомним елементом, або одним з наступних: "article", "aside", "blockquote", "body", "div", "footer", "h1..h6", "header", "main" "nav", "p", "section", or "span". Інші елементи, такі як `<img>`, не можуть містити тіньове дерево.
7979

8080
Опція `mode` встановлює рівень інкапсуляції, вона повинна мати одне з двох значень:
8181
- `"open"` -- тіньовий root доступний як `elem.shadowRoot`.
8282

8383
Будь-який код має доступ до тіньового дерева `elem`.
8484
- `"closed"` -- `elem.shadowRoot` завжди `null`.
8585

86-
Ми можемо отримати доступ до тіньового DOM тільки по посиланню, яке повертається `attachShadow` (і, можливо, приховане у класі). Вбудовані браузерні нативні дерева, такі, як `<input type="range">`, є закритими, до них не дібратись.
86+
Ми можемо отримати доступ до тіньового DOM тільки по посиланню, яке повертається `attachShadow` (і, можливо, приховане у класі). Вбудовані браузерні нативні дерева, такі, як `<input type="range">`, є закритими, до них не дістатись.
8787

8888
[Тіньовий root](https://dom.spec.whatwg.org/#shadowroot), який повертає `attachShadow`, поводиться як елемент: ми можемо використовувати `innerHTML` чи DOM-методи, такі як `append`, щоб заповнити його.
8989

90-
Елемент з тіньового root називається "хазяїн" (shadow tree host) і доступний як властивість `host` у shadow root.
90+
Елемент з тіньового root називається "shadow tree host" і доступний як властивість `host` у shadow root.
9191

9292
```js
9393
// за умови {mode: "open"}, інакше elem.shadowRoot це null
@@ -98,15 +98,15 @@ alert(elem.shadowRoot.host === elem); // true
9898

9999
Тіньовий DOM цілковито відокремлений від основного документу:
100100

101-
1. Елементи тіньового DOM невидимі для `querySelector` зі світлого DOM. Зокрема, тіньовий DOM елемент може мати ідентифікатори, що конфліктують з одноіменними зі світлого DOM. Вони повинні бути унікальними тільки всередині тіньового дерева.
101+
1. Елементи тіньового DOM невидимі для `querySelector` зі світлого DOM. Зокрема, тіньовий DOM елемент може мати всередині атрибути `id` зі значеннями, що конфліктують з однойменними зі світлого DOM. Вони повинні бути унікальними тільки всередині тіньового дерева.
102102
2. Тіньовий DOM має власні стилі. Стильові правила з зовнішнього DOM не застосовуються.
103103

104104
Наприклад:
105105

106106
```html run untrusted height=40
107107
<style>
108108
*!*
109-
/* стилі документа не застосовуються до тіньового дерева в середині #elem (1) */
109+
/* стилі документа не застосовуються до тіньового дерева всередині #elem (1) */
110110
*/!*
111111
p { color: red; }
112112
</style>
@@ -132,7 +132,7 @@ alert(elem.shadowRoot.host === elem); // true
132132
```
133133

134134
1. Стилі головного документу не впливають на тіньове дерево.
135-
2. ...Але стиль зсередини працює.
135+
2. ...Але стилі зсередини працюють.
136136
3. Щоб дістатися елементів тіньового дерева, запит повинен виконуватись зсередини дерева.
137137

138138
## Довідки
@@ -141,16 +141,17 @@ alert(elem.shadowRoot.host === elem); // true
141141
- Сумісність: <https://caniuse.com/#feat=shadowdomv1>
142142
- Тіньовий DOM згадується у багатьох інших специфікаціях, наприклад, [DOM Parsing](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) вказує на те, що у shadow root є `innerHTML`.
143143

144-
## Висновки
145144

146-
Тіньовий DOM – це спосіб створити ізольоване DOM-дерево для компонента.
145+
## Підсумки
146+
147+
Тіньовий DOM -- це спосіб створити ізольоване DOM-дерево для компоненти.
147148

148149
1. `shadowRoot = elem.attachShadow({mode: open|closed})` -- створює тіньовий DOM для `elem`. Якщо `mode="open"`, то він є досяжним як властивість `elem.shadowRoot`.
149-
2. Ми можемо створити піделементи `shadowRoot`, використовуючи `innerHTML` чи інші методи DOM.
150+
2. Ми можемо записати щось всередину `shadowRoot`, використовуючи `innerHTML` чи інші DOM-методи.
150151

151152
Тіньові елементи DOM:
152-
- Мають власну область видимості ідентифікаторів;
153-
- Невидимі для селекторів JavaScript з головного документу, таким, як `querySelector`;
154-
- Використовують стилі тільки з тіньового дерева, не з головного документу.
153+
- Мають окрему область для унікальності значень в атрибутах `id` HTML-елементів,
154+
- Невидимі для селекторів JavaScript з головного документу, таким методам, як `querySelector`;
155+
- Використовують стилі тільки з тіньового дерева, а не глобальні стилі документу.
155156

156157
Тіньовий DOM, якщо існує, рендериться браузером замість так званого "світлого DOM" (звичайних нащадків). У главі <info:slots-composition> ми розберемо, як поєднювати їх.

0 commit comments

Comments
 (0)