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

# Ajuste de renderizar el carrito en shadow DOM

> Este artículo explica qué hace el ajuste Render Cart in Shadow DOM y cómo solucionar problemas relacionados con conflictos de estilos o de integración entre tu tema de Shopify y Upcart.

<div id="what-shadow-dom-does">
  ## Qué hace el Shadow DOM
</div>

Cuando el ajuste **Render Cart in Shadow DOM** está **activado**, Upcart crea un espacio autónomo que mantiene sus estilos y scripts separados del resto de tu tienda.

Esto significa que:

* El CSS global de tu tema no puede anular el diseño de Upcart.
* El estilo de Upcart tampoco interferirá con tu tema.
* El carrito se mantiene consistente en diferentes dispositivos y temas.

Puedes pensar en el Shadow DOM como una "burbuja protectora" alrededor de tu carrito que le ayuda a verse y funcionar como debe.

***

<div id="how-this-happens">
  ## Cómo sucede esto
</div>

Los temas de Shopify y de terceros suelen incluir CSS y JavaScript globales que pueden afectar involuntariamente el aspecto o el comportamiento de Upcart.

El ajuste **Render Cart in Shadow DOM** ayuda a prevenir estos conflictos aislando el cajón del carrito de Upcart dentro de su propio entorno protegido. Cuando está habilitado, el Shadow DOM mantiene el diseño y la disposición de tu carrito consistentes, independientemente de las actualizaciones del tema o los cambios de código personalizado.

Sin embargo, si tu tema o una app de terceros necesita acceso directo a los elementos del carrito, este aislamiento a veces puede crear desafíos de integración.

***

<div id="technical-considerations">
  ## Consideraciones técnicas
</div>

Si tú o un desarrollador necesitan modificar elementos dentro de Upcart usando JavaScript, es importante usar las referencias de documento correctas:

* Usa `upcartDocumentOrShadowRoot` cuando apuntes a elementos **dentro** de Upcart.
* Usa `document` cuando apuntes a elementos **fuera** de Upcart (por ejemplo, el encabezado o pie de página de tu tema de Shopify).

Aunque el Shadow DOM está aislado, Upcart todavía ofrece formas de interactuar con tu tema y otras apps a través de su **Public API** y funciones auxiliares.

***

<div id="troubleshooting-and-limitations">
  ## Solución de problemas y limitaciones
</div>

En la mayoría de los casos, habilitar el Shadow DOM corregirá automáticamente los conflictos de CSS y de diseño.\
Sin embargo, siempre puede haber algunos escenarios en los que aún experimentes problemas:

* **Apps de precios:** Si otra app necesita modificar directamente los precios o el comportamiento del checkout dentro del carrito, el Shadow DOM puede dificultarlo, ya que oculta la estructura interna de Upcart a los scripts externos.
* **JavaScript a nivel del tema:** Los scripts personalizados que usan `document.querySelector()` pueden no encontrar los elementos del carrito mientras el Shadow DOM está habilitado.

Si necesitas probar el comportamiento de tu tienda con estas integraciones, siempre puedes deshabilitar temporalmente el Shadow DOM en **Upcart → Settings → Advanced Settings**.