Что такое Shadow DOM?

В этой статье объясняется, что такое Shadow DOM.

YouTube Video

Понимание Shadow DOM

Shadow DOM — это мощная функция стандарта Web Components, которая обеспечивает инкапсуляцию стилей и структуры DOM внутри компонентов. Эта функция предотвращает конфликт стилей и скриптов между компонентами и основным документом.

Что такое Shadow DOM?

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

Например, если вы создадите кастомный компонент кнопки с использованием Shadow DOM, его стили не будут мешать другим элементам на странице. Аналогично, элементы с одинаковыми именами классов не будут конфликтовать.

Преимущества Shadow DOM

1. Инкапсуляция: Shadow DOM разделяет стили и функциональность, предотвращая конфликты с глобальными стилями и скриптами.

2. Повторное использование: Компоненты, созданные с использованием Shadow DOM, можно повторно использовать в разных проектах, не беспокоясь о конфликтах стилей.

3. Поддерживаемость: Инкапсуляция позволяет компонентам быть автономными с точки зрения логики и стилей, упрощая отладку и обслуживание.

Создание Shadow DOM

Чтобы использовать Shadow DOM, нужно добавить теневой корень к HTML-элементу. Простой пример:.

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

Объяснение

1. Хост-элемент: Обычный элемент DOM, к которому прикреплён теневой корень (в этом случае #shadow-host).

2. Теневой корень: Корень теневого дерева, создаваемый с помощью attachShadow.

3. Режим: В режиме open внешний JavaScript может получить доступ к теневому корню через element.shadowRoot. С другой стороны, режим closed не позволяет получать доступ.

Стилизация внутри Shadow DOM

Shadow DOM имеет свою собственную область стилей. Стили, определённые внутри теневого дерева, применяются только к элементам внутри этого дерева. Вот пример:.

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

Даже если в основном документе есть конфликтующие стили, параграфы внутри теневого дерева остаются неизменными:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

Параграфы внутри Shadow DOM остаются зелёными, в то время как внешние параграфы красные.

События внутри Shadow DOM

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

Вот пример:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

Когда кнопка нажата, оба обработчика срабатывают, демонстрируя поведение всплытия события.

Слоты: распределение содержимого Light DOM

Слоты позволяют проецировать содержимое из Light DOM в Shadow DOM. Вот пример:.

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

В основном документе вы можете сделать следующее:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

Элементы slot внутри Shadow DOM отображают содержимое Light DOM с соответствующим атрибутом slot.

Заключение

Shadow DOM — это важный инструмент для создания надёжных, многократно используемых и простых в сопровождении веб-компонентов. Инкапсулируя стили и функциональность, он снижает вероятность конфликтов и упрощает управление кодовой базой.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video