> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Paramètre Render cart in shadow DOM

> Cet article explique ce que fait le paramètre Render Cart in Shadow DOM et comment résoudre les problèmes liés aux conflits de style ou d'intégration entre votre thème Shopify et Upcart.

<div id="what-shadow-dom-does">
  ## Ce que fait le Shadow DOM
</div>

Lorsque le paramètre **Render Cart in Shadow DOM** est **activé**, Upcart crée un espace autonome qui maintient ses styles et scripts séparés du reste de votre boutique.

Cela signifie que :

* Le CSS global de votre thème ne peut pas écraser le design d'Upcart.
* Le style d'Upcart n'interférera pas non plus avec votre thème.
* Le panier reste cohérent sur différents appareils et thèmes.

Vous pouvez considérer le Shadow DOM comme une « bulle protectrice » autour de votre panier qui l'aide à s'afficher et à fonctionner comme prévu.

***

<div id="how-this-happens">
  ## Comment cela se produit
</div>

Les thèmes Shopify et tiers sont souvent livrés avec du CSS et du JavaScript globaux qui peuvent affecter involontairement l'apparence ou le comportement d'Upcart.

Le paramètre **Render Cart in Shadow DOM** aide à prévenir ces conflits en isolant le tiroir de panier d'Upcart dans son propre environnement protégé. Lorsqu'il est activé, le Shadow DOM maintient la cohérence du design et de la mise en page de votre panier, indépendamment des mises à jour du thème ou des modifications de code personnalisé.

Cependant, si votre thème ou une application tierce a besoin d'un accès direct aux éléments du panier, cette isolation peut parfois créer des difficultés d'intégration.

***

<div id="technical-considerations">
  ## Considérations techniques
</div>

Si vous ou un développeur devez modifier des éléments dans Upcart à l'aide de JavaScript, il est important d'utiliser les bonnes références de document :

* Utilisez `upcartDocumentOrShadowRoot` pour cibler des éléments **à l'intérieur** d'Upcart.
* Utilisez `document` pour cibler des éléments **à l'extérieur** d'Upcart (par exemple, l'en-tête ou le pied de page de votre thème Shopify).

Même si le Shadow DOM est isolé, Upcart fournit toujours des moyens d'interagir avec votre thème et d'autres applications via son **API publique** et ses fonctions utilitaires.

***

<div id="troubleshooting-and-limitations">
  ## Dépannage et limitations
</div>

Dans la plupart des cas, l'activation du Shadow DOM corrigera automatiquement les conflits de CSS et de mise en page.\
Cependant, il peut toujours exister des scénarios où vous rencontrez encore des problèmes :

* **Applications de tarification :** si une autre application doit modifier directement les prix ou le comportement de paiement à l'intérieur du panier, le Shadow DOM peut rendre cela difficile puisqu'il masque la structure interne d'Upcart aux scripts externes.
* **JavaScript au niveau du thème :** les scripts personnalisés qui utilisent `document.querySelector()` peuvent ne pas trouver les éléments du panier lorsque le Shadow DOM est activé.

Si vous devez tester le comportement de votre boutique pour ces intégrations, vous pouvez toujours désactiver temporairement le Shadow DOM dans **Upcart → Settings → Advanced Settings**.