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

# Render cart in shadow DOM 설정

> 이 문서에서는 Render Cart in Shadow DOM 설정이 하는 역할과, Shopify 테마와 Upcart 간의 스타일 또는 통합 충돌 문제를 해결하는 방법을 설명해요.

<div id="what-shadow-dom-does">
  ## Shadow DOM이 하는 일
</div>

**Render Cart in Shadow DOM** 설정을 **켜면**, Upcart는 스타일과 스크립트를 스토어의 나머지 부분과 분리하는 독립된 공간을 만들어요.

이는 다음을 의미해요:

* 테마의 전역 CSS가 Upcart의 디자인을 덮어쓸 수 없어요.
* Upcart의 스타일도 테마에 영향을 주지 않아요.
* 다양한 기기와 테마에서 카트가 일관되게 유지돼요.

Shadow DOM은 카트가 의도한 대로 보이고 작동하도록 도와주는 카트 주변의 "보호막"이라고 생각하면 돼요.

***

<div id="how-this-happens">
  ## 이런 일이 발생하는 이유
</div>

Shopify와 서드파티 테마에는 Upcart의 모양이나 동작에 의도치 않게 영향을 줄 수 있는 전역 CSS와 JavaScript가 포함된 경우가 많아요.

**Render Cart in Shadow DOM** 설정은 Upcart의 카트 드로어를 자체 보호 환경 안에 격리하여 이러한 충돌을 방지하는 데 도움을 줘요. 활성화하면 테마 업데이트나 커스텀 코드 변경과 관계없이 Shadow DOM이 카트 디자인과 레이아웃을 일관되게 유지해요.

다만 테마나 서드파티 앱이 카트 요소에 직접 접근해야 하는 경우, 이 격리로 인해 통합에 어려움이 생길 수 있어요.

***

<div id="technical-considerations">
  ## 기술적 고려 사항
</div>

본인이나 개발자가 JavaScript로 Upcart 내부의 요소를 수정해야 한다면, 올바른 document 참조를 사용하는 것이 중요해요:

* Upcart **내부**의 요소를 대상으로 할 때는 `upcartDocumentOrShadowRoot`를 사용하세요.
* Upcart **외부**의 요소(예: Shopify 테마의 헤더나 푸터)를 대상으로 할 때는 `document`를 사용하세요.

Shadow DOM이 격리되어 있어도 Upcart는 **Public API**와 헬퍼 함수를 통해 테마 및 다른 앱과 상호작용할 수 있는 방법을 제공해요.

***

<div id="troubleshooting-and-limitations">
  ## 문제 해결 및 제한 사항
</div>

대부분의 경우 Shadow DOM을 활성화하면 CSS 및 레이아웃 충돌이 자동으로 해결돼요.\
하지만 여전히 문제가 발생할 수 있는 몇 가지 시나리오가 있어요:

* **가격 앱:** 다른 앱이 카트 내부에서 가격이나 체크아웃 동작을 직접 수정해야 하는 경우, Shadow DOM은 외부 스크립트로부터 Upcart의 내부 구조를 숨기기 때문에 이를 어렵게 만들 수 있어요.
* **테마 수준 JavaScript:** `document.querySelector()`를 사용하는 커스텀 스크립트는 Shadow DOM이 활성화된 동안 카트 요소를 찾지 못할 수 있어요.

이러한 통합을 위해 스토어 동작을 테스트해야 한다면 일시적으로 비활성화할 수 있어요. 카트 에디터를 열고 **Settings → Cart settings**로 이동한 다음 **Advanced Settings**를 펼치고 **Render cart in shadow DOM** 체크를 해제하세요.