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

# Instelling Render cart in shadow DOM

> Dit artikel legt uit wat de instelling Render Cart in Shadow DOM doet en hoe je problemen oplost met styling- of integratieconflicten tussen je Shopify-thema en Upcart.

<div id="what-shadow-dom-does">
  ## Wat Shadow DOM doet
</div>

Wanneer de instelling **Render Cart in Shadow DOM** is **ingeschakeld**, creëert Upcart een op zichzelf staande ruimte die de eigen stijlen en scripts gescheiden houdt van de rest van je winkel.

Dit betekent:

* De globale CSS van je thema kan het ontwerp van Upcart niet overschrijven.
* De styling van Upcart verstoort je thema ook niet.
* De winkelwagen blijft consistent op verschillende apparaten en thema's.

Je kunt Shadow DOM zien als een "beschermende bubbel" rond je winkelwagen die ervoor zorgt dat deze eruitziet en werkt zoals bedoeld.

***

<div id="how-this-happens">
  ## Hoe dit gebeurt
</div>

Shopify-thema's en thema's van derden bevatten vaak globale CSS en JavaScript die onbedoeld kunnen beïnvloeden hoe Upcart eruitziet of zich gedraagt.

De instelling **Render Cart in Shadow DOM** helpt deze conflicten te voorkomen door de cart drawer van Upcart te isoleren in een eigen beschermde omgeving. Wanneer Shadow DOM is ingeschakeld, blijven het ontwerp en de indeling van je winkelwagen consistent, ongeacht thema-updates of aangepaste codewijzigingen.

Als je thema of een app van derden echter directe toegang tot winkelwagenelementen nodig heeft, kan deze isolatie soms integratieproblemen opleveren.

***

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

Als jij of een developer elementen binnen Upcart met JavaScript wilt aanpassen, is het belangrijk om de juiste documentverwijzingen te gebruiken:

* Gebruik `upcartDocumentOrShadowRoot` wanneer je elementen **binnen** Upcart wilt benaderen.
* Gebruik `document` wanneer je elementen **buiten** Upcart wilt benaderen (bijvoorbeeld de header of footer van je Shopify-thema).

Ook al is de Shadow DOM geïsoleerd, Upcart biedt nog steeds manieren om te communiceren met je thema en andere apps via de **Public API** en hulpfuncties.

***

<div id="troubleshooting-and-limitations">
  ## Probleemoplossing en beperkingen
</div>

In de meeste gevallen lost het inschakelen van Shadow DOM CSS- en indelingsconflicten automatisch op.\
Toch kunnen er altijd scenario's zijn waarin je nog steeds problemen ervaart:

* **Prijs-apps:** Als een andere app prijzen of het checkout-gedrag binnen de winkelwagen rechtstreeks moet aanpassen, kan Shadow DOM dat lastig maken, omdat het de interne structuur van Upcart verbergt voor externe scripts.
* **JavaScript op themaniveau:** Aangepaste scripts die `document.querySelector()` gebruiken, vinden mogelijk geen winkelwagenelementen terwijl Shadow DOM is ingeschakeld.

Als je het gedrag van je winkel voor deze integraties wilt testen, kun je de instelling tijdelijk uitschakelen: open de cart editor, ga naar **Settings → Cart settings**, klap **Advanced Settings** uit en schakel **Render cart in shadow DOM** uit.