Что такое теневой корень

Question 1

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

Если я открываю его, рядом с именем отображается <head>и <body>и ссылка reveal, при щелчке она указывает на <head>и <body>, ни на что другое.

Question 2

Это специальный индикатор того, что Shadow DOM существует. Они существовали годами, но до недавнего времени разработчикам не предоставлялись API-интерфейсы. У Chrome есть эта функция некоторое время, другие браузеры все еще догоняют. Его можно переключить в настройках DevTools в разделе «Элементы». Снимите флажок «Показать теневой DOM пользовательского агента». Это, по крайней мере, скроет любые теневые DOM, созданные внутри (например, элементы select). Я сразу не уверен, влияет ли это на созданные пользователем, такие как пользовательские элементы.

Они также появляются в таких вещах, как iframe, где у вас есть отдельное дерево DOM, вложенное в другое.

Shadow DOM просто говорит, что у некоторой части страницы есть собственная DOM внутри. Стили и сценарии могут быть ограничены в пределах этого элемента, поэтому то, что в нем выполняется, выполняется только на этой границе.

Это одна из основных частей, необходимых для работы веб-компонентов . Это новая технология, позволяющая разработчикам создавать свои собственные инкапсулированные компоненты, которые разработчики могут использовать, как любой другой элемент HTML.

Question 3

В качестве примера Shadow DOM, когда у вас есть <video>тег на веб-странице, он отображается как один тег в основном DOM, но если вы включите Shadow DOM, вы сможете увидеть HTML-код видеоплеера (player DOM).

Это точно объясняется в этой статье http://webcomponents.org/articles/introduction-to-shadow-dom/

Question 4

В случае веб-компонентов существует фундаментальная проблема, которая затрудняет использование виджетов, построенных на основе 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 немного лучше, чем ответы, которые уже были здесь. Я добавил сюда релевантный контент, чтобы он помог другим, но взгляните на ссылку для подробного обсуждения того же.