# CSS Injection
_Path: en/frontend/web-host/css-injection_
## Table of Contents
- CSS Injection
## Content
# CSS Injection
The Web Host uses a layered injection pipeline to give child iframes the same visual theme as the host itself. Because iframes do not inherit CSS from their parent document, the host re-injects each style asset explicitly into the child's `srcdoc`. Each layer is independently toggleable through `ProxyConfig`.
This page documents the injection pipeline, all available flags, and how to customize styles at the global, host-chrome, or per-page level. It is the **canonical reference for the `proxy.injections` CSS flags and their runtime defaults** — authoring docs that show recommended explicit values link back here. For the developer-facing theming guide (CSS variable tokens, Tailwind mapping, web component patterns), see [Theming](../micro-frontends/theming.md).
## The Injection Pipeline
Styles are injected in this logical layering. The first four layers are plain `` + this.shadowRoot.innerHTML
```
Available `hostCss` keys:
| Key | Content | Bundle impact |
|-----|---------|---------------|
| `hostCss.themeConfigUrl` | CSS variables (`--p-primary-*`, light + dark) | Small (~5 KB) |
| `hostCss.primeVueCssUrl` | PrimeVue components + Tailwind utilities | Large (~455 KB) |
| `hostCss.markdownCssUrl` | `.data-body` markdown rendering styles | Small |
| `hostCss.iframeCssUrl` | Scrollbar styling using `--p-surface-*` | Tiny |
| `hostCss.preflightCssUrl` | Tailwind/PrimeVue preflight base reset (normalize/reset) | Small |
A web component that wants host-faithful rendering may need to fetch `hostCss.preflightCssUrl` explicitly via `loadCss()`, because the host's base preflight reset does **not** cross the shadow boundary.
For guidance on which keys to request and when — including the decision tree for balancing style fidelity against Shadow DOM bundle size — see [WC Theming § hostCssKeys decision tree](../micro-frontends/web-component-theming.md).
## `AppConfig.theming` Projection
The facade config exposes three theming scopes: `theming.global`, `theming.host`, and `theming.children`. Before a page iframe receives its child config, the host projects the effective child theme into `AppConfig.theming.global`. That child global scope is what `customCss` and `customVariables` inject into the iframe.
Keys are CSS variable names exactly as they should appear in CSS:
```typescript
// In the facade configuration or SetConfig PostMessage payload.
theming: {
global: {
cssVariables: {
'--p-primary': 'rgb(220, 38, 38)',
'--p-surface-0': '#0f0f0f',
'--p-content-border-radius': '2px',
}
}
}
```
The variables are injected as a `:root { ... }` block in the iframe's `adoptedStyleSheets`, so they override `theme-config.css` values for all components in that layer. This override does not depend on `` source order — see [Override mechanism](#override-mechanism-adopted-stylesheets).
### Override mechanism: adopted stylesheets
`customCSS` and `cssVariables` are **not** ordinary `` `