Что такое ShadowDOM? | Кодементор

Впервые я узнал о Shadow DOM из любопытства, как браузеры реализуют такие теги, как

Однако ни один из браузеров не позволял разработчикам писать свои собственные теневые DOM (хотя в Google Chrome была реализована версия v0). Я снова наткнулся на Shadow DOM, глядя на проблема в jQuery исправить. Так что теперь, с 2018 года, большинство браузеров начали поддерживать API-интерфейсы теневого DOM, и, следовательно, jQuery необходимо было реализовать поддержку и для этого.

| |
| |

Итак, что же это за теневой DOM и зачем мы вообще его используем?

Что такое ДОМ?

Спецификация W3C описывает это как «метод объединения нескольких деревьев DOM в одну иерархию и то, как эти деревья взаимодействуют друг с другом в документе, что позволяет улучшить композицию DOM».

Теперь, чтобы понять это, нам нужно понять, что такое DOM. DOM или объектная модель документа — это древовидная структура, содержащая различные элементы (или теги) и строки текста, отображаемые языком разметки (например, HTML, XML и т. д.).

Итак, допустим, у нас есть HTML-код примерно такого вида:

\<!DOCTYPE html\>
\<html\> \<head\> \<meta charset="utf-8"\> \<title\>Title\</title\> \</head\> \<body\> \<div\> \<h1\>This is header\</h1\> \<p\>This is a \<a href=" link \</a\> \</p\> \</div\> \</body\>
\</html\>

Итак, визуально вы можете показать структуру DOM примерно так:

Тень ДОМ

Теперь теневой DOM позволяет нам создавать отдельные скрытые деревья DOM, которые присоединяются к элементам обычного дерева DOM. Это позволяет реализовать функциональную инкапсуляцию, т. е. кто-то, кто анализирует обычное дерево DOM и применяет стиль к обычному дереву DOM, не знает и не влияет на свойства и функциональные возможности теневого дерева DOM. Следовательно, вы используете теневой DOM, не зная сложных деталей реализации DOM. Это важно, потому что это соответствует основным идеям объектно-ориентированного программирования.

Теневое дерево DOM начинается с теневой корень и затем может иметь любой обычный элемент DOM, прикрепленный под ним.

Давайте посмотрим на пример: HTML

\<!DOCTYPE html\>
\<html\> \<head\> \<meta charset="utf-8"\> \<title\>Title\</title\> \</head\> \<body\> \<div id="shadowHost"\> \</div\> \</body\>
\</html\>

JavaScript

const shadowHost = document.getElementById('shadowHost');
const shadowRoot = shadowHost.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '\<h1\>Hello Shadow DOM\</h1\>';

Итак, это создаст теневой DOM. Визуально вы можете представить это как:

Итак, как вы можете видеть, в теневой модели DOM есть несколько разных частей, кроме того, что это просто еще одна модель DOM.

  • Теневое дерево : Дерево DOM внутри теневого DOM.
  • Граница тени : место, где заканчивается теневой DOM и начинается обычный DOM.
  • Корень тени : корневой узел теневого дерева.
  • Теневой хост : обычный узел DOM, к которому присоединен теневой DOM.
  • Тень ребенка : Дерево ниже теневого корневого узла.

Как уже упоминалось, теневой DOM не может быть прикреплен к нескольким различным элементам. в спецификации. Вот некоторые из причин:

  • Различные теги формы, такие как ,