> 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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.carpose.de/misc-modules/01_shadow-dom-architecture.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.