Shadow DOM Architecture

All Carposé components render inside a Shadow DOM for complete style isolation from the host page.

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 (Emotion/MUI) are injected into that shadow root, and the React 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