Shadow DOM
📅
Вот мы и подошли к ключевому моменту в создании вэб компонента - shadow DOM. Именно эта технология обеспечивает:
- 🛡️ Изоляцию стилей — CSS внутри компонента не влияет на внешнюю страницу
- 🔒 Инкапсуляцию DOM — внешний код не имеет прямого доступа к внутренней структуре
- 🧩 Композицию через слоты — возможность вставки внешнего контента
Что вы узнаете в этом разделе
- Возможно, вы удивитесь, но у вас на HTML страничке есть не просто DOM, а есть светлый DOM и теневой DOM и они прекрасно дружат друг с другом
- теневой DOM бывает, как пользовательский, так и встроенный.
- Научитесь создавать теневые деревья, используя оба подхода - императивный и декларативный
- Поймете, зачем нужны несколько режимов создания теневого дерева - открытый и закрытый
- Научитесь применять стили и события, узнаете как взаимодействуют между собой светлое и темное деревья
Оглавление раздела
Основы Shadow DOM
- Светлый DOM
- Встроенный теневой DOM
- Гармония DOM
Создание Shadow DOM
- Пользовательский Shadow DOM
- Императивный подход
- Декларативный подход
- Открытый и закрытый режимы
Взаимодействие Shadow DOM
- Стили
- Слоты
- События
Быстрый старт
Императивный подход (JavaScript)
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>p { color: blue; }</style>
<p>Привет, Shadow DOM!</p>
`;
}
}
Декларативный подход (HTML)
<my-component>
<template shadowrootmode="open">
<style>p { color: green; }</style>
<p>Привет, декларативный Shadow DOM!</p>
</template>
</my-component>
Почему это важно?
- Устраняет CSS-конфликты между компонентами
- Обеспечивает переиспользуемость компонентов
- Позволяет серверный рендеринг (декларативный подход)
- Стандарт браузеров — не требует библиотек