Shadow DOM в JavaScript

Articles

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

YouTube Video

javascript-html-shadow-dom.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    h1, h2 {
 32        font-size: 1.2rem;
 33        color: #007bff;
 34        margin-top: 0.5em;
 35        margin-bottom: 0.5em;
 36        border-left: 5px solid #007bff;
 37        padding-left: 0.6em;
 38        background-color: #e9f2ff;
 39    }
 40
 41    button {
 42        display: block;
 43        margin: 1em auto;
 44        padding: 0.75em 1.5em;
 45        font-size: 1rem;
 46        background-color: #007bff;
 47        color: white;
 48        border: none;
 49        border-radius: 6px;
 50        cursor: pointer;
 51        transition: background-color 0.3s ease;
 52    }
 53
 54    button:hover {
 55        background-color: #0056b3;
 56    }
 57
 58    #output {
 59        margin-top: 1em;
 60        background-color: #1e1e1e;
 61        color: #0f0;
 62        padding: 1em;
 63        border-radius: 8px;
 64        min-height: 200px;
 65        font-family: Consolas, monospace;
 66        font-size: 0.95rem;
 67        overflow-y: auto;
 68        white-space: pre-wrap;
 69    }
 70
 71    .highlight {
 72        outline: 3px solid #ffc107; /* yellow border */
 73        background-color: #fff8e1;  /* soft yellow background */
 74        transition: background-color 0.3s ease, outline 0.3s ease;
 75    }
 76
 77    .active {
 78        background-color: #28a745; /* green background */
 79        color: #fff;
 80        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 81        transition: background-color 0.3s ease, box-shadow 0.3s ease;
 82    }
 83  </style>
 84</head>
 85<body>
 86    <div class="container">
 87        <h2>HTML Sample</h2>
 88        <div id="content"></div>
 89        <div id="shadow-host">Shadow Root Element</div>
 90        <my-card></my-card>
 91    </div>
 92
 93    <div class="container">
 94        <h1>JavaScript Console</h1>
 95        <button id="executeBtn">Execute</button>
 96        <div id="output"></div>
 97    </div>
 98
 99    <div>
100        <h2>Slot Sample</h2>
101        <my-element>
102            <h3 slot="header">Header Content</h1>
103            <p slot="content">Main Content</p>
104        </my-element>
105    </div>
106
107    <script>
108        // Override console.log to display messages in the #output element
109        (function () {
110            const originalLog = console.log;
111            console.log = function (...args) {
112                originalLog.apply(console, args);
113                const output = document.getElementById('output');
114                output.textContent += args.map(String).join(' ') + '\n';
115            };
116        })();
117
118        document.getElementById('executeBtn').addEventListener('click', () => {
119            // Prevent multiple loads
120            if (document.getElementById('externalScript')) return;
121
122            const script = document.createElement('script');
123            script.src = 'javascript-html-shadow-dom.js';
124            script.id = 'externalScript';
125            //script.onload = () => console.log('javascript-html-shadow-dom.js loaded and executed.');
126            //script.onerror = () => console.log('Failed to load javascript-html-shadow-dom.js.');
127            document.body.appendChild(script);
128        });
129    </script>
130</body>
131</html>

Понимание `Shadow DOM`

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

`Shadow DOM` в JavaScript

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

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

Обычное HTML-содержимое вне Shadow DOM называется Light DOM.

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

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

Создание `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' });

Объяснение

Этот код включает следующие элементы:.

Элемент-хост
- Обычный DOM-элемент, к которому присоединён корень теневого DOM (в данном случае, #shadow-host).
Теневой корень (Shadow Root)
- Корень дерева теневого DOM, созданный с помощью attachShadow.
Режим
- В режиме open внешний JavaScript может получить доступ к теневому корню через element.shadowRoot. С другой стороны, режим closed не позволяет получать доступ.

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

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

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

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

1const content = document.getElementById('content');
2content.innerHTML = `
3    <style>
4        p {
5            color: red;
6        }
7    </style>
8    <p>This is in the main DOM.</p>
9`;

Абзац внутри Shadow DOM остаётся зелёным, а внешний — красным.

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

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

Вот пример:.

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3    <div id="button-container">
 4        <button id="shadow-button">Click Me</button>
 5    </div>
 6`;
 7
 8shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 9    console.log('Button : Button clicked inside Shadow DOM');
10    console.log(event.target);
11});
12
13shadowRoot.querySelector('#button-container').addEventListener('click', (event) => {
14    console.log('Container : Button clicked inside Shadow DOM');
15    console.log(event.target);
16});
17
18hostElement.addEventListener('click', (event) => {
19    console.log('Event bubbled to the host element');
20    console.log(event.target);
21});
22
23document.addEventListener('click', (event) => {
24    console.log('Document listener');
25    console.log(event.target);
26});

Когда кнопка нажата, оба обработчика срабатывают, демонстрируя поведение всплытия события.
Когда событие, происходящее внутри Shadow DOM, всплывает в Light DOM, свойство target события переопределяется на элемент-хозяин вместо исходного источника.
- В этом примере event.target внутри Shadow DOM — это сам элемент button, но вне Shadow DOM он заменяется на элемент-хозяин div.

`Shadow DOM` и пользовательские элементы

Shadow DOM и пользовательские элементы являются ключевыми компонентами Web Components. Это технологии, используемые для создания повторно используемых и инкапсулированных UI-компонентов.

 1class MyCard extends HTMLElement {
 2    constructor() {
 3        super();
 4        const shadow = this.attachShadow({ mode: 'open' });
 5        shadow.innerHTML = `
 6        <style>
 7            p {
 8                color: blue;
 9            }
10        </style>
11        <p>I'm inside shadow DOM</p>
12        `;
13    }
14}
15
16customElements.define('my-card', MyCard);

Основной документ содержит следующий HTML-код:.

1<my-card></my-card>

Используя Shadow DOM внутри пользовательских элементов, вы можете создавать повторно используемые компоненты, устойчивые к конфликтам стилей. В этом коде создается тег с именем my-card и связывается с классом MyCard. Элемент <p> внутри my-card не подвержен влиянию внешних стилей и всегда отображается синим цветом.

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

С помощью слотов можно выводить содержимое Light DOM внутрь Shadow DOM. Вот пример:.

 1class MyElement extends HTMLElement {
 2    constructor() {
 3        super();
 4        const shadow = this.attachShadow({ mode: 'open' });
 5
 6        shadow.innerHTML = `
 7        <style>
 8            .container {
 9                border: 2px solid #ccc;
10                padding: 16px;
11                border-radius: 8px;
12                font-family: sans-serif;
13            }
14            .header {
15                font-size: 1.2em;
16                color: darkblue;
17                margin-bottom: 8px;
18            }
19            .content {
20                font-size: 1em;
21                color: #333;
22            }
23        </style>
24        <div class="container">
25            <div class="header">
26                <slot name="header"></slot>
27            </div>
28            <div class="content">
29                <slot name="content"></slot>
30            </div>
31        </div>
32        `;
33    }
34}
35
36customElements.define('my-element', MyElement);

Основной документ содержит следующий HTML-код:.

1<my-element>
2    <h3 slot="header">Header Content</h1>
3    <p slot="content">Main Content</p>
4</my-element>

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

Заключение

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

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

YouTube Video

JavaScript и HTML Обработка событий в JavaScript

Shadow DOM в JavaScript

YouTube Video

Понимание Shadow DOM

Shadow DOM в JavaScript

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

Создание Shadow DOM

Объяснение

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

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

Shadow DOM и пользовательские элементы

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

Заключение

YouTube Video

Понимание `Shadow DOM`

`Shadow DOM` в JavaScript

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

Создание `Shadow DOM`

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

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

`Shadow DOM` и пользовательские элементы

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