← Все статьи

Туториалы

AI Helper теперь живёт в shadow DOM — CSS страницы больше не может сломать его UI

22 мая 2026 · автор JustZix Team

До v3.2.75 окно AI Helper в JustZix рендерилось как обычный элемент в DOM-дереве страницы — это означало, что агрессивный CSS страницы (глобальный * { font-family: … } или button { border: 0 }) протекал в UI расширения и ломал его вид. В v3.2.76 мы завернули окно в shadow DOM — CSS страницы больше не может коснуться UI AI Helper, и оно работает одинаково на каждом домене.

Что ломалось раньше

Страницы не знают, что рядом с ними сидит расширение — их CSS глобален. Если они задают body * { box-sizing: border-box !important; }, это бьёт и по каждому элементу, который инжектирует расширение. Классические нарушители, которых мы видели:

• play.google.com — font-family: 'Google Sans', sans-serif, навязанный на весь сайт, затягивал Google Sans и в окно AI Helper, ломая визуальную согласованность с остальной частью расширения.
• Корпоративные сайты с агрессивными CSS-сбросами — * { margin: 0; padding: 0 } обнулял padding внутри окна, всё сливалось.
• Страницы с !important на кнопках — некоторые цвета фона в кнопках AI Helper исчезали, потому что страница навязывала свой background-color.

Что такое shadow DOM

Shadow DOM — это стандарт W3C, поддерживаемый каждым современным браузером (Chrome 53+, Firefox 63+). Идея: у любого элемента может быть «shadow root» — параллельное поддерево DOM, до которого CSS и селекторы страницы НЕ дотягиваются. Та же изоляция, которую получает элемент <video> для своих нативных контролов — страница не может перестилизовать их.

Автор компонента объявляет собственный CSS внутри shadow root — и применяется только этот CSS. С точки зрения страницы shadow root — чёрный ящик.

Как это выглядит сейчас

Окно AI Helper (.jz-pane-ai) рендерится как shadow root, прикреплённый к своему host-элементу в DOM-дереве. Внутри он несёт собственные стили — цвета, шрифты, padding, рамки — всё, что ему нужно. Стили страницы не пересекают границу:

• Их font-family: 'Google Sans' на body не попадает внутрь.
• Их * { margin: 0 } с !important не попадает внутрь.
• Даже их body button { background: red } не попадает внутрь.

При тестировании на широком наборе доменов (Google, Facebook, GitHub, банки, интранеты) окно теперь выглядит одинаково везде.

Что это значит для вас

Самый простой эффект: окно AI Helper всегда выглядит так, как мы его задумали. Будь вы в агрессивно стилизованном сервисе вроде Notion / Gmail / Slack, в минималистичном блоге или в корпоративном интранете с собственной CSS-библиотекой — UI AI Helper несёт согласованные цвета, моноширинный шрифт для кода, правильный padding полей, читаемые кнопки.

Второй эффект: вам больше не нужно заводить баги «расширение странно выглядит на X». Весь этот класс проблем ушёл.

Почему сейчас

Shadow DOM распространён уже годы, но его внедрение потребовало переделать рендеринг компонента — таблица стилей, прикреплённая к shadow root, распространение событий, привязка mouse-down (resize, drag) к host-элементу. Для AI Helper, с большой интерактивной поверхностью (поле ввода чата, dropdown копирования, прокручиваемая история, тултипы), несколько кусков пришлось переписать. Остальные окна разработчика (CSS-панель, JS-панель, JS-консоль, консоль вывода) пока остаются в light DOM — см. обзор окон. Перевод большего их числа в shadow DOM — естественное направление.

Бонус: более быстрая консоль вывода (v3.2.30)

Более ранний шаг к изоляции через shadow DOM коснулся консоли вывода (v3.2.30). Побочный эффект: серьёзное ускорение. До shadow DOM рендер 700 записей лога занимал ~5 секунд (стили страницы вынуждали пересчёт стилей на каждом узле). С shadow DOM — ~100 миллисекунд. То же для вкладок Network, errors и dataLayer. Отдельный пост: Консоль вывода в 50× быстрее благодаря shadow DOM.

См. также

• Окна на странице — обзор каждого окна разработчика
• JS-правила теперь работают на Facebook, X и GitHub — ещё одна проблема «страница блокирует расширение» — решена
• Интерактивный обучающий тур — введение в AI Helper и остальные окна

Установить JustZix — и получите UI AI Helper, который выглядит одинаково на каждой странице.