☰

ShadowRoot

ShadowRoot - тіньовий DOM.

Синтаксис:

Element.shadowRoot;

Параметри:

Element - об'єкт Element.

shadowRoot - властивість яка містить об'єкт ShadowRoot.

Опис:

ShadowRoot об'єкт Shadow DOM API який містить тіньовий DOM елемента.

Тіньовий DOM є кореневий вузол з DOM піддеревом, який візуалізується окремо від основного DOM дерева документа.

ShadowRoot можна отримати за допомогою властивості Element.shadowRoot, або створити за допомогою метода Element.attachShadow().

У інспекторі DOM браузера тіньовий DOM виглядає так:

Тіньовий DOM практично повністю ізолює свої CSS стилі і не успадкову їх від основного DOM. Винятком успадкування може бути значення властивості CSS: inherit.

Тіньовий DOM інтенсивно використовується у Web-компонентах, так як дозволяє створити ізольований DOM від основного DOM документа.

Приклад:

#test
var el=document.getElementById('test'); if(el.attachShadow){ var shadow = el.attachShadow({mode:'open'}); var div = document.createElement('div'); div.innerText='JavaScript ShadowRoot'; shadow.appendChild(div); }else alert('Ваш браузер не підтримує ShadowRoot');