Skip to content

Shadow DOM #510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dolgachio merged 2 commits into from
Aug 7, 2023
Merged

Shadow DOM #510

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
524828b
Update article.md
so-tati Jun 19, 2023
708d58d
Apply suggestions from code review
dolgachio Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Apply suggestions from code review
  • Loading branch information
@dolgachio
dolgachio authored Aug 7, 2023
commit 708d58da6196f8793eff3f8948399b240a381c9e
47 changes: 24 additions & 23 deletions 8-web-components/3-shadow-dom/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
# Shadow DOM
# Тіньовий DOM (Shadow DOM)

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

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

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

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

<p>
<input type="range">
</p>

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

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

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

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

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

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

```html run autorun
<style>
Expand All @@ -35,9 +35,9 @@ input::-webkit-slider-runnable-track {
<input type="range">
```

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наприклад:

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

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

## Довідки
Expand All @@ -141,16 +141,17 @@ alert(elem.shadowRoot.host === elem); // true
- Сумісність: <https://caniuse.com/#feat=shadowdomv1>
- Тіньовий 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" (звичайних нащадків). У главі <info:slots-composition> ми розберемо, як поєднювати їх.