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

# Configuração de renderizar o carrinho no Shadow DOM

> Este artigo explica o que a configuração Render Cart in Shadow DOM faz e como solucionar problemas relacionados a conflitos de estilo ou integração entre seu tema do Shopify e o Upcart.

<div id="what-shadow-dom-does">
  ## O que o Shadow DOM faz
</div>

Quando a configuração **Render Cart in Shadow DOM** está **ativada**, o Upcart cria um espaço independente que mantém seus estilos e scripts separados do restante da sua loja.

Isso significa que:

* O CSS global do seu tema não pode sobrescrever o design do Upcart.
* O estilo do Upcart também não interfere no seu tema.
* O carrinho permanece consistente em diferentes dispositivos e temas.

Você pode pensar no Shadow DOM como uma "bolha protetora" em torno do seu carrinho, que ajuda a fazê-lo parecer e funcionar da maneira esperada.

***

<div id="how-this-happens">
  ## Como isso acontece
</div>

O Shopify e temas de terceiros frequentemente vêm com CSS e JavaScript globais que podem afetar involuntariamente a aparência ou o comportamento do Upcart.

A configuração **Render Cart in Shadow DOM** ajuda a evitar esses conflitos isolando o cart drawer do Upcart dentro de seu próprio ambiente protegido. Quando habilitado, o Shadow DOM mantém o design e o layout do seu carrinho consistentes, independentemente de atualizações do tema ou alterações de código personalizado.

No entanto, se o seu tema ou um app de terceiros precisar de acesso direto aos elementos do carrinho, esse isolamento pode às vezes criar desafios de integração.

***

<div id="technical-considerations">
  ## Considerações técnicas
</div>

Se você ou um desenvolvedor precisar modificar elementos dentro do Upcart usando JavaScript, é importante usar as referências de documento corretas:

* Use `upcartDocumentOrShadowRoot` ao selecionar elementos **dentro** do Upcart.
* Use `document` ao selecionar elementos **fora** do Upcart (por exemplo, o cabeçalho ou rodapé do seu tema do Shopify).

Mesmo com o Shadow DOM isolado, o Upcart ainda oferece maneiras de interagir com seu tema e outros apps por meio de sua **API pública** e funções auxiliares.

***

<div id="troubleshooting-and-limitations">
  ## Solução de problemas e limitações
</div>

Na maioria dos casos, habilitar o Shadow DOM corrigirá conflitos de CSS e de layout automaticamente.\
No entanto, sempre pode haver alguns cenários em que você ainda encontre problemas:

* **Apps de preços:** Se outro app precisar modificar diretamente preços ou o comportamento do checkout dentro do carrinho, o Shadow DOM pode dificultar isso, já que ele oculta a estrutura interna do Upcart de scripts externos.
* **JavaScript no nível do tema:** Scripts personalizados que usam `document.querySelector()` podem não encontrar os elementos do carrinho enquanto o Shadow DOM estiver habilitado.

Se você precisar testar o comportamento da sua loja para essas integrações, pode desabilitá-lo temporariamente: abra o editor de carrinho, vá em **Settings → Cart settings**, expanda **Advanced Settings** e desmarque **Render cart in shadow DOM**.