Тіньовий DOM (Shadow DOM)

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

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

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

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

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

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

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

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

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

<style>
/* робимо слайдер повзунка червоним */
input::-webkit-slider-runnable-track {
  background: red;
}
</style>

<input type="range">

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

Надалі ми використовуватимемо сучасний тіньовий стандарт DOM, відображений у DOM специфікації та в інших споріднених специфікаціях.

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

DOM-елемент може мати два типи DOM піддерев:

Light tree – звичайне “cвітле” DOM піддерево, що складається з HTML-нащадків. Усі піддерева, про які йшлося у попередніх розділах, були “cвітлі”.
Shadow tree – приховане “тіньове” DOM піддерево, не відображене у HTML та сховане від сторонніх очей.

Якщо елемент має обидва, то браузер відображає тільки тіньове дерево. Також ми можемо встановити певний вид композиції (взаємодії) між тіньовим та світлим деревами. Ми обговоримо ці деталі надалі у розділі Слоти тіньового DOM, композиція.

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

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

<script>
customElements.define('show-hello', class extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `<p>
      Hello, ${this.getAttribute('name')}
    </p>`;
  }
});
</script>

<show-hello name="John"></show-hello>

Ось так отриманий DOM виглядає в інструментах розробника Chrome, увесь контент всередині “#shadow-root”:

По-перше, виклик elem.attachShadow({mode: …}) створює тіньове дерево.

Існує два обмеження:

Для одного елементу можливо створити тільки один тіньовий root.
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">, є закритими, до них не дістатись.

Тіньовий root, який повертає attachShadow, поводиться як елемент: ми можемо використовувати innerHTML чи DOM-методи, такі як append, щоб заповнити його.

Елемент з тіньового root називається “shadow tree host” і доступний як властивість host у shadow root.

          // за умови {mode: "open"}, інакше elem.shadowRoot це null
alert(elem.shadowRoot.host === elem); // true
        

Інкапсуляція

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

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

Наприклад:

<style>
  /* стилі документа не застосовуються до тіньового дерева всередині #elem (1) */
  p { color: red; }
</style>

<div id="elem"></div>

<script>
  elem.attachShadow({mode: 'open'});
    // тіньове дерево має власні стилі (2)
  elem.shadowRoot.innerHTML = `
    <style> p { font-weight: bold; } </style>
    <p>Hello, John!</p>
  `;

  // <p> видимий тільки запитам зсередини тіньового дерева (3)
  alert(document.querySelectorAll('p').length); // 0
  alert(elem.shadowRoot.querySelectorAll('p').length); // 1
</script>

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

Довідки

DOM: https://dom.spec.whatwg.org/#shadow-trees
Сумісність: https://caniuse.com/#feat=shadowdomv1
Тіньовий DOM згадується у багатьох інших специфікаціях, наприклад, DOM Parsing вказує на те, що у shadow root є innerHTML.

Підсумки

Тіньовий DOM – це спосіб створити ізольоване DOM-дерево для компонента.

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

Тіньові елементи DOM:

Мають окрему область для унікальності значень в атрибутах id HTML-елементів,
Невидимі для селекторів JavaScript з головного документу, таким методам, як querySelector;
Використовують стилі тільки з тіньового дерева, а не глобальні стилі документу.

Тіньовий DOM, якщо існує, рендериться браузером замість так званого “світлого DOM” (звичайних нащадків). У главі Слоти тіньового DOM, композиція ми розберемо, як поєднювати їх.