В последние годы веб-проекты становятся все более сложными. Сегодня многие веб-страницы написаны на идиосинкразической, сложной смеси HTML, CSS и JavaScript. Они также включают все больше встроенного контента (виджеты, изображения, видео и т.д.) из внешних источников, таких как социальные сети, платформы потокового вещания или сети доставки контента. Если вы не хотите использовать iFrame для интеграции этого стороннего контента, теневой DOM является отличной альтернативой.
В этой статье мы объясним, что представляет собой этот подуровень объектной модели документа (DOM), опишем другие сценарии, в которых он может быть использован, и покажем, как реализовать его на вашем собственном сайте.
Что такое теневой DOM?
Теневой DOM — это подуровень стандартной объектной модели документа (DOM) и один из четырех основных элементов набора веб-компонентов, стандартизированных консорциумом W3C в 2012 году. Как и обычная DOM, теневая DOM автоматически генерируется из HTML-кода большинством популярных браузеров. Однако этот тип DOM применяется не ко всему веб-проекту, а только к компоненту (компонентам) проекта, выраженному в нем. Кроме того, теневые DOM отделяют элементы, которые они содержат, от любых стандартных инструкций по стилизации и структурированию, которые применяются во всех проектах, например, определенных операторов CSS. Проще говоря, теневые DOM — это автономные, инкапсулированные блоки кода в обычном DOM, которые имеют свою собственную область применения.
«Модель» — не самый точный термин для DOM или теневого DOM. Строго говоря, и то, и другое — это интерфейсы для доступа к данным. Базовая объектная модель имеет значение только для действительности этих интерфейсов.
Как устроены теневые DOM?
Теневые DOM позволяют использовать любое количество теневых деревьев в дополнение к обычному дереву документа, которое обобщает DOM-структуру всего проекта. Каждое из этих деревьев имеет корневой узел, называемый теневым корнем, и содержит свои собственные элементы и стилизации. Деревья всегда привязаны к определенному элементу из родительского дерева документа или из другого теневого дерева. В обоих случаях этот узел называется теневым узлом. Граница между обычным DOM и теневым DOM называется границей тени.
Как именно использовать или внедрять теневые DOM?
Вам не нужно устанавливать или интегрировать какое-либо дополнительное программное обеспечение, чтобы использовать интерфейс теневого DOM в веб-проекте. Технически говоря, все, что вы делаете, это создаете поддерево в исходном коде. Это означает, что вы можете реализовать новый теневой DOM в любое время через HTML-документ вашего веб-приложения. Теневой DOM отображается позже, вместе с полным родительским DOM, поэтому никаких дополнительных шагов не требуется.
Следующий пример иллюстрирует, как легко интегрировать скрытые, инкапсулированные дочерние узлы DOM с помощью простого JavaScript. В этом примере теневой DOM добавляется в HTML-документ с элементом <p>, включая уникальные инструкции по стилизации:
<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
// Create the shadow DOM for the shadow host:
var shadow = document.querySelector(‘#hostElement’).createShadowRoot();
// Create an HTML element in the shadow DOM:
shadow.innerHTML = ‘<p>This text is in the Shadow DOM.</p>‘;
// Style the HTML element in the shadow DOM:
shadow.innerHTML += ‘<style>p { color: red; }</style>‘;
</script>
</body>
</html>Сценарий для реализации теневого DOM состоит из трех компонентов: Сначала создается скрытый поддокумент, затем в него добавляется простой текстовый элемент, и, наконец, цвет этого текста изменяется с помощью третьего компонента (в данном случае: «красный»).
Для того чтобы к теневому DOM можно было получить доступ извне с помощью JavaScript, необходимо также установить статус метода element.shadowRoot в «open». Если вместо этого установить статус «закрыт», доступ к скрытому DOM будет запрещен.
Каковы идеальные приложения для теневого DOM?
Теневые DOM — это отличный способ сохранить определенные элементы вашего веб-проекта отдельно от остального сайта без необходимости использования специальных технологий, таких как iFrames. Кроме того, большинство популярных браузеров сейчас полностью поддерживают теневой DOMS, как и все остальные технологии современного набора веб-компонентов. Таким образом, если вы хотите оформить определенный компонент или определенную область вашего сайта независимо от инструкций и структур стилизации всего документа, скрытые DOMs являются отличным и простым в реализации выбором, особенно для сложных проектов.
Однако не все элементы HTML можно превратить в теневой хост. Например, если вы используете эту технологию на файле изображения, произойдет ошибка, и вы получите сообщение об ошибке. Теневые DOM ограничены следующими HTML-компонентами:
- статья
- в сторону
- blockquote
- тело
- div
- нижний колонтитул
- h1, h2, h3, h4, h5, h6
- заголовок
- главная
- навигатор
- p
- раздел
- span
В целях защиты вашей конфиденциальности видео не будет загружаться, пока вы не нажмете на него.