The AI Helper now lives in a shadow DOM — the page CSS can no longer break its UI
Up to v3.2.75 the AI Helper window in JustZix was rendered as a regular element in the page's DOM tree — which meant aggressive page CSS (global * { font-family: … } or button { border: 0 }) leaked into the extension UI and broke its looks. In v3.2.76 we wrapped the window in a shadow DOM — page CSS can no longer touch the AI Helper UI, and it works identically on every domain.
What used to break
Pages don't know an extension is sitting next to them — their CSS is global. If they set body * { box-sizing: border-box !important; }, it hits every element the extension injects too. Classic offenders we saw:
- play.google.com —
font-family: 'Google Sans', sans-serifforced site-wide pulled Google Sans into the AI Helper window too, breaking visual consistency with the rest of the extension. - Corporate sites with aggressive CSS resets —
* { margin: 0; padding: 0 }zeroed out padding inside the window, everything ran together. - Pages with
!importanton buttons — some background colors in the AI Helper buttons disappeared because the page forced its ownbackground-color.
What a shadow DOM is
Shadow DOM is a W3C standard supported by every modern browser (Chrome 53+, Firefox 63+). The idea: any element can have a "shadow root" — a parallel DOM subtree that the page's CSS and selectors do NOT reach. The same isolation a <video> element gets for its native controls — the page can't restyle them.
A component author declares their own CSS inside the shadow root — and only that CSS applies. From the page's point of view, the shadow root is a black box.
How it looks now
The AI Helper window (.jz-pane-ai) renders as a shadow root attached to its host element in the DOM tree. Inside it ships its own styles — colors, fonts, padding, borders — everything it needs. Page styles don't cross the boundary:
- Their
font-family: 'Google Sans'onbodydoesn't get in. - Their
* { margin: 0 }with!importantdoesn't get in. - Not even their
body button { background: red }gets in.
During testing on a wide spread of domains (Google, Facebook, GitHub, banks, intranets) the window now looks identical everywhere.
What it means for you
The simplest effect: the AI Helper window always looks the way we designed it. Whether you're on an aggressively styled service like Notion / Gmail / Slack, on a minimalist blog, or on a corporate intranet with its own CSS library — the AI Helper UI carries consistent colors, the monospace font for code, the right field padding, readable buttons.
The second effect: you no longer have to file "the extension looks weird on X" bugs. That whole class of problems is gone.
Why now
Shadow DOM has been common for years, but adopting it required rebuilding the component's rendering — stylesheet attached to the shadow root, event distribution, hooking mouse-down (resize, drag) to the host element. For the AI Helper, with a lot of interactive surface (chat input, copy dropdown, scrolling history, tooltips), several pieces had to be rewritten. The rest of the developer windows (CSS pane, JS pane, JS Console, Output Console) stays in light DOM for now — see the windows overview. Migrating more of them to shadow DOM is the natural direction.
Bonus: a faster Output Console (v3.2.30)
An earlier step toward shadow DOM isolation hit the Output Console (v3.2.30). Side effect: a serious speed-up. Pre-shadow DOM, rendering 700 log entries took ~5 seconds (page styles forced style recalc on every node). With shadow DOM — ~100 milliseconds. Same for the Network, errors and dataLayer tabs. Own post: Output Console 50× faster thanks to shadow DOM.
See also
- On-page windows — overview of every developer window
- JS rules now work on Facebook, X and GitHub — another "page blocks the extension" problem — fixed
- Interactive onboarding tutorial — an introduction to the AI Helper and the rest of the windows
Install JustZix — and get an AI Helper UI that looks the same on every page.
Rate this post
No ratings yet — be the first.