Это специальный индикатор того, что Shadow DOM существует. Они существовали годами, но до недавнего времени разработчикам не предоставлялись API-интерфейсы. У Chrome есть эта функция некоторое время, другие браузеры все еще догоняют. Его можно переключить в настройках DevTools в разделе «Элементы». Снимите флажок «Показать теневой DOM пользовательского агента». Это, по крайней мере, скроет любые теневые DOM, созданные внутри (например, элементы select). Я сразу не уверен, влияет ли это на созданные пользователем, такие как пользовательские элементы.
Они также появляются в таких вещах, как iframe, где у вас есть отдельное дерево DOM, вложенное в другое.
Shadow DOM просто говорит, что у некоторой части страницы есть собственная DOM внутри. Стили и сценарии могут быть ограничены в пределах этого элемента, поэтому то, что в нем выполняется, выполняется только на этой границе.
Это одна из основных частей, необходимых для работы веб-компонентов . Это новая технология, позволяющая разработчикам создавать свои собственные инкапсулированные компоненты, которые разработчики могут использовать, как любой другой элемент HTML.
В качестве примера Shadow DOM, когда у вас есть
<video>
тег на веб-странице, он отображается как один тег в основном DOM, но если вы включите Shadow DOM, вы сможете увидеть HTML-код видеоплеера (player DOM).Это точно объясняется в этой статье http://webcomponents.org/articles/introduction-to-shadow-dom/
источник
В случае веб-компонентов существует фундаментальная проблема, которая затрудняет использование виджетов, построенных на основе HTML и JavaScript.
Проблема : дерево DOM внутри виджета не отделено от остальной части страницы. Отсутствие инкапсуляции означает, что ваша таблица стилей документа может случайно применяться к частям внутри виджета; ваш JavaScript может случайно изменить части внутри виджета; ваши идентификаторы могут совпадать с идентификаторами внутри виджета и так далее.
Shadow DOM решает проблему инкапсуляции дерева DOM .
Например, если у вас была такая разметка:
тогда вместо
ваша страница выглядит как
Мало того, если JavaScript на странице спрашивает, что такое textContent кнопки, он не получит
“こんにちは、影の世界!”
, но“Hello, world!”
потому, что поддерево DOM под теневым корнем инкапсулировано .ПРИМЕЧАНИЕ . Я взял вышеуказанный контент с https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/, поскольку он помог мне понять теневой DOM немного лучше, чем ответы, которые уже были здесь. Я добавил сюда релевантный контент, чтобы он помог другим, но взгляните на ссылку для подробного обсуждения того же.
источник