> For the complete documentation index, see [llms.txt](https://docs.carpose.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.carpose.de/misc-modules/01_shadow-dom-architecture.md).

# Shadow DOM Architecture

{% hint style="info" %}
All Carposé components render inside a Shadow DOM for complete style isolation from the host page.
{% endhint %}

## Overview

Every Carposé component is rendered within a Shadow DOM. This guarantees complete style isolation from the host page: component styles never leak out, and the host site's CSS never affects the components.

## Why Shadow DOM?

* **Style isolation** — component styles don't leak to the host page, and host styles don't affect components
* **Encapsulation** — components are self-contained units
* **Consistency** — components render the same way across different websites
* **No CSS conflicts** — avoids class-name collisions with the host page

## How It Works

When a component is initialised, a shadow root is attached to the host element, the component's styles are injected into that shadow root, and the component is rendered inside it. Each component instance has its own style scope.

## Architecture Diagram

```
Host Page
└── <div data-carpose-component="…">
    └── #shadow-root
        ├── <style> (injected styles)
        └── <div> (React app root)
            └── React component tree
```

## Notes

* All components use Shadow DOM by default — no configuration is required
* Style isolation is automatic