Изолированные стили внутри Shadow DOM
Пишите CSS, воздействующий только на элементы внутри теневого дерева
«Изолированные стили внутри Shadow DOM» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Инкапсуляция CSS по умолчанию
Каждое правило <style> внутри теневого корня применяется только внутри этого корня. p { color: red } в теневом дереве окрашивает только абзацы внутри этого дерева — абзацы в основном документе не затрагиваются, а стили основного документа не проникают в теневое дерево.
Зачем нужна инкапсуляция
Инкапсуляция устраняет проблему глобального CSS, которая десятилетиями преследовала большие приложения. Стили компонента нельзя случайно переопределить стилями сайта, а сам компонент не сможет случайно нарушить работу сайта. Границу задаёт спецификация, а не соглашение.
Псевдокласс :host
Изнутри теневого дерева стилизуйте элемент-хост с помощью :host. Используйте :host(selector), чтобы ограничить выборку селектором: :host([open]) { display: block; } выбирает хост только при наличии атрибута open.
Унаследованные свойства всё же пересекают границу
Унаследованные свойства CSS (color, font-family, line-height) всё же пересекают границу теневого дерева благодаря наследованию. Если документ задаёт body { color: blue }, текст в теневом дереве тоже станет синим, пока теневое дерево явно не переопределит это свойство. Это удобно: типографические значения по умолчанию остаются согласованными.
Пользовательские свойства CSS проникают через границу
Пользовательские свойства (переменные CSS) наследуются через теневые корни, поэтому это стандартный способ предоставить API темизации компонента: объявите --card-bg: var(--surface, white) внутри теневого дерева и позвольте потребителям переопределить --surface на хосте.
/* Shadow */
:host {
background: var(--card-bg, white);
}
/* Page */
my-card {
--card-bg: #f3f4f6;
}::part для внешней стилизации
Пометьте элемент внутри теневого дерева атрибутом part="name", и потребители смогут стилизовать его с помощью my-card::part(name) { ... }. Используйте parts как отдельные точки расширения для стилизации, сохраняя основную часть теневого дерева инкапсулированной.
Подключаемые таблицы стилей
shadowRoot.adoptedStyleSheets = [sheet] позволяет использовать одну CSSStyleSheet в нескольких теневых корнях, избегая повторного разбора <style>. Создавайте таблицы с помощью new CSSStyleSheet() и sheet.replaceSync(cssText). Это даёт значительный выигрыш в производительности в дизайн-системах.
Порядок объявлений
Размещайте теги <style> в самом начале innerHTML теневого дерева, чтобы стили разбирались до построения остального DOM. Это предотвращает кратковременное появление неоформленного содержимого, которое возникает, если стили поступают поздно в порядке разбора.
:host-context для правил на основе предков
:host-context(.dark-mode) :host стилизует хост на основе селектора предка за пределами теневого дерева. Это полезно для темизации компонентов по классу на обёртке высокого уровня. Поддержка браузерами хорошая, но проверьте её в целевом наборе браузеров.
Глобальный сброс остаётся снаружи
Сбросы CSS для всего документа (отступы body, box-sizing) не влияют на теневые деревья. Повторно применяйте необходимые сбросы внутри каждого теневого корня или используйте общую созданную таблицу стилей, подключённую к каждому компоненту.
Отладка стилей теневого дерева
Chrome DevTools показывает теневые корни на панели Elements под надписью "#shadow-root (open)". Вы можете просматривать, редактировать и включать или отключать стили теневого дерева так же, как любой другой CSS, включая псевдокласс :host и правила ::part.
Проверка знаний
Почему пользовательские свойства CSS (переменные) считаются предпочтительным способом темизации компонента теневого DOM?
Итоги
Теневой DOM инкапсулирует стили в обоих направлениях. Стилизуйте хост с помощью :host, предоставляйте точки настройки темизации через наследуемые пользовательские свойства CSS, открывайте отдельные элементы для стилизации с помощью ::part, используйте общие таблицы стилей через adoptedStyleSheets и повторно применяйте сбросы внутри каждого теневого корня, поскольку CSS всего документа не пересекает границу.
Часто задаваемые вопросы
Урок «Изолированные стили внутри Shadow DOM» бесплатный?
Да — полный текст урока «Изолированные стили внутри Shadow DOM» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Изолированные стили внутри Shadow DOM»?
Пишите CSS, воздействующий только на элементы внутри теневого дерева Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Изолированные стили внутри Shadow DOM»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- attachShadow и корень shadow
- Элементы slot для распределения содержимого
- Изолированные стили внутри Shadow DOM
- part и exportparts для внешней стилизации