← Tous les articles

Tutoriels

L'Assistant IA vit désormais dans un shadow DOM — le CSS de la page ne peut plus casser son UI

22 mai 2026 · par JustZix Team

Jusqu'à la v3.2.75, la fenêtre de l'Assistant IA dans JustZix était rendue comme un élément ordinaire dans l'arbre DOM de la page — ce qui signifiait qu'un CSS de page agressif (un * { font-family: … } global ou button { border: 0 }) fuyait dans l'UI de l'extension et cassait son aspect. En v3.2.76, nous avons enveloppé la fenêtre dans un shadow DOM — le CSS de la page ne peut plus toucher à l'UI de l'Assistant IA, et elle fonctionne à l'identique sur chaque domaine.

Ce qui cassait avant

Les pages ne savent pas qu'une extension est posée à côté d'elles — leur CSS est global. Si elles posent body * { box-sizing: border-box !important; }, cela touche aussi chaque élément que l'extension injecte. Les coupables classiques que nous avons vus :

• play.google.com — font-family: 'Google Sans', sans-serif imposé sur l'ensemble du site tirait Google Sans aussi dans la fenêtre de l'Assistant IA, cassant la cohérence visuelle avec le reste de l'extension.
• Sites d'entreprise avec des resets CSS agressifs — * { margin: 0; padding: 0 } mettait à zéro le padding dans la fenêtre, tout se collait.
• Pages avec !important sur les boutons — certaines couleurs d'arrière-plan dans les boutons de l'Assistant IA disparaissaient parce que la page imposait son propre background-color.

Ce qu'est un shadow DOM

Le shadow DOM est un standard W3C pris en charge par tous les navigateurs modernes (Chrome 53+, Firefox 63+). L'idée : tout élément peut avoir une « shadow root » — un sous-arbre DOM parallèle que le CSS et les sélecteurs de la page n'atteignent PAS. La même isolation qu'un élément <video> obtient pour ses contrôles natifs — la page ne peut pas les restyler.

L'auteur du composant déclare son propre CSS à l'intérieur du shadow root — et seul ce CSS s'applique. Du point de vue de la page, le shadow root est une boîte noire.

À quoi cela ressemble maintenant

La fenêtre de l'Assistant IA (.jz-pane-ai) est rendue comme un shadow root attaché à son élément hôte dans l'arbre DOM. À l'intérieur, elle embarque ses propres styles — couleurs, polices, padding, bordures — tout ce dont elle a besoin. Les styles de la page ne franchissent pas la frontière :

• Leur font-family: 'Google Sans' sur body n'entre pas.
• Leur * { margin: 0 } avec !important n'entre pas.
• Même leur body button { background: red } n'entre pas.

Lors des tests sur un large éventail de domaines (Google, Facebook, GitHub, banques, intranets), la fenêtre a maintenant exactement le même aspect partout.

Ce que cela signifie pour vous

L'effet le plus simple : la fenêtre de l'Assistant IA a toujours l'aspect que nous avons conçu. Que vous soyez sur un service au style agressif comme Notion / Gmail / Slack, sur un blog minimaliste ou sur un intranet d'entreprise avec sa propre bibliothèque CSS — l'UI de l'Assistant IA porte des couleurs cohérentes, la police à chasse fixe pour le code, le bon padding des champs, des boutons lisibles.

Le second effet : vous n'avez plus à signaler les bugs « l'extension a un drôle d'aspect sur X ». Toute cette classe de problèmes a disparu.

Pourquoi maintenant

Le shadow DOM est répandu depuis des années, mais son adoption a exigé de reconstruire le rendu du composant — feuille de style attachée au shadow root, distribution des événements, accrochage du mouse-down (redimensionnement, glissement) à l'élément hôte. Pour l'Assistant IA, avec beaucoup de surface interactive (saisie de chat, menu déroulant de copie, historique défilant, infobulles), plusieurs morceaux ont dû être réécrits. Le reste des fenêtres de développement (panneau CSS, panneau JS, console JS, console de sortie) reste en light DOM pour l'instant — voir l'aperçu des fenêtres. En migrer davantage vers le shadow DOM est la direction naturelle.

Bonus : une console de sortie plus rapide (v3.2.30)

Une étape antérieure vers l'isolation par shadow DOM a touché la console de sortie (v3.2.30). Effet de bord : une accélération sérieuse. Avant le shadow DOM, rendre 700 entrées de log prenait ~5 secondes (les styles de la page forçaient un recalcul de style sur chaque nœud). Avec le shadow DOM : ~100 millisecondes. Idem pour les onglets Network, errors et dataLayer. Un article dédié : Console de sortie 50× plus rapide grâce au shadow DOM.

Voir aussi

• Fenêtres sur la page — aperçu de chaque fenêtre de développement
• Les règles JS fonctionnent désormais sur Facebook, X et GitHub — un autre problème « la page bloque l'extension » — corrigé
• Tutoriel d'intégration interactif — une introduction à l'Assistant IA et au reste des fenêtres

Installer JustZix — et obtenez une UI d'Assistant IA qui a le même aspect sur chaque page.