El AI Helper ahora vive en un shadow DOM — el CSS de la página ya no puede romperle la UI
Hasta la v3.2.75, la ventana del AI Helper en JustZix se renderizaba como un elemento normal en el árbol DOM de la página — lo que significaba que un CSS de página agresivo (un * { font-family: … } global o button { border: 0 }) se colaba en la UI de la extensión y le rompía el aspecto. En la v3.2.76 envolvimos la ventana en un shadow DOM — el CSS de la página ya no puede tocar la UI del AI Helper, y funciona igual en cada dominio.
Lo que solía romperse
Las páginas no saben que una extensión está sentada a su lado — su CSS es global. Si ponen body * { box-sizing: border-box !important; }, eso golpea también cada elemento que la extensión inyecta. Los infractores clásicos que vimos:
- play.google.com —
font-family: 'Google Sans', sans-serifforzado en todo el sitio metía Google Sans también dentro de la ventana del AI Helper, rompiendo la coherencia visual con el resto de la extensión. - Sitios corporativos con resets CSS agresivos —
* { margin: 0; padding: 0 }ponía a cero el padding dentro de la ventana, todo se pegaba. - Páginas con
!importanten los botones — algunos colores de fondo en los botones del AI Helper desaparecían porque la página imponía su propiobackground-color.
Qué es un shadow DOM
El shadow DOM es un estándar del W3C soportado por todos los navegadores modernos (Chrome 53+, Firefox 63+). La idea: cualquier elemento puede tener una "shadow root" — un subárbol DOM paralelo al que el CSS y los selectores de la página NO llegan. El mismo aislamiento que un elemento <video> obtiene para sus controles nativos — la página no puede reestilizarlos.
El autor de un componente declara su propio CSS dentro de la shadow root — y solo ese CSS se aplica. Desde el punto de vista de la página, la shadow root es una caja negra.
Cómo se ve ahora
La ventana del AI Helper (.jz-pane-ai) se renderiza como una shadow root adjunta a su elemento host en el árbol DOM. Dentro lleva sus propios estilos — colores, fuentes, padding, bordes — todo lo que necesita. Los estilos de la página no cruzan la frontera:
- Su
font-family: 'Google Sans'enbodyno entra. - Su
* { margin: 0 }con!importantno entra. - Ni siquiera su
body button { background: red }entra.
Durante las pruebas en una amplia variedad de dominios (Google, Facebook, GitHub, bancos, intranets), la ventana ahora se ve idéntica en todas partes.
Qué significa esto para ti
El efecto más simple: la ventana del AI Helper siempre se ve como la diseñamos. Estés en un servicio con estilos agresivos como Notion / Gmail / Slack, en un blog minimalista, o en una intranet corporativa con su propia biblioteca CSS — la UI del AI Helper lleva colores consistentes, la fuente monoespaciada para el código, el padding correcto en los campos, botones legibles.
El segundo efecto: ya no tienes que reportar bugs del tipo "la extensión se ve rara en X". Esa clase entera de problemas se acabó.
Por qué ahora
El shadow DOM lleva años siendo común, pero adoptarlo requirió reconstruir el renderizado del componente — hoja de estilos adjunta a la shadow root, distribución de eventos, enganchar el mouse-down (resize, drag) al elemento host. Para el AI Helper, con mucha superficie interactiva (entrada del chat, dropdown de copia, historial con scroll, tooltips), varias piezas tuvieron que reescribirse. El resto de las ventanas de desarrollo (panel CSS, panel JS, consola JS, consola de salida) se queda en light DOM por ahora — mira la vista general de las ventanas. Migrar más de ellas al shadow DOM es la dirección natural.
Bonus: una consola de salida más rápida (v3.2.30)
Un paso anterior hacia el aislamiento con shadow DOM tocó la consola de salida (v3.2.30). Efecto secundario: una aceleración seria. Antes del shadow DOM, renderizar 700 entradas de log llevaba ~5 segundos (los estilos de la página forzaban un recálculo de estilo en cada nodo). Con shadow DOM — ~100 milisegundos. Lo mismo para las pestañas Network, errors y dataLayer. Post propio: Consola de salida 50× más rápida gracias al shadow DOM.
Ver también
- Ventanas en la página — vista general de cada ventana de desarrollo
- Las reglas JS ahora funcionan en Facebook, X y GitHub — otro problema de "la página bloquea la extensión" — resuelto
- Tutorial interactivo de onboarding — una introducción al AI Helper y al resto de las ventanas
Instalar JustZix — y consigue una UI del AI Helper que se ve igual en cada página.
Valora este artículo
Sin valoraciones — sé el primero.