attachShadow и корень shadow
Создавайте инкапсулированное теневое дерево на элементе-хозяине
«attachShadow и корень shadow» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Что такое теневой DOM
Теневой DOM предоставляет элементу собственное изолированное дерево DOM («теневое дерево»), которое не отображается в основном DOM страницы. Внешние стили CSS не проникают внутрь, а внутренние стили CSS не выходят наружу — это идеальная изоляция для компонентов.
Подключение теневого корня
Вызовите this.attachShadow({ mode: "open" }) из конструктора пользовательского элемента или connectedCallback. Метод возвращает ShadowRoot, который можно заполнять так же, как обычное дерево DOM, используя innerHTML, appendChild и т. д.
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: "open" });
shadow.innerHTML = "<style>p{color:red}</style><p>Hello</p>";
}
}Открытый и закрытый режимы
mode: "open" предоставляет доступ к теневому дереву через element.shadowRoot. mode: "closed" скрывает его — element.shadowRoot возвращает null, поэтому внешние скрипты не могут войти в это дерево. Закрытый режим редко полезен на практике, поскольку тот же код, который определил элемент, всё равно может сохранить собственную ссылку.
Изоляция стилей
Стили, определённые внутри теневого дерева (с помощью <style> или подключённых таблиц стилей), применяются только внутри этого теневого дерева. Селекторы CSS в основном документе никогда не выбирают потомков теневого дерева, а стили теневого дерева никогда не проникают в документ.
Селектор :host
Изнутри теневого дерева хостовый элемент (сам пользовательский элемент) выбирается с помощью специального псевдокласса :host. :host(.large) соответствует хосту с классом .large, а :host([disabled]) — хосту с атрибутом disabled.
:host {
display: block;
padding: 16px;
border: 1px solid #ccc;
}
:host([disabled]) {
opacity: 0.5;
pointer-events: none;
}display: block у пользовательских элементов
По умолчанию пользовательские элементы имеют значение display: inline. Внутри теневого корня примените :host { display: block }, чтобы элемент вёл себя как компонент блочного уровня. Если забыть об этом, часто возникают ошибки вида «width: 100% не применяется».
Композиция событий
События, всплывающие из теневого дерева, получают на хосте новый target. Клик по внутренней кнопке доходит до внешних обработчиков с event.target === host. Используйте event.composedPath(), чтобы увидеть настоящий внутренний источник события, если это необходимо.
composed: true для пользовательских событий
Пользовательские события, отправленные внутри теневого корня, не пересекают границу, если создать их одновременно с bubbles: true и composed: true. Без composed внешние обработчики на хосте никогда не увидят событие.
Скрипты не могут проникнуть внутрь
Внешние скрипты могут найти элемент-хост, но не его потомков в теневом дереве. document.querySelector("my-card span") ничего не возвращает, если <span> находится внутри теневого дерева. Инкапсуляция защищает внутреннюю структуру от случайной связанности.
Декларативный теневой DOM
Если поместить <template shadowrootmode="open"> в HTML элемента, браузер создаст теневое дерево во время разбора без JavaScript. Это делает компоненты, отображаемые на сервере, удобными для гидратации, поскольку теневое дерево существует ещё до запуска JS.
Особенности производительности
Каждый теневой корень создаёт дополнительные затраты — отдельную область действия стилей и дополнительный слой отрисовки. Сотни теневых корней не создают проблем, а десятки тысяч уже могут иметь значение. Для интерфейсов с очень высокой плотностью (больших таблиц, виртуализированных списков) выполните профилирование, чтобы убедиться, что затраты теневого DOM приемлемы.
Проверка знаний
Что делает открытый режим, чего не делает закрытый режим?
Итоги
attachShadow({ mode: "open" }) создаёт изолированное поддерево DOM, в котором CSS и идентификаторы не проникают ни внутрь, ни наружу. Стилизуйте хост с помощью :host, не забывайте про display: block и используйте composed: true для событий, которые должны выйти наружу. В остальном теневое дерево ведёт себя как обычный DOM — innerHTML, appendChild и querySelector обычно работают внутри него.
Часто задаваемые вопросы
Урок «attachShadow и корень shadow» бесплатный?
Да — полный текст урока «attachShadow и корень shadow» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «attachShadow и корень shadow»?
Создавайте инкапсулированное теневое дерево на элементе-хозяине Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «attachShadow и корень shadow»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- attachShadow и корень shadow
- Элементы slot для распределения содержимого
- Изолированные стили внутри Shadow DOM
- part и exportparts для внешней стилизации