Що таке тіньовий корінь

99

В Інструментах розробника Google Chrome я бачу #shadow-rootправоруч <html lang="en">тег. що він робить і для чого він використовується? Я не бачу цього ні в Firefox, ні в IE; лише в Chrome, це особлива функція?

Якщо я його відкрию, він показує <head>і, <body>і посилання поруч із іменем reveal, натискаючи, вказує на <head>і <body>, нічого іншого.

— Андрій
джерело

97

Це особливий показник, що Shadow DOM . Вони існують роками, але розробники ніколи не вводили в них API до недавнього часу. Chrome давно користувався цією функціональністю, інші браузери все ще наздоганяють. Його можна перемикати в налаштуваннях DevTools у розділі "Елементи". Зніміть прапорець біля пункту "Показувати тінь агента користувача DOM". Це принаймні приховає будь-які тіньові DOM, створені всередині (наприклад, вибрані елементи.). Я не впевнений відразу, якщо це впливає на створені користувачем елементи, такі як власні елементи.

Вони також з’являються в таких речах, як iframes, де у вас є окреме дерево DOM, вкладене всередину іншого.

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

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

— Гарбі
джерело

Отже, це очевидне питання, як використовувати ці створені власні елементи або веб-компоненти для будь-якого проекту? Скажімо, я використовую полімер ...

— Кушаль Джейсвал

62

Як приклад Shadow DOM, коли у вас є <video>тег на веб-сторінці, він відображається лише як один тег у головному DOM, але якщо ви ввімкнете Shadow DOM, ви зможете побачити HTML відеопрогравача (DOM програвача).

Це докладно пояснено в цій статті, http://webcomponents.org/articles/introduction-to-shadow-dom/

— Нагендра Рао
джерело

Я отримую попередження про безпеку від Firefox, коли переходжу за посиланням webcomponents.org, якийсь вид сертифіката.

— Себастьян Норр,

1

Так, схоже, їх сертифікат ssl потребує оновлення. Ви все ще можете переглянути сайт, ігноруючи попередження.

— Нагендра Рао,

5

У випадку веб-компонентів існує фундаментальна проблема, через яку віджети, побудовані з HTML та JavaScript, важко використовувати.

Проблема : Дерево DOM у віджеті не інкапсульоване з решти сторінки. Ця відсутність інкапсуляції означає, що таблиця стилів вашого документа може випадково застосувати до частин всередині віджета; ваш JavaScript може випадково змінити частини всередині віджета; ваші ідентифікатори можуть збігатися з ідентифікаторами у віджеті тощо.

Shadow DOM вирішує проблему інкапсуляції дерева DOM .

Наприклад, якщо у вас була така розмітка:

<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>

то замість

Hello, world!

ваша сторінка виглядає так

こんにちは、影の世界!

Мало того, якщо JavaScript на сторінці запитує, що таке textContent кнопки, це не буде отримано “こんにちは、影の世界!”, але“Hello, world!” тому, що піддерево DOM під тіньовим коренем інкапсульовано .

ПРИМІТКА : Я взяв вищезгаданий вміст із https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/, оскільки це допомогло мені зрозуміти тіньовий DOM трохи краще, ніж відповіді вже тут. Я додав сюди відповідний вміст, щоб він допомагав іншим, але подивись посилання для детального обговорення цього ж питання.

— Анікет Тхакур
джерело