← Назад ко всем вопросам

Что такое ShadowDOM

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Зачем нужен Shadow DOM

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

  2. Повторное использование компонентов: Благодаря изоляции, компоненты можно использовать в разных частях приложения без риска изменения их поведения из-за внешних стилей.

  3. Упрощение разработки: Разработчики могут сосредоточиться на логике компонента, не беспокоясь о влиянии внешних стилей.

Как работает Shadow DOM

Когда вы создаете Shadow DOM, вы создаете "теневой" корень, который становится отдельной областью для DOM-узлов и стилей. Этот корень изолирован от основного документа.

Пример использования Shadow DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow DOM Example</title>
</head>
<body>
    <my-element></my-element>
​
    <script>
        // Создаем класс для нового элемента
        class MyElement extends HTMLElement {
            constructor() {
                super();
                // Создаем Shadow Root
                const shadow = this.attachShadow({ mode: 'open' });
​
                // Создаем элемент div
                const div = document.createElement('div');
                div.textContent = 'Hello from Shadow DOM';
​
                // Создаем стиль для элемента
                const style = document.createElement('style');
                style.textContent = `
                    div {
                        color: white;
                        background-color: black;
                        padding: 10px;
                    }
                `;
​
                // Присоединяем стиль и div к Shadow Root
                shadow.appendChild(style);
                shadow.appendChild(div);
            }
        }
​
        // Регистрируем новый элемент
        customElements.define('my-element', MyElement);
    </script>
</body>
</html>

Объяснение кода

  • class MyElement extends HTMLElement: Создаем новый класс, который наследует от HTMLElement, чтобы создать пользовательский элемент.

  • constructor(): Конструктор вызывается при создании экземпляра элемента. Здесь мы инициализируем Shadow DOM.

  • const shadow = this.attachShadow({ mode: 'open' });: Создаем Shadow Root с режимом open, что позволяет доступ к Shadow DOM через JavaScript.

  • const div = document.createElement('div');: Создаем элемент div, который будет частью Shadow DOM.

  • div.textContent = 'Hello from Shadow DOM';: Устанавливаем текстовое содержимое для div.

  • const style = document.createElement('style');: Создаем элемент style для стилизации содержимого Shadow DOM.

  • style.textContent = ...: Определяем стили, которые будут применяться только к элементам внутри Shadow DOM.

  • shadow.appendChild(style); и shadow.appendChild(div);: Добавляем стиль и div в Shadow Root, изолируя их от остальной части документа.

  • customElements.define('my-element', MyElement);: Регистрируем новый пользовательский элемент <my-element>, который будет использовать наш класс MyElement.

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

Тема: Браузер: DOM, события и модель
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки