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

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

Тень DOM

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

Ответ 3

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