> ## 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.

# Einstellung „Render Cart in Shadow DOM“

> Dieser Artikel erklärt, was die Einstellung Render Cart in Shadow DOM bewirkt und wie du Probleme mit Styling- oder Integrationskonflikten zwischen deinem Shopify-Theme und Upcart behebst.

<div id="what-shadow-dom-does">
  ## Was Shadow DOM bewirkt
</div>

Wenn die Einstellung **Render Cart in Shadow DOM** **aktiviert** ist, erstellt Upcart einen in sich geschlossenen Bereich, der seine Styles und Skripte vom Rest deines Stores getrennt hält.

Das bedeutet:

* Das globale CSS deines Themes kann das Design von Upcart nicht überschreiben.
* Das Styling von Upcart beeinträchtigt auch dein Theme nicht.
* Der Warenkorb bleibt über verschiedene Geräte und Themes hinweg konsistent.

Du kannst dir das Shadow DOM als „Schutzblase“ um deinen Warenkorb vorstellen, die dafür sorgt, dass er so aussieht und funktioniert, wie er soll.

***

<div id="how-this-happens">
  ## Wie es dazu kommt
</div>

Shopify- und Drittanbieter-Themes bringen oft globales CSS und JavaScript mit, das unbeabsichtigt beeinflussen kann, wie Upcart aussieht oder sich verhält.

Die Einstellung **Render Cart in Shadow DOM** hilft, diese Konflikte zu vermeiden, indem sie den Cart Drawer von Upcart in einer eigenen geschützten Umgebung isoliert. Wenn sie aktiviert ist, hält das Shadow DOM dein Warenkorb-Design und -Layout konsistent — unabhängig von Theme-Updates oder benutzerdefinierten Code-Änderungen.

Wenn dein Theme oder eine Drittanbieter-App jedoch direkten Zugriff auf Warenkorb-Elemente benötigt, kann diese Isolation manchmal Integrationsherausforderungen mit sich bringen.

***

<div id="technical-considerations">
  ## Technische Überlegungen
</div>

Wenn du oder ein Entwickler Elemente innerhalb von Upcart mit JavaScript ändern müsst, ist es wichtig, die richtigen Dokumentreferenzen zu verwenden:

* Verwende `upcartDocumentOrShadowRoot`, wenn du Elemente **innerhalb** von Upcart ansprichst.
* Verwende `document`, wenn du Elemente **außerhalb** von Upcart ansprichst (zum Beispiel den Header oder Footer deines Shopify-Themes).

Auch wenn das Shadow DOM isoliert ist, bietet Upcart weiterhin Möglichkeiten, über seine **öffentliche API** und Hilfsfunktionen mit deinem Theme und anderen Apps zu interagieren.

***

<div id="troubleshooting-and-limitations">
  ## Fehlerbehebung und Einschränkungen
</div>

In den meisten Fällen behebt das Aktivieren des Shadow DOM CSS- und Layout-Konflikte automatisch.\
Es kann jedoch immer Szenarien geben, in denen du weiterhin Probleme hast:

* **Preis-Apps:** Wenn eine andere App Preise oder das Checkout-Verhalten direkt im Warenkorb ändern muss, kann das Shadow DOM das erschweren, da es die interne Struktur von Upcart vor externen Skripten verbirgt.
* **JavaScript auf Theme-Ebene:** Benutzerdefinierte Skripte, die `document.querySelector()` verwenden, finden Warenkorb-Elemente möglicherweise nicht, solange das Shadow DOM aktiviert ist.

Wenn du das Verhalten deines Stores für diese Integrationen testen musst, kannst du die Einstellung vorübergehend deaktivieren: Öffne den Cart Editor, gehe zu **Settings → Cart settings**, klappe **Advanced Settings** auf und deaktiviere **Render cart in shadow DOM**.