AI Helper żyje teraz w shadow DOM — styl strony nie psuje już interfejsu
Okno AI Helper-a w wtyczce JustZix do v3.2.75 renderowane było jako zwykły element w drzewie DOM strony — co oznaczało, że agresywne style strony (np. globalne * { font-family: …} albo button { border: 0 }) wciekały do interfejsu wtyczki i psuły jego wygląd. W v3.2.76 zamknęliśmy okno w shadow DOM — od teraz CSS strony nie może już dotknąć interfejsu AI Helper-a, działa identycznie na każdej domenie.
Co się psuło wcześniej
Strony nie wiedzą, że obok nich żyje wtyczka — ich style są globalne. Jeśli body * { box-sizing: border-box !important; } jest ustawione w ich CSS, to dotyka także wszystkich elementów, które wtyczka wstrzykuje. Klasyczne przykłady, na których to było widać:
- play.google.com —
font-family: 'Google Sans', sans-serifwymuszone na całej stronie ładowało Google Sans także w okno AI Helper-a, łamiąc spójność z resztą interfejsu wtyczki. - Strony korporacyjne z agresywnym CSS reset-em —
* { margin: 0; padding: 0 }zerował padding wewnątrz okna, wszystko zlewało się ze sobą. - Strony z
!importantna buttonach — niektóre kolory tła przycisków w AI Helperze ginęły, bo strona narzucała własnebackground-color.
Co to jest shadow DOM
Shadow DOM to standard W3C wspierany przez wszystkie nowoczesne przeglądarki (od Chrome 53, Firefox 63). Idea: każdy element może mieć przypisany „shadow root" — równoległe poddrzewo DOM, do którego CSS i selektory ze strony NIE docierają. To samo działanie, które ma element <video> z natywnymi przyciskami — strona nie może ich dotknąć stylem.
Twórca komponentu deklaruje swój własny CSS wewnątrz shadow rootu — i tylko ten CSS go dotyczy. Z punktu widzenia strony, shadow root to „czarna skrzynka".
Jak wygląda to teraz
Okno AI Helper-a (.jz-pane-ai) renderowane jest jako shadow root attached do hostującego elementu w drzewie DOM. W środku ma swoje własne style — kolory, fonty, padding, ramki — wszystko, co potrzebuje. Style strony nie przekraczają granicy:
- Ich
font-family: 'Google Sans'nabodynie dociera. - Ich
* { margin: 0 }z!importantnie dociera. - Nawet ich
body button { background: red }nie dociera.
Działanie wtyczki w okresie testów na różnych domenach (Google, Facebook, GitHub, banki, intranety) jest teraz spójne — okno wygląda dokładnie tak samo wszędzie.
Co to znaczy dla Ciebie
Najprostszy efekt: okno AI Helper-a wygląda zawsze tak, jak je zaprojektowaliśmy. Niezależnie od tego, czy jesteś na agresywnie wystylizowanym serwisie typu Notion / Gmail / Slack, czy na minimalistycznym blogu, czy na intranecie korporacyjnym z własną biblioteką CSS — interfejs AI Helper-a ma stałe kolory, font monospace dla code, prawidłowy padding pól, czytelne przyciski.
Drugi efekt: nie musisz zgłaszać „wtyczka wygląda dziwnie na X" jako bugu. Ta cała kategoria problemów po prostu znika.
Dlaczego dopiero teraz
Shadow DOM jest powszechny od kilku lat, ale jego użycie wymaga przebudowy mechanizmu renderowania komponentu — m.in. style sheet attached do shadow rootu, dystrybucja eventów, hookowanie zdarzeń mouse-down (resize, drag) do hostującego elementu. Dla AI Helper-a, który ma wiele interaktywnych elementów (chat input, dropdown copy, scroll history, tooltips), trzeba było przepisać kilka miejsc. Reszta okien deweloperskich (CSS pane, JS pane, JS Console, Output Console) zostaje na razie w light DOM-ie — patrz opis okien. Migracja kolejnych okien do shadow DOM jest naturalną drogą.
Bonus: szybszy Output Console (v3.2.30)
Wcześniejszy krok ku izolacji w shadow DOM dotknął Output Console (v3.2.30). Efekt uboczny: znacząca przyspieszka. Pre-shadow DOM 700 wpisów logu renderowało się ~5 sekund (style strony zmuszały recalculację stylu dla każdego węzła). Z shadow DOM — ~100 milisekund. To samo dla zakładek Network, błędów, dataLayer-a. Patrz osobny post: Output Console 50× szybsza dzięki shadow DOM.
Zobacz też
- Okna na froncie — opis wszystkich okien deweloperskich
- Reguły JS działają na Facebooku, X i GitHubie — inny problem „strona blokuje wtyczkę" — naprawiony
- Interaktywny samouczek — wprowadzenie do AI Helper-a i reszty okien
Zainstaluj JustZix — i miej interfejs AI Helper-a, który wygląda tak samo na każdej stronie.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.