> ## 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 の cart drawer を独自の保護された環境内に分離することで、これらの競合を防ぎます。有効にすると、Shadow DOM はテーマの更新やカスタムコードの変更に関係なく、カートのデザインとレイアウトを一貫した状態に保ちます。

ただし、テーマやサードパーティアプリがカート要素への直接アクセスを必要とする場合、この分離が統合上の課題を生むことがあります。

***

<div id="technical-considerations">
  ## 技術的な考慮事項
</div>

あなたや開発者が JavaScript を使用して Upcart 内の要素を変更する必要がある場合、正しいドキュメント参照を使用することが重要です:

* Upcart の**内側**の要素を対象とする場合は `upcartDocumentOrShadowRoot` を使用します。
* Upcart の**外側**の要素(たとえば、Shopify テーマのヘッダーやフッター)を対象とする場合は `document` を使用します。

Shadow DOM は分離されていますが、Upcart は**パブリック API** とヘルパー関数を通じて、テーマや他のアプリとやり取りする方法を引き続き提供しています。

***

<div id="troubleshooting-and-limitations">
  ## トラブルシューティングと制限事項
</div>

ほとんどの場合、Shadow DOM を有効にすると CSS とレイアウトの競合は自動的に修正されます。\
ただし、引き続き問題が発生する可能性のあるシナリオもあります:

* **価格設定アプリ:** 別のアプリがカート内の価格やチェックアウトの動作を直接変更する必要がある場合、Shadow DOM は Upcart の内部構造を外部スクリプトから隠すため、それが困難になることがあります。
* **テーマレベルの JavaScript:** `document.querySelector()` を使用するカスタムスクリプトは、Shadow DOM が有効な間、カート要素を見つけられない場合があります。

これらの統合についてストアの動作をテストする必要がある場合は、一時的に無効にできます: Cart Editor を開き、**Settings → Cart settings** に移動し、**Advanced Settings** を展開して、**Render cart in shadow DOM** のチェックを外します。