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

# 在 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 和第三方主题通常带有全局 CSS 和 JavaScript，可能会无意中影响 Upcart 的外观或行为。

**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 仍然通过其 **Public API** 和辅助函数提供了与主题和其他应用交互的方式。

***

<div id="troubleshooting-and-limitations">
  ## 故障排除与限制
</div>

在大多数情况下，启用 Shadow DOM 会自动修复 CSS 和布局冲突。\
不过，总有一些场景可能仍会遇到问题：

* \*\*定价应用：\*\*如果另一个应用需要直接修改购物车内的价格或结账行为，Shadow DOM 会使其变得困难，因为它对外部脚本隐藏了 Upcart 的内部结构。
* \*\*主题层面的 JavaScript：\*\*在启用 Shadow DOM 时，使用 `document.querySelector()` 的自定义脚本可能找不到购物车元素。

如果你需要针对这些集成测试商店的行为，可以临时禁用它：打开购物车编辑器，前往 **Settings → Cart settings**，展开 **Advanced Settings**，然后取消勾选 **Render cart in shadow DOM**。