diff --git a/.github/skills/testing/SKILL.md b/.github/skills/testing/SKILL.md
index 69c02fb17..7063413a4 100644
--- a/.github/skills/testing/SKILL.md
+++ b/.github/skills/testing/SKILL.md
@@ -181,9 +181,16 @@ Create `webui.config.json` to override build options:
 { "css": "module" }
 ```
 
-### Light-DOM fixtures
-
-The pipeline always produces shadow DOM. For light-DOM hydration tests, use manual template registration with `registerCompiledTemplate` from `@microsoft/webui-test-support` and a hand-written `fixture.html`. See `fixtures/light-dom/` for the pattern.
+### Light and Shadow fixtures
+
+Ordinary unwrapped fixture components exercise the Shadow default. Set
+`"dom": "light"` in `webui.config.json` to exercise global Light rendering; a
+fixture component requiring Shadow inside that build must author a sole
+top-level `<template shadowrootmode="open">`. A sole bare top-level
+`<template>` explicitly exercises Light even in the default Shadow fixture.
+See `fixtures/dom-default/` and
+`fixtures/light-dom/` for both paths through the real pipeline. Reserve manual
+`registerCompiledTemplate` fixtures for raw template-metadata scenarios.
 
 ### Running framework E2E tests
 
diff --git a/.github/skills/webui-dev/SKILL.md b/.github/skills/webui-dev/SKILL.md
index 20787c75b..c03d61a1f 100644
--- a/.github/skills/webui-dev/SKILL.md
+++ b/.github/skills/webui-dev/SKILL.md
@@ -1,62 +1,62 @@
----
-name: webui-dev
-description: Build interactive WebUI apps with compiled-template hydration, template syntax, component patterns, and CLI usage.
----
-
-# WebUI App Development
-
-Use this skill when building or modifying WebUI applications.
-
-## Critical rules (memorize these)
-
-1. **The template is the UI.** All structure lives in `.html`. Never `document.createElement`, `innerHTML`, `insertAdjacentHTML`, or `appendChild`. Show/hide with `<if>`, repeat with `<for>`. The only exception is mounting a lazily loaded component.
-2. **CSS owns all styling and animation.** Never `el.style.x =`, `classList.toggle`, or `adoptedStyleSheets`. Bind `?data-active="{{expr}}"` and select `[data-active]` in CSS. Animate with `transition`, `@keyframes`, `@starting-style` - never `element.animate()` or a JS animation library.
-3. **JavaScript is opt-in.** A component needs **no** `.ts` file unless it has an `@event`, a `w-ref` for an imperative API, a lifecycle hook, a fetch, or a public method API. `WebUIElement`, `@observable`, and `@attr` are optional - add them only when TypeScript reads/writes the value or it is public API. Otherwise the value belongs in the server state JSON.
-4. **Use the web platform.** `<dialog>` over a div modal, `popover` over a JS dropdown, `<details>` over a JS accordion. Prefer `:has()`, `@container`, `color-mix()`, `light-dark()`, `content-visibility`.
-5. **Every template binding must exist in the server state JSON.** Missing keys render empty, silently.
-6. **HTML, CSS, TypeScript are separate files.** No JSX. No CSS-in-JS. No JS in templates.
-7. **The `<template>` tag is optional.** The build tool auto-injects it. Include it only for root host events (`@custom-event` on the component root, which also catch events targeted at the host element itself).
-8. **Components inside `<for>` loops do NOT inherit loop variables.** Pass data via attributes.
-9. **Text bindings are path lookups; comparisons belong in conditions.** `{{count}}` and `{{user.name}}` resolve a dotted state path - nothing else. `{{count > 0}}` is looked up as a key literally named `count > 0` and renders empty. Comparisons go in `<if condition="count > 0">` or `?active="{{section == 'guide'}}"`. Operators: `==`, `!=`, `<`, `>`, `<=`, `>=`, `&&`, `||`, `!`. **Forbidden everywhere:** ternary (`? :`), function calls, arithmetic (`items.length - 1` resolves as a path and silently fails - send a precomputed `lastIndex`), mixing `&&` with `||`, more than 5 logical operators.
-10. **`w-ref` requires braces.** `w-ref="{inputEl}"`, never `w-ref="inputEl"` - non-braced fails the build with `invalid-w-ref`. Use it only for imperative APIs (focus, scroll, `showModal`), never to read state.
-11. **`@attr({ mode: 'boolean' })` for true/false.** Present = true, absent = false. Never use string `"false"`.
-
-## Quick reference
-
-Most components need only HTML and CSS:
-
-```html
-<!-- user-card.html - no .ts file -->
-<h2>{{user.name}}</h2>
-<if condition="user.isAdmin"><span class="badge">Admin</span></if>
-```
-
-Add a class only when something interactive happens:
-
-```typescript
-import { WebUIElement, attr, observable } from '@microsoft/webui-framework';
-
-export class MyComponent extends WebUIElement {
-  @attr label = '';                          // set by a parent template
-  @attr({ mode: 'boolean' }) disabled = false;
-  @observable count = 0;                     // mutated by increment()
-  inputEl!: HTMLInputElement;                // populated by w-ref="{inputEl}"
-
-  increment(): void { this.count += 1; }
-  onKeydown(e: KeyboardEvent): void { if (e.key === 'Enter') this.submit(); }
-}
-MyComponent.define('my-component');
-```
-
-```bash
-webui build ./src --out ./dist --plugin=webui
-webui serve ./src --state ./data/state.json --plugin=webui --watch
-```
-
-## Full reference
-
-The complete guide covering all template syntax, styling and animation rules, anti-patterns, routing, and a pre-flight checklist:
-
-**[docs/ai/SKILL.md](/docs/ai/SKILL.md)**
-
-Read that file before generating any WebUI code.
+---
+name: webui-dev
+description: Build interactive WebUI apps with compiled-template hydration, template syntax, component patterns, and CLI usage.
+---
+
+# WebUI App Development
+
+Use this skill when building or modifying WebUI applications.
+
+## Critical rules (memorize these)
+
+1. **The template is the UI.** All structure lives in `.html`. Never `document.createElement`, `innerHTML`, `insertAdjacentHTML`, or `appendChild`. Show/hide with `<if>`, repeat with `<for>`. The only exception is mounting a lazily loaded component.
+2. **CSS owns all styling and animation.** Never `el.style.x =`, `classList.toggle`, or `adoptedStyleSheets`. Bind `?data-active="{{expr}}"` and select `[data-active]` in CSS. Animate with `transition`, `@keyframes`, `@starting-style` - never `element.animate()` or a JS animation library.
+3. **JavaScript is opt-in.** A component needs **no** `.ts` file unless it has an `@event`, a `w-ref` for an imperative API, a lifecycle hook, a fetch, or a public method API. `WebUIElement`, `@observable`, and `@attr` are optional - add them only when TypeScript reads/writes the value or it is public API. Otherwise the value belongs in the server state JSON.
+4. **Use the web platform.** `<dialog>` over a div modal, `popover` over a JS dropdown, `<details>` over a JS accordion. Prefer `:has()`, `@container`, `color-mix()`, `light-dark()`, `content-visibility`.
+5. **Every template binding must exist in the server state JSON.** Missing keys render empty, silently.
+6. **HTML, CSS, TypeScript are separate files.** No JSX. No CSS-in-JS. No JS in templates.
+7. **Unwrapped components default to Shadow; `--dom light` makes them global Light DOM while authored open wrappers stay Shadow.** A sole bare top-level `<template>` explicitly selects Light and is unwrapped even under the Shadow fallback. Light CSS uses ordinary selectors in its owning CSS tree. Use one sole top-level `<template shadowrootmode="open">` when the component needs native `<slot>` projection, Shadow encapsulation, CSS-heavy frequent restyling, root host events, or Shadow-only selectors such as `:host`. A `<slot>` and `:host` fail only in an effective Light component.
+8. **Components inside `<for>` loops do NOT inherit loop variables.** Pass data via attributes.
+9. **Text bindings are path lookups; comparisons belong in conditions.** `{{count}}` and `{{user.name}}` resolve a dotted state path - nothing else. `{{count > 0}}` is looked up as a key literally named `count > 0` and renders empty. Comparisons go in `<if condition="count > 0">` or `?active="{{section == 'guide'}}"`. Operators: `==`, `!=`, `<`, `>`, `<=`, `>=`, `&&`, `||`, `!`. **Forbidden everywhere:** ternary (`? :`), function calls, arithmetic (`items.length - 1` resolves as a path and silently fails - send a precomputed `lastIndex`), mixing `&&` with `||`, more than 5 logical operators.
+10. **`w-ref` requires braces.** `w-ref="{inputEl}"`, never `w-ref="inputEl"` - non-braced fails the build with `invalid-w-ref`. Use it only for imperative APIs (focus, scroll, `showModal`), never to read state.
+11. **`@attr({ mode: 'boolean' })` for true/false.** Present = true, absent = false. Never use string `"false"`.
+
+## Quick reference
+
+Most components need only HTML and CSS:
+
+```html
+<!-- user-card.html - no .ts file -->
+<h2>{{user.name}}</h2>
+<if condition="user.isAdmin"><span class="badge">Admin</span></if>
+```
+
+Add a class only when something interactive happens:
+
+```typescript
+import { WebUIElement, attr, observable } from '@microsoft/webui-framework';
+
+export class MyComponent extends WebUIElement {
+  @attr label = '';                          // set by a parent template
+  @attr({ mode: 'boolean' }) disabled = false;
+  @observable count = 0;                     // mutated by increment()
+  inputEl!: HTMLInputElement;                // populated by w-ref="{inputEl}"
+
+  increment(): void { this.count += 1; }
+  onKeydown(e: KeyboardEvent): void { if (e.key === 'Enter') this.submit(); }
+}
+MyComponent.define('my-component');
+```
+
+```bash
+webui build ./src --out ./dist --plugin=webui
+webui serve ./src --state ./data/state.json --plugin=webui --watch
+```
+
+## Full reference
+
+The complete guide covering all template syntax, styling and animation rules, anti-patterns, routing, and a pre-flight checklist:
+
+**[docs/ai/SKILL.md](/docs/ai/SKILL.md)**
+
+Read that file before generating any WebUI code.
diff --git a/DESIGN.md b/DESIGN.md
index 16505e588..3f7bf038c 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -38,8 +38,6 @@ pub struct WebUIProtocol {
     pub components: HashMap<String, ComponentData>,
     /// Build-wide CSS delivery strategy (Link, Style, or Module).
     pub css_strategy: CssStrategy,
-    /// Build-wide DOM encapsulation strategy (Shadow or Light).
-    pub dom_strategy: DomStrategy,
     /// Full initial state or WebUI per-component projection.
     pub initial_state_strategy: InitialStateStrategy,
     /// Ordered modulepreload hrefs for critical shared JavaScript chunks.
@@ -47,11 +45,35 @@ pub struct WebUIProtocol {
     /// Deterministic document-level CSS for build-authored component rendering
     /// policies. Empty when no component uses `w-render="lazy"`.
     pub component_render_css: String,
+    /// Ordered component style resources for each CSS-tree entry point.
+    pub style_closures: HashMap<String, ComponentStyleClosure>,
+    /// Bundled stylesheet chunks, empty unless the build enabled `css_bundle`.
+    pub style_chunks: Vec<StyleChunk>,
     /// Deterministic Link stylesheet metadata for component asset roots.
     /// Empty when the build does not emit component assets.
     pub component_asset_style_preloads: Vec<ComponentAssetStylePreload>,
 }
 
+pub struct ComponentStyleClosure {
+    /// Component tags in cascade-sensitive first-discovery order.
+    pub component_tags: Vec<String>,
+    /// Indices into `WebUIProtocol.style_chunks`, in the same cascade order.
+    /// Empty unless the build bundled CSS, in which case consumers deliver
+    /// `component_tags` resources individually.
+    pub style_chunks: Vec<u32>,
+}
+
+pub struct StyleChunk {
+    /// Stable resource name, used for `data-webui-resource` and dedup.
+    pub name: String,
+    /// Concatenated CSS for Style and Module strategies.
+    pub css: String,
+    /// External stylesheet href for the Link strategy.
+    pub css_href: String,
+    /// Merged component tags, in cascade order.
+    pub component_tags: Vec<String>,
+}
+
 /// Link stylesheet metadata for one static component asset root.
 pub struct ComponentAssetStylePreload {
     pub root: String,
@@ -64,7 +86,7 @@ pub struct ComponentAssetStylePreload {
 pub struct ComponentData {
     /// Non-WebUI client-side template payload, such as FAST `<f-template>` HTML.
     pub template: String,
-    /// Component CSS content for the Module strategy.
+    /// Retained component CSS content for Style and Module strategies.
     pub css: String,
     /// External stylesheet href for the Link CSS strategy.
     /// Default format is `<component-name>.css`, but build-time naming
@@ -72,10 +94,7 @@ pub struct ComponentData {
     /// prepend a CDN/public base URL.
     /// Always set when CssStrategy::Link is active and the component has CSS.
     /// Empty for Style/Module strategies and for components without CSS.
-    /// The handler uses `css_strategy` and `dom_strategy` on `WebUIProtocol` to
-    /// decide what to emit in `<head>`:
-    ///   Link + Shadow → `<link rel="preload">` (shadow root has the stylesheet)
-    ///   Link + Light  → `<link rel="stylesheet">` (no shadow root to host it)
+    /// Ordered style closures decide which CSS tree receives this resource.
     pub css_href: String,
     /// WebUI plugin JSON-safe component metadata.
     pub template_json: String,
@@ -90,6 +109,8 @@ pub struct ComponentData {
     /// Present for protocols with exact navigation projection metadata.
     /// Absence means the surface is unknown and requires full state.
     pub navigation_mode: Option<StateProjectionMode>,
+    /// Whether the component authors a sole open declarative Shadow root.
+    pub uses_shadow_dom: bool,
 }
 
 pub enum InitialStateStrategy {
@@ -466,10 +487,10 @@ values into the response. FFI, Node, WASM, and .NET expose only the complete
 `renderPartial` contract.
 
 - `state`: route-scoped navigation data projected with each reachable component's `navigation_keys`; included by complete-response host APIs or supplied as NDJSON Chunk 2 by a streaming host. The router applies it to components via `setState()`
-- `templateStyles`: CSS module definition tags (`<script type="importmap">{"imports":{"...":"data:text/css,..."}}</script>` strings - see [CssStrategy::Module](#css-strategy)) for newly shipped components. Empty array for Link/Style modes. The client appends these to `<head>` before installing template closure arrays so adopted stylesheets are available
+- `componentStyles`: required versioned style resources and ordered closures for newly shipped component roots. Component resources may use the template inventory, but bundled chunks are distinct resources and are never inferred from component bits. A multi-member chunk carries its ordered `members`; registering or claiming that chunk marks those component resources covered in the same CSS tree. Module resources carry both their specifier and compiled CSS
 - `templates`: JSON-safe authored and compiler-owned template metadata keyed by component tag, filtered by inventory bitmask
 - `templateFunctions`: JavaScript condition closure array strings keyed by component tag, filtered alongside `templates`; omitted or empty for templates with no conditions
-- `inventory`: updated hex bitmask of loaded templates
+- `inventory`: updated hex bitmask of loaded component template and style metadata
 - `chain`: matched route chain array. Each entry has `component`, `path`, optional `params`, `exact`, `allowedQuery`, `keepAlive`, `pendingComponent`, `errorComponent`, and `invalidates`
 - `cacheTags`: resolved cache tags from the full route chain (union of all levels, deduplicated). The client tags its cache entry with these values for tag-based invalidation
 
@@ -492,7 +513,12 @@ order supplied to `--emit-component-assets`:
 
 - Components reachable from the normal entry remain owned by the application's
   entry bundle and `protocol.bin`. Asset modules list them as external
-  prerequisites and never copy or import them.
+  template prerequisites and never copy or import their templates. The asset
+  does carry an exact style-resource definition for each external dependency in
+  one of its closures: an entry bundle's `members` prove coverage only in a CSS
+  tree where that bundle is already installed, while a deferred Shadow root is
+  a fresh target and must be able to install the dependency without
+  over-delivering the entire entry bundle.
 - A non-entry component needed by one requested root stays inline in that
   root's module.
 - Non-entry components needed by the same set of two or more roots are emitted
@@ -515,6 +541,7 @@ Every module default-exports an asset object. The relevant graph fields are:
 
 ```js
 export default {
+  version: 3,
   type: "webui-component-asset",
   kind: "root",
   root: "mail-thread",
@@ -526,7 +553,12 @@ export default {
     href: new URL("./chunk-mail-message.webui.js", import.meta.url).href,
     load: () => import("./chunk-mail-message.webui.js")
   }],
-  templateStyles: [],
+  componentStyles: {
+    version: 1,
+    strategy: "link",
+    resources: {},
+    closures: {}
+  },
   templates: {}
 };
 ```
@@ -537,6 +569,10 @@ export default {
 real dynamic import edges to shared chunks. A chunk uses `kind: "chunk"`,
 omits `root`, and has an empty `imports` array. The payload intentionally omits
 `inventory`: a static build cannot know the page's loaded template bitset.
+Component assets use version 3 and require `componentStyles`, whose resource
+catalog and ordered root closures use the same registration and install
+contract as SSR and partial navigation. Other asset versions and assets that
+omit the catalog are rejected before any templates or styles are registered.
 Every required component must have exactly one local payload, external
 prerequisite, or chunk import, and a root must include itself in
 `requiredComponents`. The framework loader rejects malformed coverage before
@@ -638,6 +674,12 @@ rejected promise.
 
 FAST plugin builds can emit the same graph with trusted `<f-template>`
 payloads in `templates`; those assets require a FAST-owned runtime loader.
+A plugin whose client runtime builds its own roots from the captured template
+owns component style delivery: WebUI keeps its own templates style-free because
+the handler installs the stored closure, but a Shadow component's CSS stays
+inline in that plugin-facing template so a client-created element is styled.
+Light CSS is never inlined there — it is Document-owned, and its host selector
+cannot be resolved from inside a runtime-created root.
 
 **Navigation cache:** The client router exposes an optional tagged navigation
 cache tier. The default `Router.start()` path does not import or instantiate the
@@ -648,7 +690,7 @@ loads the cache tier because hover preloads store speculative responses there.
 After a mutation action, `Router.invalidateTags()` evicts all entries whose tags
 overlap with the invalidated tags.
 
-**Mutation actions:** Components can declare `static action(ctx: RouteActionContext)` as the write counterpart to `static loader()`. `Router.start({ actions: true })` opts into the action runtime; otherwise the router core does not import form interception code. When enabled, the router intercepts `<form method="post">` submissions, finds the nearest route component's `static action()`, calls it, and auto-invalidates the cache using both the action's returned tags and the route's build-time `invalidates` attribute. This ensures the compiler-declared invalidation graph is always respected — developers cannot forget.
+**Mutation actions:** Components can declare `static action(ctx: RouteActionContext)` as the write counterpart to `static loader()`. `Router.start({ actions: true })` opts into the action runtime; otherwise the router core does not import form interception code. When enabled, the router intercepts `<form method="post">` submissions, finds the nearest route component's `static action()`, calls it, and auto-invalidates the cache using both the action's returned tags and the route's build-time `invalidates` attribute. The owning chain entry is resolved by route-element identity, not by component tag, so two declarations that reuse one component cannot consume each other's invalidation metadata. Loader results are keyed by the same concrete chain entries. This ensures the compiler-declared invalidation graph is always respected — developers cannot forget.
 
 **Pending UI:** Routes with a `pending` attribute show a loading component during slow navigations (>150ms). The pending component is a normal WebUI component — SSR'd and build-time validated. Keep-alive and cached routes skip pending (no delay to show).
 
@@ -659,7 +701,7 @@ overlap with the invalidated tags.
 | Header | Value | Purpose |
 |--------|-------|---------|
 | `Accept` | `application/x-ndjson, application/json` | Requests NDJSON streaming or JSON partial instead of full HTML |
-| `X-WebUI-Inventory` | Hex bitmask | Templates already loaded — server skips re-sending them |
+| `X-WebUI-Inventory` | Hex bitmask | Component template and style metadata already loaded - server skips re-sending it |
 
 The `chain` field is produced by `Protocol::render_partial()`, which walks the
 fragment graph and matches routes at each nesting level using request-local
@@ -1448,6 +1490,43 @@ pub struct HtmlParser {
 }
 ```
 
+#### Component DOM Invariant
+
+`DomStrategy` is a build-time fallback for components that do not author a
+declarative Shadow root:
+
+| Build strategy | Component source | Effective mode |
+| --- | --- | --- |
+| `Shadow` (default) | Unwrapped component content | Compiler-generated open Shadow root |
+| `Shadow` (default) | Sole bare `<template>` wrapper | Explicit authored/global Light DOM |
+| `Shadow` (default) | Sole authored `<template shadowrootmode="open">` | Authored Shadow root |
+| `Light` | Unwrapped component content | Authored/global Light DOM |
+| `Light` | Sole bare `<template>` wrapper | Explicit authored/global Light DOM |
+| `Light` | Sole authored `<template shadowrootmode="open">` | Authored Shadow root |
+
+`DomStrategy` applies only when a component has no explicit root mode. A sole
+top-level bare `<template>` with no attributes is an explicit Light wrapper;
+the wrapper is removed and its contents render directly into the host. A
+`<template>` carrying compiler policy attributes such as `w-render` or
+`w-hydrate` is a policy wrapper, not a mode selector, and still follows the
+build fallback. Attributed ordinary templates and nested templates remain
+ordinary inert template content.
+
+An authored Shadow wrapper must contain the complete component and be the only
+top-level content other than whitespace and comments. A dynamic value, `closed`,
+any value other than `open`, more than one `shadowrootmode`, placement on a
+non-template element, or additional top-level content fails with
+`invalid-shadow-root-mode`.
+
+Native `<slot>` is valid whenever the effective component mode is Shadow. A
+`<slot>` in an effective Light component fails the build with `light-dom-slot`
+and help to author a sole top-level `<template shadowrootmode="open">`.
+
+`ComponentData.uses_shadow_dom` stores this effective parser-derived boolean once per
+component. It controls HTML structure, style-tree boundaries, CSS ownership, and
+client-created DOM without runtime template scans. The root
+protocol has no DOM mode; the build fallback is never needed at runtime.
+
 #### CSS Strategy
 ```rust
 /// Strategy for how component CSS is delivered in rendered output.
@@ -1455,18 +1534,159 @@ pub enum CssStrategy {
     /// Emit `<link rel="stylesheet" href="./component.css">` tags for
     /// components that actually have discovered CSS (default).
     Link,
-    /// Embed CSS content inline in `<style>` tags within the shadow DOM template.
+    /// Embed CSS content inline in a component-local `<style>` tag.
     Style,
-    /// Register each component's CSS module via a `<script type="importmap">`
-    /// data-URI definition (one per component, deduped) and reference it via
-    /// `shadowrootadoptedstylesheets` on each shadow root `<template>`.
+    /// Deliver an SSR style fallback and a CSS module specifier for browser
+    /// adoption.
     Module,
 }
 ```
 
-- **Link** (default): Emits `<link>` tags referencing external `.css` files only for components whose discovery/registration data included CSS. Used by the CLI for production builds where CSS files are served separately. Output filenames are configurable with a naming template (`[name]`, `[hash]`, `[ext]`), defaulting to `[name].[ext]`. `[hash]` is SHA-256 truncated to 8 hex chars. An optional public base prefix can be applied so protocol `css_href` values point to CDN URLs. The resolved href is used consistently for handler-emitted head links and parser/plugin-generated component template stylesheet links. Handler-emitted `<head>` links are ordered by **document/traversal order** (the order components are first discovered while walking the fragment graph), not alphabetically by tag name. This keeps the Light-DOM cascade aligned with source order (stable across component renames) and prioritizes Shadow-DOM `<link rel="preload">` hints by appearance. The order is deterministic because the graph walk is deterministic. For a client-created Shadow DOM component, the framework starts a bounded per-metadata `<link rel="preload" as="style">` with matching CORS, integrity, and referrer-policy attributes. This uses the same style request destination as the native link, so a cold mount does not make a second download. Static component asset builds also store final Link hrefs in compiler-owned metadata. Shadow builds publish the metadata for `assets.preload(tag)`, which starts those styles beside the lazy root module and lets registration adopt the resolved-href preload. Light builds emit the deduplicated asset hrefs as document stylesheets with the entry because their CSS is globally scoped. Preload bytes are never applied directly, and preload does not inspect response MIME type. The first client instance keeps its original links behind a visibility guard until every applicable link fires `load`, preserving native CSP, MIME, integrity, CORS, redirect, and service-worker enforcement. The framework releases that guard as soon as the native styles are active, then serializes only browser-authorized native CSSOM rules into shared constructable sheets. The complete set is inserted before existing adopted sheets with one assignment, preserving the cascade. Promoted links remain as disabled structural placeholders so reconnect hydration retains compiler element indexes. Later instances without an authored hydration lifecycle can reuse the authorized set synchronously.
-- **Style**: Embeds the full CSS content in `<style>` tags inside the shadow DOM template. Used when all files are needed in-memory.
-- **Module**: Registers each component's CSS as a CSS Module via an [Import Map](https://html.spec.whatwg.org/multipage/webappapis.html#import-maps) entry whose value is a `data:text/css,...` URI. During SSR, the handler emits a `<script type="importmap">{"imports":{"component-name":"data:text/css,..."}}</script>` in each component's light DOM on first render (e.g., `<my-comp><script type="importmap">...</script><template ...>`) and adds `shadowrootadoptedstylesheets="component-name"` to each shadow root `<template>`. When the developer supplies their own `<template>` wrapper (e.g., to attach `@event` handlers), the parser preserves the wrapper attributes and appends `shadowrootadoptedstylesheets="component-name"` when it is missing. Multi-specifier values already authored by the developer (`shadowrootadoptedstylesheets="component-name other-sheet"`) are honored verbatim. Components inside false `<if>` blocks or empty `<for>` loops that were not rendered during SSR get their importmap definitions emitted at `body_end`, so client-side activation can adopt them. CSS bytes are percent-encoded as needed to survive the `data:` URI parser (`%`, `#`, `"`, whitespace, and non-ASCII / control bytes); the importmap JSON object is built via `serde_json` so the specifier and URI value are correctly JSON-escaped. **Requires browser support for [Multiple Import Maps](https://github.com/WICG/import-maps/blob/main/proposals/multiple-import-maps.md) (Chrome 133+)** so each component's importmap can be emitted independently and merged into the document-level resolution table by the browser. When a CSP nonce is configured (via `RenderOptions::with_nonce` / `webui_handler_set_nonce`), the SSR-emitted `<script type="importmap">` tags include `nonce="VALUE"` (in `type`, `nonce` order) so strict `script-src 'nonce-...'` policies allow them, matching the existing nonce treatment of inline `<script>` tags. The browser registers the CSS module globally and shares a single `CSSStyleSheet` across all shadow roots that adopt it. No external CSS files are produced. During SPA partial navigation, definitions for newly needed components are sent in the `templateStyles` array as `<script type="importmap">{"imports":{...}}</script>` strings (without a `nonce` attribute - the router materializes each tag client-side and applies the per-request nonce when appending to `<head>` before installing component template closure arrays). WebUI Framework compiled metadata carries the adopted stylesheet specifier (`sa`) so client-created components can adopt the registered stylesheet on their shadow root.
+- **Link** (default): Stores an external `.css` href for each component with CSS.
+  Output filenames use `[name]`, `[hash]`, and `[ext]`, default to
+  `[name].[ext]`, and may use a public base URL.
+  Static component-asset roots retain their final Link hrefs in
+  `component_asset_style_preloads`. Shadow builds publish this finite metadata
+  so `assets.preload(tag)` can begin stylesheet requests beside the lazy root
+  module; Light builds emit the same hrefs as deduplicated document stylesheets
+  because their CSS is global. Client-created Shadow components use bounded
+  `<link rel="preload" as="style">` requests with matching link attributes, and
+  the first native stylesheet link remains authoritative for CSP, MIME,
+  integrity, CORS, redirects, and service workers.
+- **Style**: Stores compiled CSS bytes for delivery in `<style>` elements. No
+  separate CSS files are written.
+- **Module**: Stores the same compiled bytes and a component specifier. SSR
+  provides an immediately usable style fallback, while the browser can import
+  one shared CSS module and adopt its `CSSStyleSheet` into each target CSS tree.
+  No separate CSS files are written. Module loading requires CSS Module Scripts
+  support. Partial navigation carries newly needed module import-map entries
+  with the template payload; the router applies the request nonce before
+  appending them to `<head>`.
+
+All three strategies use the ordered component style closures below. CSS
+strategy changes delivery, not component discovery, Shadow ownership, authored
+CSS semantics, or cascade order.
+
+#### Component CSS Ownership
+
+Developers author paired component stylesheets or component-local `<style>`
+blocks. After legal-comment processing, Shadow components retain those CSS
+bytes unchanged. Effective Light components also retain authored CSS bytes:
+their styles are ordinary global CSS in the owning `Document` or `ShadowRoot`
+CSS tree.
+
+The compiler does not stamp HTML, qualify selectors, generate `@scope`,
+namespace keyframes, or namespace cascade layers for Light components. This is
+intentional composition rather than an isolation boundary. A Light component's
+`.card` selector can match any `.card` in the same CSS tree, and parent CSS can
+reach Light descendants. Authors should use deliberate names, `@layer`, and
+custom properties when they need predictable global composition. Native Shadow
+DOM remains the isolation escape hatch.
+
+Shadow-only selectors are not silently rewritten. `:host`, `:host(...)`,
+`:host-context(...)`, and `::slotted(...)` in effective Light CSS fail with
+`unsupported-light-css`, with help to use an ordinary selector such as the
+component tag or author an open declarative Shadow root. The check covers both
+external component CSS and inline `<style>` blocks. Shadow CSS keeps the native
+meaning of those selectors.
+
+Ordinary CSS comment/legal-comment processing and token analysis still run for
+Light CSS. Raw bindings, nested selectors, relational selectors, keyframes,
+layers, and other authored at-rules are not rewritten by the Light path; the
+browser receives the authored global CSS semantics.
+
+#### Component Style Closures
+
+A CSS tree is one `Document` or one `ShadowRoot` instance. The compiler stores a
+`ComponentStyleClosure` for every root entry fragment and compiled component root
+in `WebUIProtocol.style_closures` (protobuf field 9). Each closure is a repeated
+component-tag list in cascade-sensitive first-discovery order; it is never sorted
+or derived from the component-asset set traversal. Link builds consider a tag a
+style resource only when `css_href` is nonempty. Style and Module builds use
+nonempty retained authored `ComponentData.css`.
+
+For a component-root closure, that component's paired CSS is first when present.
+The iterative graph walk then follows fragment source order. Light children
+contribute their CSS once and their fragment graph is traversed in the same CSS
+tree. Shadow children are cut points: neither their CSS nor
+their descendants enter the caller's closure, but scanning resumes after the
+host and the child's own closure describes its `ShadowRoot`. `if`, `for`,
+and attribute-template dependencies are followed conservatively. Routes are
+activation edges, not static closure edges: route bodies, pending/error
+components, and outlet children do not enter the declaring fragment's closure.
+Each matched Light route root whose inherited CSS tree is the Document has its
+stored closure hoisted with the entry closure before `</head>`. The later route
+host observes those resources as already delivered and emits no duplicates. A
+matched Light route inside an inherited ShadowRoot installs its closure as
+compiler-owned children of the active `<webui-route>`, immediately before the
+generated host. A matched Shadow route root installs its closure at the compiler
+hook inside its declarative root.
+Visited-fragment and first-style sets make malformed or cyclic protocols finite
+without changing first-discovery order.
+
+Light hosts and their template elements receive no compiler-owned CSS markers.
+Servers and clients consume stored closures directly and must not expand the
+fragment graph per request. A styled protocol without required closure metadata
+is invalid.
+
+The handler keeps Document delivered-resource state directly and uses a lazily
+allocated stack of component indexes only while rendering Shadow
+roots. Each closure is installed in stored order and each resource is emitted at
+most once in that tree for the lifetime of the render. Full-document SSR installs
+the entry closure plus every active route closure targeting the Document before
+`</head>`. This makes Link resources render-blocking and makes Style/Module
+fallbacks available before route content can paint. When the document omits an
+explicit head, those closures precede document content while remaining immediately
+after any leading doctype. The browser therefore places resources in the document
+head and the doctype remains the first token.
+Document fragment renders install their closure before fragment content. A
+matched route installs only its active closure; inactive route closures are not
+emitted or installed during hydration. Link builds emit ordered preload hints
+for request-reachable static Shadow roots and matched route closures targeting a
+ShadowRoot, before module preloads, so
+those tree-local styles begin fetching without waiting for body discovery. A
+resource already applied to the Document or preloaded by an active route is
+deduplicated; the actual stylesheet still installs only in its owning
+ShadowRoot. Before any
+component closure installs, the framework scans that complete
+Document or ShadowRoot for compiler-owned resource markers and claims them in
+place.
+It rescans an activating route's direct children for later streaming markers.
+Loaded Link elements are never reparented, avoiding a second request for
+non-cacheable CSS; the router preserves those route-owned markers across
+component remounts. Every retained or dynamically installed Link/Style element
+carries both `data-webui-resource` and `data-webui-strategy`, so hydration can
+distinguish it from authored data attributes. A structural Shadow reconnect
+preserves those direct marker elements while replacing component DOM; completed
+closure bookkeeping therefore remains valid and styles do not disappear.
+Module fallbacks are adopted in marker order and removed after adoption. A
+Shadow component used directly as the entry or as a matched
+route installs its component closure at the compiler hook inside the declarative
+root. The same Document state is retained across progressive streaming
+checkpoints. Partial navigation sends a versioned `componentStyles` catalog
+containing the newly needed resources and closures; the browser registers it per
+Document and installs each resource at most once per Document or ShadowRoot.
+Bundled resources carry their ordered component `members`. Installing or
+claiming a chunk marks both its own ID and every member ID as present in that CSS
+tree, so descendant Light hosts do not reinstall their per-component fallbacks.
+When one requested tree closure already covers a component closure completely,
+the handler omits that redundant closure and its duplicate CSS definitions.
+Version-3 component assets carry the same catalog, so SSR, navigation,
+streaming, and deferred assets share the ordering and deduplication contract.
+Module sheets reserve their adoption slot when their closure requests them, so
+a descendant closure whose load resolves first never adopts ahead of its
+caller, and an adopted SSR fallback element is dropped from marker state with
+the node.
+
+Shadow roots are closure cut points. A caller's closure stops at an effective
+Shadow host, and the child's closure begins inside that root. Light descendants
+remain in the caller's closure. Link and Style resources install as elements.
+Module resources carry `{ kind: "module", specifier, css }`. Catalog
+registration creates each nonce-bearing import-map definition once per
+Document before publishing templates. SSR resource markers seed that
+definition set. The SSR style fallback remains until module adoption succeeds;
+failed asynchronous module installs remain retryable.
+
 
 Constructable Link promotion is a progressive enhancement. Unsupported
 browsers, inaccessible native CSSOM, ambiguous, redirected, or
@@ -1506,6 +1726,76 @@ client-mount gate.
 Set at construction time with
 `HtmlParser::with_options(ParserOptions::try_new(css, dom, css_file_name_template, css_public_base, legal_comments))`.
 
+#### Bundled Style Chunks
+
+`--css-bundle` (`BuildOptions::css_bundle`) merges component stylesheets into
+shared chunks. It composes with `--css` rather than replacing it: bundling
+decides how stylesheets are *grouped*, the strategy decides how they *reach the
+page*. Link and Style builds therefore each have a bundled and an unbundled form.
+Module builds reject `--css-bundle`: they already inline every stylesheet as a
+data URI, so there is no request to merge, and their import-map specifiers are
+resolved per component during parsing, before chunks exist.
+
+Chunks are planned only for the closures a runtime installs *as a unit* into one
+CSS tree: the entry document, every authored-Shadow component, and every route
+root, including its `pending_component`, `error_component`, and nested
+`children`. A plain Light component also keeps a stored closure for independent
+loading, but it does not own a CSS tree: its normal ancestor tree installs the
+covering chunk before the host connects. Treating those fallbacks as roots would
+make every component its own consumer and prevent all merging. The asymmetry is
+deliberate: tree closures drive chunk planning, while retained per-component
+resources preserve independent-loading and older-handler compatibility.
+
+Merging stylesheets reorders rules, which can silently change computed styles.
+Two rules make that impossible, and the second is verified rather than assumed:
+
+1. **Equal consumer sets.** Only components reached by an identical set of CSS
+   trees may share a chunk. Every tree that needs one member needs all of them,
+   so a chunk is never over-delivered and no tree receives a rule it would not
+   otherwise have.
+2. **Contiguity and relative order in every consumer.** A chunk's members must be
+   adjacent and appear in the same order in every closure that contains them.
+   Emitting each chunk at its first member then reproduces the unbundled rule
+   sequence exactly.
+
+The planner verifies both uninterrupted membership and each member's canonical
+position while walking every closure. Any interleaved or differently ordered
+chunk is split into single-component chunks, and one pass suffices. Correctness
+therefore never depends on the grouping heuristic being clever. The entry root
+forms chunks first, then the remaining roots in sorted order, so plans are
+deterministic and reproducible.
+
+Chunk indices are stable `u32` handles into `WebUIProtocol.style_chunks`.
+`ComponentStyleClosure.style_chunks` holds them in the same cascade order as
+`component_tags`, and stays empty for unbundled builds so protocol size and
+existing `data-webui-resource` values are unchanged. Handlers branch once on
+that emptiness; a bundled protocol never mixes the two, so
+`ShadowStyleRoot.routed_resources` holds chunk indices under bundling and
+component indices otherwise. Link preloads and the `componentStyles` navigation
+catalog are emitted per chunk: a chunk shared by several routes is the highest
+value preload target. Progressive streaming deduplicates exact resource IDs in
+a separate style inventory; a component-template inventory never stands in for
+chunk registration.
+
+Multi-member chunks are named `_chunk-<first-member>-<count>`; the leading
+underscore cannot begin a custom-element tag, so the resource ID cannot collide
+with a component. A single-member chunk keeps bare `<tag>`. Link builds emit one
+file per chunk and retain per-component files as independently loaded component
+and older-handler fallbacks. Current handlers link only chunks on the bundled
+path, so fallbacks add no render-blocking requests.
+
+An authored-Shadow component's own stylesheet is never merged. Parsing resolves
+it into artifacts that address it by tag before chunks exist: the `css_href` a
+plugin injects into the shadow template its runtime builds roots from, and the
+module specifier recorded on `shadowrootadoptedstylesheets`. A single-member
+chunk is named after its sole member and carries that member's exact bytes, so
+keeping these unmerged keeps both references valid without a rewrite pass.
+Effective Light components carry no such parse-time identity and merge freely
+when the build opts into `DomStrategy::Light`. This does not promise one
+application-wide file: route-specific closures and distinct ShadowRoot
+consumers can require separate chunks, and each chunk remains in the exact
+authored cascade order for its consumers.
+
 #### Legal Comments
 ```rust
 /// Strategy for preserving legal comments in generated output.
@@ -1538,6 +1828,10 @@ attributes, capture finalized component templates, and emit per-element hydratio
 metadata without requiring the build layer to downcast concrete plugin types.
 
 ```rust
+pub struct ComponentTemplateContext {
+    pub uses_shadow_dom: bool,
+}
+
 pub trait ParserPlugin {
     fn start_fragment(&mut self, fragment_id: &str) {}
     fn register_component_template(
@@ -1545,18 +1839,31 @@ pub trait ParserPlugin {
         tag_name: &str,
         component: &Component,
         processed_template: &str,
+        context: ComponentTemplateContext<'_>,
     ) -> Result<()>;
     fn classify_attribute(&mut self, attr_name: &str) -> AttributeAction;
     fn finish_element(&mut self, binding_attribute_count: u32) -> Option<Vec<u8>>;
     fn into_artifacts(self: Box<Self>) -> Result<ParserPluginArtifacts>;
 }
+
+pub enum ComponentStyleDelivery<'a> {
+    Link { href: &'a str },
+    Inline { css: &'a str },
+    Adopted { specifier: &'a str },
+}
+
+pub struct ComponentTemplateContext<'a> {
+    pub uses_shadow_dom: bool,
+    pub style: Option<ComponentStyleDelivery<'a>>,
+}
 ```
 
 **Hook invocation points:**
 - **Fragment start**: `start_fragment` runs before each `HtmlParser::parse(...)` call so plugins can reset fragment-local counters
 - **Attribute loop**: `classify_attribute` decides whether framework-owned attrs are kept, skipped, or skipped-and-counted as bindings
 - **Element completion**: `finish_element` runs with the final binding count after all attrs are processed; returned bytes are emitted as a `Plugin` fragment
-- **Component registration**: `register_component_template` receives the plugin-facing component template HTML after HTML/CSS comment stripping. Authored root `<template>` attributes are preserved for plugins; the SSR/internal parse view may strip runtime-only attributes so rendered HTML stays clean. The component's client-ownership marker distinguishes authored from scriptless templates; Rust does not inspect JavaScript/TypeScript semantics.
+- **Component registration**: `register_component_template` receives the plugin-facing component template HTML after HTML/CSS comment stripping plus a required `ComponentTemplateContext`. Authored root `<template>` attributes are preserved for plugins; the SSR/internal parse view may strip runtime-only attributes so rendered HTML stays clean. The component's client-ownership marker distinguishes authored from scriptless templates; Rust does not inspect JavaScript/TypeScript semantics.
+- **Style delivery**: `ComponentTemplateContext` carries `uses_shadow_dom` plus the resolved `style` delivery — a neutral statement of fact, never a request. The parser injects nothing into any template. WebUI ignores `style` because the handler installs its precomputed closures; FAST reads it and keeps an inline `<link>`/`<style>` inside the Shadow template its runtime uses to build roots. `style` is reported only for components that effectively use a Shadow root. FAST 2/3 reject effective Light components with `fast-light-dom-unsupported` because their artifact contract defaults client-created elements to Shadow roots; silently accepting the build would make client structure diverge from Light SSR. Light CSS is Document-owned and its host selector cannot match from inside a runtime-created root. SSR output is style-free either way.
 - **Artifact extraction**: `into_artifacts` returns post-parse outputs such as client component templates without `Any` downcasts. It is **fallible**: template-authoring mistakes found while compiling component templates (an invalid `@event` handler or a non-braced `w-ref`) surface as `ParserError::Template` instead of panicking, so every host (CLI, Node, FFI, WASM) can handle them.
 
 **Selecting parser plugins**
@@ -1948,7 +2255,6 @@ update hot paths still call the function directly.
 | `r`   | `[collection, itemVar, blockIndex, slot, keyPath?][]` | Repeat blocks; `keyPath` is relative to the item variable |
 | `eg`  | `[event, [[handler, argSpecs, targetIndex, usesEvent?]]][]` | Body events grouped by event name |
 | `b`   | `TemplateBlockMeta[]`             | Nested compiled block table referenced by `c` / `r` |
-| `sa`  | `string`                          | Optional module-mode adopted stylesheet specifier copied from `shadowrootadoptedstylesheets` |
 | `re`  | `[event, handler, argSpecs][]`    | Root events, attached to the host element; observe host-targeted events plus anything bubbling to the host (`composed` is required only to cross a shadow boundary) |
 | `tr`  | `string[]`                        | Component-level state roots referenced by the template, excluding repeat item variables |
 | `ta`  | `string[]`                        | Observed host attributes index-aligned with `tr` |
@@ -2118,10 +2424,12 @@ whitespace remain inside the implied parent, matching the browser tree used for
 SSR hydration and client locator resolution.
 
 Component policies are visible to the Rust build because they live on the root
-component `<template>`, not on a TypeScript class. Under `DomStrategy::Shadow`
-that authored wrapper becomes the declarative shadow-root template after its
-build-only policy attributes are removed. Under `DomStrategy::Light` the
-wrapper is unwrapped. `w-render="lazy"` requires one non-negative CSS
+component `<template>`, not on a TypeScript class. A component that authors
+`<template shadowrootmode="open">` keeps that wrapper as its declarative
+shadow-root template after its build-only policy attributes are removed. Every
+other component is Light, so the policy wrapper is unwrapped and the policy
+reaches the host through `WebUIProtocol.component_render_css`.
+`w-render="lazy"` requires one non-negative CSS
 length in `w-reserve-block-size`; the parser accepts absolute,
 font-relative, viewport, and container-query length units, and rejects
 percentages, negative values, CSS functions, keywords, duplicates, missing
@@ -2160,12 +2468,10 @@ activity-row:not([w-render="eager"]) {
 The document rule covers document and Light DOM instances. In a component
 stylesheet, the qualified `:host(...)` selector covers a Shadow DOM component
 without matching an unrelated enclosing host. The tag selector also covers a
-Light DOM instance nested in an authored shadow root when that stylesheet is
-delivered into the root, as it is with `CssStrategy::Style`. Link and Module
-stylesheets for a `DomStrategy::Light` build remain document-scoped and do not
-cross an authored shadow boundary; that existing mixed-mode configuration must
-use Style delivery or include the containment rule in the authored shadow-root
-stylesheet. Both generated rules are build-time output, and `w-render="eager"`
+Light DOM instance nested in an authored shadow root: the precomputed style
+closure delivers that stylesheet into the containing root under every CSS
+strategy, so the containment rule follows the component across the boundary.
+Both generated rules are build-time output, and `w-render="eager"`
 disables both.
 
 Repeat identity is positional by default. At runtime, the existing block at
@@ -2305,6 +2611,248 @@ regions while the document is still loading.
     partial navigation, and component-template operations do not emit streaming
     markers or browser records.
 
+### Stream contract (version 2, normative)
+
+Version 2 makes `componentStyles` mandatory on every checkpoint. Version 1
+peers are rejected at the envelope gate rather than failing later with an
+apparently valid record whose required style-closure catalog is absent.
+
+These invariants are binding. Every one is enforced somewhere — by the
+compiler, by the coordinator, or by a test — and none may be relaxed without a
+corresponding change here. Any additional transport must satisfy this same
+contract rather than introduce a parallel one.
+
+**Record format**
+
+1. **Gapless monotonic record order.** Every checkpoint, state update, and
+   terminal record carries one response-local record sequence starting at `0`
+   and increasing by exactly one. Any other value is rejected and halts the
+   stream. There is no reordering buffer and no out-of-order tolerance.
+2. **Typed records and exactly one empty terminal.** The five-element envelope
+   is `[version, record_sequence, kind, target, payload]`. `kind` is `0` for a
+   final boundary checkpoint, `1` for an updatable boundary checkpoint, `2`
+   for a state update, and `4` for the terminal. Every response ends with
+   exactly one markerless `[2, sequence, 4, 0, {}]` after all scriptless tail
+   bytes. A record arriving after it is corruption: it is rejected, its
+   scaffolding released, and the stream is halted without disturbing the
+   successful completion the terminal record already drove. The empty terminal
+   payload binds the *emitter*; a reader ignores unrecognized terminal payload
+   fields rather than halting a page that has already fully rendered (rule 21).
+3. **Self-sufficient records.** Given all prior records, a record carries
+   everything needed to commit itself: its own template delta, component-style
+   closure delta, inventory delta, and projected state. A record never
+   forward-references a later one, so a truncated response is always a prefix of
+   a valid one.
+4. **Additive global merge; ordered island state.** Global handoff merges
+   accumulate only:
+   inventory bits are OR-ed, CSS/style lists are appended with deduplication,
+   component-style resources and closures are registered once, and templates
+   are registered additively. No record may overwrite or invalidate an earlier
+   record's contribution. Boundary state is ephemeral and never published to
+   `window.__webui.state`. A state-update record is a shallow patch applied in
+   record order to one already-committed updatable boundary; repeated writes to
+   the same key are last-writer-wins.
+5. **Identity is not placement.** A record never contains a selector, node
+   path, or DOM position. Checkpoints carry the compiler-assigned integer
+   boundary ID in `target`; state updates carry the same ID. The integer
+   resolves through coordinator-owned references captured during the original
+   range walk and never requires a document scan. Placement remains expressed
+   only through the marker pair the browser's HTML parser materializes.
+6. **Boundary-local payload.** A record carries only the templates and state
+   reachable from its own roots. Boundary 0 must not contain template metadata
+   or state reachable only from a later boundary. Component-style closures
+   remain CSS-tree metadata: the first entry closure can include static
+   transitive resources used by later boundaries, but never resources reachable
+   only through an inactive route. Each resource definition and closure is
+   serialized at most once per response. State locality requires a
+   state-projection manifest; without one the build falls back to full state and
+   every checkpoint costs `O(boundaries × full state)`, which the compiler reports as
+   a `streaming-without-projection` warning.
+
+**Coordinator**
+
+7. **One queue, one record in flight.** Sentinels enqueue onto a single shared
+   task pump; exactly one checkpoint or update commits at a time, and neither
+   hydration nor a state write runs inside the parser's sentinel-upgrade
+   callback. No per-record timer, observer, or root listener is created.
+8. **Range resolution is the only placement-aware step.**
+   `resolveBoundaryRange()` is the sole function that inspects DOM adjacency.
+   Template registration, state seeding, activation, scaffolding removal, and
+   lifecycle accounting all consume an abstract `HydrationRange`. State updates
+   bypass range resolution and use only the roots retained by their original
+   updatable checkpoint.
+9. **`data-ws` is per-element deferral state, not a boundary marker.** It is
+   compiler-owned, identifies exactly the SSR roots the server deferred, and is
+   removed on activation, rejection, or abandonment. An element without it
+   mounts normally even while a streaming response is still open.
+10. **Definitions and waiters are metadata-gated by tag name.** The browser
+    snapshots `observedAttributes` during `customElements.define()`, so a
+    streaming `.define(tag)` request waits until that tag's template metadata is
+    registered. Undefined custom elements then share one
+    `customElements.whenDefined` reaction per tag with a bounded root set,
+    never one promise closure per root instance.
+11. **Undefined parents are activation barriers.** If an outer streamed root is
+    undefined, the range walk counts but does not activate its descendants or
+    register descendant tag waiters. The retained subtree is revisited only
+    after the outer definition arrives and activates, preserving parent-first
+    hydration and preventing children from mutating an unhydrated parent tree.
+12. **Retention is opt-in and response-bounded.** A final checkpoint releases
+    its payload script, sentinel, marker pair, parsed envelope, projected state,
+    and root references immediately. An updatable checkpoint retains only its
+    bounded root array until the terminal record or fatal cleanup, when all
+    update targets and queued state are released together. Final boundaries pay
+    no target-map or root-retention cost. That array holds **live roots only**:
+    a root joins when it activates successfully, so one that was ignored,
+    failed, or was abandoned is never an update target and its element is not
+    kept alive by the boundary. Liveness is never inferred from `data-ws`,
+    which rule 9 strips on rejection and abandonment as well as on activation,
+    and which would therefore mark an inert root as ready to receive. The
+    retention budget is charged separately, at scan time, against every marked
+    root the checkpoint saw, so activating a root after its boundary was
+    retained can never grow that boundary past its bound. Delivering an update
+    to a live root is consequently an array walk with no DOM access. Because
+    `setState()` is defined on `TemplateElement` itself, a live root missing it
+    is a framework invariant violation and halts the stream rather than
+    reporting the same failure on every later update.
+13. **Bounded terminal failure.** On malformed, truncated, or overflow input
+    the coordinator releases every discoverable scaffold and pending reference
+    within its configured bounds, balances the pending-boundary count, and
+    suppresses `webui:hydration-complete`. A halt never leaves a root stuck in
+    the deferred state and never wedges completion on a stuck pending count.
+    Valid commits never scan the document; a bounded document sweep is reserved
+    for fatal cleanup when the malformed stream no longer exposes a complete
+    marker range.
+14. **Post-hydration author code runs exactly once.** `hydratedCallback()` runs
+    synchronously with the first successful ordinary hydration, client mount,
+    streamed activation, or dormant static-host wake. A Link-mode client mount
+    whose CSP blocks the prepaint guard remains resource-deferred until its
+    native styles load. Reactive writes made during that interval are reconciled
+    against the staging instance immediately before detached content is
+    appended; the callback runs only after the live container is installed.
+    Its latch is set before author code runs, so reconnects and exceptions never
+    retry it.
+15. **Updates never rehydrate.** A state update calls the existing reactive
+    `setState()` path on each target root. It does not rerun
+    `$activateDeferredSSR()`, template wiring, or `hydratedCallback()`. If the
+    target class is not defined or its boundary is still activating, one
+    bounded shallow patch is queued per target and replayed through that same
+    `setState()` path immediately after the root activates - never merged into
+    the state the root hydrates from. Hydration wires bindings against the
+    server's bytes without evaluating them, so seeding a post-render value
+    first would bind the branch the DOM actually shows while the element
+    believed it held the new one, and the next equal-valued write would skip
+    the patch entirely. A root retained behind an undefined ancestor is
+    patched after its own activation, parent first.
+    A state update may reference only an earlier updatable
+    checkpoint; forward references and updates to final checkpoints are fatal
+    protocol errors. An application component whose `setState()` or change
+    handler throws degrades that root alone: the failure is reported and the
+    walk continues to the remaining targets, including the retained
+    descendants of a throwing root, because one
+    component's bug must never strand later boundaries.
+
+**Compile time**
+
+16. **`<boundary>` is a directive, not an element.** It emits no wrapper
+    node, never nests or overlaps another boundary, and may not cut through a
+    component template or host content, native raw/inert HTML content, `<if>`,
+    `<for>`, route, or hydration-marker scope.
+17. **Boundaries are rejected in HTML foster-parenting contexts.** Inside
+    `table`, `thead`, `tbody`, `tfoot`, `tr`, `colgroup`, `select`, or
+    `optgroup` the browser relocates the unknown `<webui-hydrate>` sentinel out
+    of the table while the payload `<script>` stays inside, permanently
+    breaking their adjacency. This is a build error
+    (`boundary-in-foster-context`), never a runtime failure. `td`, `th`, and
+    `caption` return to "in body" insertion rules and are allowed.
+18. **Boundary names are free-form and resolve once.** Names are author-chosen
+    strings validated at build time for non-emptiness, staticness, and
+    per-entry uniqueness. The protocol stores their declaration order so a
+    response session can resolve `boundary("weather-shell")` once to a
+    `BoundaryId`. Only that integer reaches the HTML response; no generated
+    language symbols or name strings reach the wire.
+
+**Host**
+
+19. **The compiler decides where a flush is legal; the host decides when to
+    write.** A `StreamingResponse` writes the shell, each compile-time boundary,
+    state updates, and the tail only when the host calls it. Each synchronous
+    call borrows its state only for that call, so the host may await backend
+    work between calls without retaining a state borrow. Rendering requires a
+    `FlushWriter` and never silently degrades to buffering. Every shell,
+    checkpoint, update, and terminal write flushes through the same transport,
+    preserving its backpressure and disconnect errors.
+
+**Compatibility**
+
+20. **The reader validates transport and version, not its own serializer.**
+    A record is written by this repository's handler and read back by this
+    repository's coordinator, so the coordinator re-derives nothing the
+    serializer already guaranteed. Exactly three conditions are checked before
+    the tuple is trusted: `JSON.parse` success, which is a *complete*
+    truncation detector because every proper prefix of a JSON array is invalid
+    JSON (rule 3 seen from the transport side); a five-element array, so
+    destructuring is total; and `version`. Everything past those is document
+    state rather than record shape, and is enforced where it is actually
+    known — the coordinator halts the stream on a sequence or target mismatch,
+    and commits inside an error boundary so any payload defect fails closed
+    instead of hydrating partially.
+21. **`version` is the only compatibility mechanism.** Because rule 20 removes
+    per-field checks, a stale cached client reads an unrecognized `kind` as a
+    final checkpoint. Any new record kind, tuple shape, or incompatible payload
+    meaning must therefore bump `version`, which is gated before any element is
+    read. Purely additive payload fields do not bump it and are ignored by
+    older readers, which is what makes tolerating an unexpected terminal
+    payload (rule 2) safe rather than lax.
+
+### Directive spelling and the structural signal namespace
+
+`<boundary>` is one arm of the parser's existing bare-element dispatch
+(`HtmlParser::parse`, `match element.name()`: `"for"`, `"if"`, `"body"`,
+`"head"`, `"route"`, `"outlet"`, then the component-registry fallback). Its
+handler `enter_boundary_directive` follows the shape `enter_body_element`
+established: it pushes compiler-owned structure before children and after them
+via a raw signal fragment, reusing `WebUIFragmentSignal` for
+`boundary_start:<seq>` / `boundary_end:<seq>` rather than adding `oneof`
+variants to `webui.proto`.
+
+All compiler-owned structural signal values use the internal wire namespace
+`}}}webui:<token>` (for example `}}}webui:body_end` and
+`}}}webui:boundary_start:0`). The parser's authored double/triple bindings
+cannot produce a value beginning with `}}}` because those bytes close the
+binding; CSS comment bindings also reject braces in paths. The handler strips
+this prefix only from raw signals before interpreting structure. Unprefixed
+values such as authored `{{{head_start}}}`, `{{{head_end}}}`,
+`{{{body_start}}}`, `{{{body_end}}}`, and `{{{streaming_root}}}` always remain
+ordinary public state keys. Protocols built before this namespace therefore no
+longer receive structural hooks and must be rebuilt. Such a protocol also
+cannot enter streaming mode because it lacks namespaced `head_start`, boundary,
+and streamed-root signals. This namespace is an internal parser/handler
+contract, not author syntax.
+
+Boundary validation — unique static `name`, no nesting, outermost entry
+template only, and "must not cut through a component, native raw/inert content,
+`<if>`, `<for>`, route, or hydration-marker scope" — is parse-time structural
+analysis of the same order as the existing `key`-on-`<for>` validation
+(`invalid-for-key`). Marking a statically-provable, independently-hydratable
+fragment subtree is inherently a parse-time question, so no surface spelling
+avoids that cost. An attribute spelling (`<div boundary="name">`) would carry
+identical validation cost while losing "emits no wrapper element" and a clean
+reserved-tag diagnostic.
+
+The bare, unhyphenated spelling follows the rule the rest of the compiler uses:
+
+| Spelling | Meaning | Examples |
+| --- | --- | --- |
+| Bare tag | Compile-time directive, erased at build, never in the DOM | `<if>`, `<for>`, `<route>`, `<outlet>`, `<boundary>` |
+| `webui-` tag | Real custom element defined at runtime | `<webui-hydrate>` |
+| `data-webui-*` | Runtime marker attribute on emitted output | `data-webui-boundary`, `data-webui-ssr-preload` |
+
+A hyphenated name is the HTML requirement for *custom elements*, so spending it
+on a directive that is deleted before the browser ever sees it would imply a
+runtime element that does not exist. `<boundary>` cannot collide with a
+component either: WebUI components are discovered from hyphenated filenames, so
+no component can ever be named `boundary`.
+
 ### Compilation and author syntax
 
 `<boundary>` is a bare compile-time directive. The parser erases its tags and
@@ -2404,6 +2952,70 @@ produce:
 <webui-hydrate></webui-hydrate>
 ```
 
+- `<!--wb:N-->` / `<!--/wb:N-->` are marker comments, siblings of the
+  existing `<!--wr-->` / `<!--wc-->` family documented under "Plugin data and
+  SSR hydration markers" above — same removal-after-hydration contract.
+- The stream envelope is the script-safe tuple
+  `[version, record_sequence, kind, target, payload]`. A boundary checkpoint
+  uses kind `0` (final) or `1` (updatable), its compiler-assigned boundary ID as
+  `target`, and the existing bootstrap object as `payload`. `bootstrap`
+  reuses the existing object shape (`state`, `templates`, `inventory`, and
+  optional route/CSS/nonce fields), avoiding a second state-selection or
+  serialization implementation. Every checkpoint carries projected state and
+  template/CSS metadata for the transitive component surface reachable from the
+  tags rendered since the previous checkpoint. `Protocol::new` precomputes a
+  compact, integer-indexed entry plan only for entries that declare boundary
+  metadata; ordinary entries allocate no streaming plan. Hand-built protocols
+  without compiler metadata use a request-local fallback plan. Route-free
+  checkpoints expand that
+  graph with one reusable DFS stack; leaf-only checkpoints perform no graph
+  walk. A component surface containing authored routes uses the request-aware
+  traversal so unmatched route branches do not leak into the boundary. This
+  conservative local expansion lets a hydrated condition or repeat create an
+  initially unrendered descendant without a global state block or server
+  round-trip. Inventory remains exact and contains only tags with rendered SSR
+  DOM. Template/CSS metadata is sent once when first reachable; a later rendered
+  instance receives its inventory delta and checkpoint-local state without
+  resending metadata. Per-instance positional state tuples are not part of the
+  wire contract; state is carried as named keys.
+- `data-ws` is a compiler-owned, streaming-only identity inserted into every
+  streamed SSR component opening tag before browser upgrade. It is the sole
+  parser-time deferral signal when the document also has the streaming mode
+  marker. The coordinator removes it after activation or bounded failure
+  cleanup. Ordinary rendering ignores the structural signal, never emits the
+  attribute, and does not reserve an authored `data-ws` attribute.
+- `<webui-hydrate>` is the generated sentinel custom element. Its
+  `connectedCallback` (via `customElements.define`) is the checkpoint signal
+  the coordinator needs when the boundary arrives before its component
+  definitions are loaded (see races below).
+- The handler emits one marker pair, one payload, and one sentinel per boundary,
+  then calls `flush()` (see "Flush contract"). State updates are markerless
+  `[2, record_sequence, 2, boundary_id, projected_state]` records followed by
+  the same sentinel and flush; they resolve only through roots captured by the
+  updatable checkpoint. The coordinator removes every payload and sentinel
+  after processing and removes checkpoint markers after hydration commits.
+- At `body_end`, the handler writes any host-provided body injection and then
+  emits one empty markerless `[2,next_sequence,4,0,{}]` terminal record. The
+  terminal flush also commits preceding native/scriptless tail bytes, but those
+  bytes never manufacture another state or template projection. A static
+  streaming document with no boundaries therefore emits exactly
+  `[2,0,4,0,{}]`. Streaming mode does **not** also emit a page-wide
+  `#webui-data` block. Boundary checkpoints share the existing `WebUiBootstrap`
+  and `write_selected_state` paths, so there is no second state-selection
+  implementation. A request-local key scratch vector is cleared and reused
+  between checkpoints. Any later structural signal, including a boundary
+  start/end, is a malformed protocol error; no record may follow the
+  terminal record.
+- A small `<meta name="webui-streaming" content="1">` mode marker is emitted
+  at the structural `head_start` signal, before authored head children. It is
+  therefore available before an async application entry can define component
+  classes. Route chain, inventory, CSP nonce, CSS bookkeeping, templates, and
+  projected state deltas arrive in the applicable boundary bootstrap.
+- **Streaming does not alter non-streaming output, byte-for-byte.** Streaming
+  is a distinct, explicitly selected render/session mode. Non-streaming
+  rendering ignores namespaced raw structural signals; ordinary element and
+  fragment rendering is identical in both modes. Boundary emission is gated on
+  session mode and reuses the existing per-signal dedup pattern.
 - Every browser record is the five-element tuple
   `[2, sequence, kind, target, payload]`.
 - Kinds are `0` final checkpoint, `1` updatable checkpoint, `2` state update,
@@ -2492,6 +3104,88 @@ For every final or updatable boundary checkpoint the coordinator:
 6. Removes the record script, sentinel, boundary markers, and consumed
    compiler attributes.
 
+Three inputs make this computable, and each is recorded where the build
+already has it in hand:
+
+- **Module sizes.** The bundler adapter reads `metafile.outputs[path].bytes`,
+  which it already iterates for `.inputs`. Ordering is not incidental:
+  `examples/app/streaming` measures a **125 ms swing from ordering alone**,
+  larger than the split itself, because preloads are issued in document order
+  over one shared connection. Only the bundler knows output sizes, so it sorts
+  once at build time and ships the answer.
+- **Island exclusion.** The parser maintains `in_boundary` to reject nested
+  boundaries, and a `<script type="module" src>` seen while it is set is
+  island-owned by definition. Only non-boundary module entries are recorded,
+  so an island loader is excluded without any subtraction pass. This matters:
+  preloading the island is precisely the regression the hint exists to remove.
+  A chunk the island *shares* with the critical entry still gets preloaded,
+  because it is genuinely critical.
+- **The output import graph.** A shared runtime chunk defines no component, so
+  it appears in no component's `outputs` — yet it is exactly the file the hint
+  must cover. In `examples/app/streaming` the critical entry's closure is
+  45,912 B, of which the unmapped shared chunk is 35,827 B (78%); the mapped
+  `index.js` is 9,801 B and the scanner already finds it unaided. The manifest
+  therefore records output-to-output edges in `entryClosures`, filtered to
+  `kind === "import-statement"` so a dynamic `import()` — which is *meant* to
+  cost a round trip — is never hoisted onto the critical path. Every known
+  entry remains a map key even when this filtered closure is empty; the empty
+  ownership record prevents an equal basename from another merged build from
+  being selected.
+
+Two constraints govern the design. The closure is computed at **build time and
+shipped as an ordered list of finished hrefs** in `WebUIProtocol
+.module_preloads`, not shipped as a graph and traversed per request — so
+request-time emission is N writes against a precomputed slice, with no
+traversal, sorting, or scratch collections. And the hint set lives on the
+entry rather than on `ComponentData`, because a critical closure is a
+per-entry property.
+
+Resolution joins the authored `src` URL to build-root-relative manifest keys.
+It fails safe throughout: an entry whose basename matches more than one
+manifest key emits nothing and warns, because a wrong preload costs a 404 and
+a wasted connection while a missing one costs only speed; an unrecognized
+`src` is skipped silently, since a third-party script is not a build mistake;
+cross-origin, protocol-relative, and query-bearing authored URLs are skipped
+because they do not describe a path the manifest covers; the list is capped so
+a runaway closure cannot starve the entry itself; and an href that cannot be
+written verbatim into an attribute is rejected at build time rather than
+escaped per request. Compiler-generated query-bearing URLs are accepted only
+through an exact physical-output-to-served-URL map. A non-empty esbuild
+`publicPath` also suppresses closure members unless the host supplies that
+explicit map: the metafile exposes local output paths while emitted imports use
+the configured served URL, so synthesizing same-origin hrefs would be unsafe.
+
+CSS delivery strategy is selected once per build and is not boundary-local.
+
+**Commit.** For one boundary, the coordinator:
+
+1. Validates sequence, size, marker closure, template indexes, state arity,
+   and response identity.
+2. Registers new templates/functions and compiler-owned hosts immediately;
+   streamed registrations do not wait for `DOMContentLoaded`.
+3. Resolves the boundary's `HydrationRange` (`resolveBoundaryRange()` — the
+   only placement-aware step), then walks that range once in boundary order,
+   including open declarative shadow roots, without a root list or per-element
+   document-position comparisons.
+4. Passes the checkpoint-local projected state directly into component
+   activation. It does not merge ephemeral state into `window.__webui.state`.
+   Inventory deltas are ORed into the cumulative global bitmask; CSS/style
+   bookkeeping deltas are appended with deduplication; component-style
+   resources and closures are registered only on first delivery.
+5. Hydrates outer roots before descendants. After each successful first
+   hydration or mount, `hydratedCallback()` runs synchronously with completion
+   exactly once; a CSP-deferred Link mount completes only after its native styles
+   load and detached content is appended. Reconnects and callback exceptions do
+   not retry it.
+6. Removes the payload, sentinel, markers, and `data-ws` identities and releases
+   parsed arrays before dispatching diagnostics or completion.
+
+Hydration runs through one shared task pump so it never executes inside the
+parser's sentinel-upgrade callback. No per-boundary timer, observer, or root
+listener is created. `webui:hydration-complete` fires only after the
+terminal record and zero pending boundaries. Truncated or malformed streams
+abort that completion gate and release discoverable generated scaffolding within
+the configured bounds.
 Hydration runs through one document-scoped FIFO pump, never directly from the
 sentinel upgrade callback. `webui:hydration-complete` fires only after the
 terminal record, all queued records, definition waiters, ancestor barriers, and
@@ -4146,7 +4840,9 @@ WebUI Framework hydration assumes the SSR DOM, hydration markers, and compiled m
   explicitly supplied; an explicit empty collection removes repeat items.
   Client-created instances mount immediately from the cached template.
   `WebUIElement` remains the authored layer for events, `w-ref`, lifecycle code,
-  decorators, and `$emit`.
+  decorators, and `$emit`. `$emit()` always dispatches a bubbling, cancelable,
+  composed `CustomEvent`, so a Light component nested in an authored Shadow
+  tree can communicate with a root event binding on the Shadow host.
 - Developer-authored `WebUIElement` classes also treat compiled template roots
   as navigation state. `setState()` stores undecorated template-bound roots in
   hidden framework state, so `@observable` is only required when TypeScript
diff --git a/crates/webui-cli/src/commands/build.rs b/crates/webui-cli/src/commands/build.rs
index 95e5e777c..993e48a7e 100644
--- a/crates/webui-cli/src/commands/build.rs
+++ b/crates/webui-cli/src/commands/build.rs
@@ -150,6 +150,7 @@ fn run(args: &BuildArgs) -> Result<()> {
     output::field("Entry", &args.app_args.entry);
     output::field("Output", &protocol_path.display());
     output::field("CSS", &args.app_args.css);
+    output::field("DOM", &args.app_args.dom);
     if let Some(ref plugin_name) = args.app_args.plugin {
         output::field("Plugin", plugin_name);
     }
@@ -275,6 +276,7 @@ pub fn build(app: &std::path::Path, out: &std::path::Path, entry: &str) -> Resul
             entry: entry.to_string(),
             css: CssStrategy::Link,
             dom: DomStrategy::Shadow,
+            css_bundle: false,
             plugin: None,
             components: Vec::new(),
             projection_manifests: Vec::new(),
@@ -356,7 +358,7 @@ mod tests {
     fn test_build_with_component_css() {
         let app_dir = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            ("my-card.html", "<div>content</div>"),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let out_dir = TempDir::new().unwrap();
@@ -374,7 +376,10 @@ mod tests {
     fn test_build_with_inline_css_skips_css_files() {
         let app_dir = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let out_dir = TempDir::new().unwrap();
@@ -385,6 +390,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Style,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -425,6 +431,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::WebUI),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -455,7 +462,8 @@ mod tests {
 
         let asset = fs::read_to_string(asset_path).unwrap();
         assert!(asset.contains(r#""type":"webui-component-asset""#));
-        assert!(asset.contains(r#""version":2"#));
+        assert!(asset.contains(r#""version":3"#));
+        assert!(asset.contains(r#""componentStyles":{"version":1"#));
         assert!(asset.contains(r#""kind":"root""#));
         assert!(!asset.contains(r#""plugin""#));
         assert!(!asset.contains(r#""inventory""#));
@@ -486,6 +494,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::WebUI),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -519,6 +528,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::WebUI),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -559,6 +569,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::WebUI),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -599,6 +610,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::WebUI),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -638,6 +650,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::WebUI),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -675,6 +688,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::WebUI),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -703,6 +717,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -737,6 +752,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::FastV3),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -755,7 +771,8 @@ mod tests {
         assert!(asset_path.exists());
         let asset = fs::read_to_string(asset_path).unwrap();
         assert!(asset.contains(r#""type":"webui-component-asset""#));
-        assert!(asset.contains(r#""version":2"#));
+        assert!(asset.contains(r#""version":3"#));
+        assert!(asset.contains(r#""componentStyles":{"version":1"#));
         assert!(asset.contains(r#""kind":"root""#));
         assert!(!asset.contains(r#""plugin""#));
         assert!(!asset.contains(r#""templateFunctionModule""#));
@@ -779,6 +796,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::WebUI),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -899,7 +917,7 @@ mod tests {
         let ext_dir = TempDir::new().unwrap();
         fs::write(
             ext_dir.path().join("ext-card.html"),
-            "<div class=\"card\"><slot></slot></div>",
+            r#"<template shadowrootmode="open"><div class="card"><slot></slot></div></template>"#,
         )
         .unwrap();
         fs::write(
@@ -917,6 +935,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: vec![ext_path],
                 projection_manifests: Vec::new(),
@@ -951,7 +970,7 @@ mod tests {
         // Create the npm package files
         fs::write(
             pkg_dir.join("template-webui.html"),
-            "<button><slot></slot></button>",
+            r#"<template shadowrootmode="open"><button><slot></slot></button></template>"#,
         )
         .unwrap();
         fs::write(pkg_dir.join("styles.css"), ".btn { padding: 4px; }").unwrap();
@@ -1004,6 +1023,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: vec!["test-widget".to_string()],
                 projection_manifests: Vec::new(),
@@ -1035,8 +1055,16 @@ mod tests {
 
         // Create two sub-packages under the scope
         for (sub, tag, html) in &[
-            ("btn", "myui-btn", "<button><slot></slot></button>"),
-            ("txt", "myui-txt", "<span><slot></slot></span>"),
+            (
+                "btn",
+                "myui-btn",
+                r#"<template shadowrootmode="open"><button><slot></slot></button></template>"#,
+            ),
+            (
+                "txt",
+                "myui-txt",
+                r#"<template shadowrootmode="open"><span><slot></slot></span></template>"#,
+            ),
         ] {
             let pkg_dir = scope_dir.join(sub);
             fs::create_dir_all(&pkg_dir).unwrap();
@@ -1088,6 +1116,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: vec!["@myui".to_string()],
                 projection_manifests: Vec::new(),
@@ -1109,7 +1138,7 @@ mod tests {
     fn test_build_protocol_includes_tokens_from_components() {
         let app_dir = create_app_dir(&[
             ("index.html", "<my-btn></my-btn>"),
-            ("my-btn.html", "<button><slot></slot></button>"),
+            ("my-btn.html", "<button>Button</button>"),
             (
                 "my-btn.css",
                 ".btn { color: var(--text-color); padding: var(--spacing-m); }",
@@ -1129,7 +1158,10 @@ mod tests {
     fn test_build_theme_missing_token_fails() {
         let app_dir = create_app_dir(&[
             ("index.html", "<my-btn></my-btn>"),
-            ("my-btn.html", "<button><slot></slot></button>"),
+            (
+                "my-btn.html",
+                r#"<template shadowrootmode="open"><button><slot></slot></button></template>"#,
+            ),
             (
                 "my-btn.css",
                 ":host { --token-a: red; --foo-bar: var(--token-a, var(--token-b, var(--token-c))); }",
@@ -1143,6 +1175,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -1173,7 +1206,10 @@ mod tests {
     fn test_build_custom_protocol_name() {
         let app_dir = create_app_dir(&[
             ("index.html", "<my-card>Hi</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let out_dir = TempDir::new().unwrap();
@@ -1185,6 +1221,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -1224,6 +1261,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -1272,7 +1310,7 @@ mod tests {
         <my-btn></my-btn>"#;
         let app_dir = create_app_dir(&[
             ("index.html", html),
-            ("my-btn.html", "<button><slot></slot></button>"),
+            ("my-btn.html", "<button>Button</button>"),
             (
                 "my-btn.css",
                 ".btn { color: var(--text-color); margin: var(--spacing-m); }",
diff --git a/crates/webui-cli/src/commands/common.rs b/crates/webui-cli/src/commands/common.rs
index 0f6852eed..46da95eb2 100644
--- a/crates/webui-cli/src/commands/common.rs
+++ b/crates/webui-cli/src/commands/common.rs
@@ -25,10 +25,20 @@ pub struct AppArgs {
     #[arg(long, value_enum, default_value_t = CssStrategy::Link)]
     pub css: CssStrategy,
 
-    /// DOM strategy for component rendering (shadow or light)
+    /// Fallback DOM strategy for components without an authored Shadow root
     #[arg(long, value_enum, default_value_t = DomStrategy::Shadow)]
     pub dom: DomStrategy,
 
+    /// Merge component stylesheets into shared bundled chunks
+    ///
+    /// Composes with `--css`: bundling decides how stylesheets are grouped,
+    /// `--css` decides how they reach the page. Stylesheets reached from more
+    /// than one CSS tree are split into their own chunk so they are downloaded
+    /// and cached once. Not supported with `--css module`, which already inlines
+    /// every stylesheet as a data URI.
+    #[arg(long)]
+    pub css_bundle: bool,
+
     /// Framework plugin to load
     #[arg(long, value_enum)]
     pub plugin: Option<Plugin>,
@@ -62,6 +72,7 @@ impl AppArgs {
             entry: self.entry.clone(),
             css: self.css,
             dom: self.dom,
+            css_bundle: self.css_bundle,
             plugin: self.plugin,
             components: self.components.clone(),
             component_asset_roots: Vec::new(),
@@ -91,6 +102,37 @@ pub fn load_theme(theme: &str, search_root: &Path) -> Result<webui::TokenFile> {
 #[cfg(test)]
 mod tests {
     use super::*;
+    use clap::{CommandFactory, Parser};
+
+    #[derive(Parser)]
+    struct TestArgs {
+        #[command(flatten)]
+        app: AppArgs,
+    }
+
+    #[test]
+    fn dom_option_defaults_to_shadow_and_accepts_light() {
+        assert!(TestArgs::try_parse_from(["test"]).is_ok());
+        assert_eq!(
+            TestArgs::try_parse_from(["test"])
+                .expect("default arguments")
+                .app
+                .dom,
+            DomStrategy::Shadow
+        );
+        assert_eq!(
+            TestArgs::try_parse_from(["test", "--dom=light"])
+                .expect("Light DOM arguments")
+                .app
+                .dom,
+            DomStrategy::Light
+        );
+        assert!(TestArgs::try_parse_from(["test", "--dom=invalid"]).is_err());
+        assert!(TestArgs::command()
+            .render_long_help()
+            .to_string()
+            .contains("--dom"));
+    }
 
     #[test]
     fn to_build_options_passes_asset_file_output_settings() {
@@ -99,6 +141,7 @@ mod tests {
             entry: "index.html".to_string(),
             css: CssStrategy::Link,
             dom: DomStrategy::Shadow,
+            css_bundle: false,
             plugin: None,
             components: Vec::new(),
             projection_manifests: vec![
@@ -111,6 +154,7 @@ mod tests {
         };
         let options = args.to_build_options(std::path::Path::new("."));
 
+        assert_eq!(options.dom, DomStrategy::Shadow);
         assert_eq!(options.css_file_name_template, "[name]-[hash].[ext]");
         assert_eq!(
             options.css_public_base.as_deref(),
diff --git a/crates/webui-cli/src/commands/serve.rs b/crates/webui-cli/src/commands/serve.rs
index 3799ae774..a9fa5385a 100644
--- a/crates/webui-cli/src/commands/serve.rs
+++ b/crates/webui-cli/src/commands/serve.rs
@@ -327,6 +327,7 @@ fn run(args: &ServeArgs) -> Result<()> {
     output::field("Entry", &args.app_args.entry);
     output::field("Port", &args.port);
     output::field("CSS", &args.app_args.css);
+    output::field("DOM", &args.app_args.dom);
     if !args.emit_component_assets.is_empty() {
         output::field("Component assets", &args.emit_component_assets.join(", "));
     }
@@ -1268,7 +1269,7 @@ async fn handle_json_partial(
         .unwrap_or_default()
         .to_string();
 
-    // Build the complete partial response (templateStyles, templates, inventory, path, chain)
+    // Build the complete partial response (componentStyles, templates, inventory, path, chain)
     let partial = if let Some(proto) = &protocol {
         let state_json = match serde_json::to_string(&state_data) {
             Ok(value) => value,
@@ -1690,6 +1691,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -1721,6 +1723,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -1758,6 +1761,7 @@ mod tests {
                     entry: "index.html".to_string(),
                     css: CssStrategy::Link,
                     dom: DomStrategy::Shadow,
+                    css_bundle: false,
                     plugin,
                     components: Vec::new(),
                     projection_manifests: Vec::new(),
@@ -1809,6 +1813,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -1850,6 +1855,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -1878,6 +1884,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -1905,6 +1912,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -2363,6 +2371,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -2414,6 +2423,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -2712,6 +2722,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -2781,6 +2792,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -2846,6 +2858,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: None,
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -2893,6 +2906,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::WebUI),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -2934,6 +2948,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::WebUI),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
@@ -2999,6 +3014,7 @@ mod tests {
                 entry: "index.html".to_string(),
                 css: CssStrategy::Link,
                 dom: DomStrategy::Shadow,
+                css_bundle: false,
                 plugin: Some(Plugin::WebUI),
                 components: Vec::new(),
                 projection_manifests: Vec::new(),
diff --git a/crates/webui-cli/src/commands/serve/metafile.rs b/crates/webui-cli/src/commands/serve/metafile.rs
index b25e35aeb..44ddaf8e3 100644
--- a/crates/webui-cli/src/commands/serve/metafile.rs
+++ b/crates/webui-cli/src/commands/serve/metafile.rs
@@ -68,12 +68,11 @@ fn existing_parent(path: &Path) -> PathBuf {
     fs::canonicalize(parent).unwrap_or_else(|_| parent.to_path_buf())
 }
 
-#[cfg(test)]
+#[cfg(all(test, unix))]
 mod tests {
     use super::*;
     use tempfile::TempDir;
 
-    #[cfg(unix)]
     #[test]
     fn watch_ignore_paths_resolve_a_symlinked_metafile_parent() {
         use std::os::unix::fs::symlink;
diff --git a/crates/webui-cli/src/utils/output.rs b/crates/webui-cli/src/utils/output.rs
index 738662b0f..751ff5f3f 100644
--- a/crates/webui-cli/src/utils/output.rs
+++ b/crates/webui-cli/src/utils/output.rs
@@ -271,6 +271,21 @@ pub fn warning_diagnostic(diag: &Diagnostic) {
 #[cfg(test)]
 mod tests {
     use super::*;
+    use std::sync::{Mutex, MutexGuard};
+
+    /// `console` color enablement is process-global, so tests that force it on
+    /// must not run concurrently with each other or they observe each other's
+    /// restore and see uncolored output.
+    static COLOR_LOCK: Mutex<()> = Mutex::new(());
+
+    fn force_colors() -> (MutexGuard<'static, ()>, bool) {
+        let guard = COLOR_LOCK
+            .lock()
+            .unwrap_or_else(|poisoned| poisoned.into_inner());
+        let previous = console::colors_enabled();
+        console::set_colors_enabled(true);
+        (guard, previous)
+    }
 
     fn template_error() -> anyhow::Error {
         let diag = Diagnostic::error("invalid <for> each expression")
@@ -292,8 +307,7 @@ mod tests {
         // `console.error`; ANSI escape codes would render as literal garbage
         // and break the single-line SSE frame. It must stay color-free even
         // when terminal color is forced on.
-        let prev = console::colors_enabled();
-        console::set_colors_enabled(true);
+        let (_guard, prev) = force_colors();
         let (_display, message) = build_error_renderings(&template_error());
         console::set_colors_enabled(prev);
 
@@ -309,8 +323,7 @@ mod tests {
 
     #[test]
     fn build_error_display_is_colorized_for_terminal() {
-        let prev = console::colors_enabled();
-        console::set_colors_enabled(true);
+        let (_guard, prev) = force_colors();
         let (display, _message) = build_error_renderings(&template_error());
         console::set_colors_enabled(prev);
 
diff --git a/crates/webui-handler/README.md b/crates/webui-handler/README.md
index e940c7aa7..ceba7b9d4 100644
--- a/crates/webui-handler/README.md
+++ b/crates/webui-handler/README.md
@@ -20,7 +20,7 @@ let result = protocol.render_component_templates(
     &["settings-dialog", "notification-panel"],
     &inventory_hex,
 );
-// Returns: { templates: [...], templateStyles: [...], inventory: "..." }
+// Returns: { componentStyles: {...}, templates: {...}, inventory: "..." }
 ```
 
 Available via all bindings: Rust (`Protocol::render_component_templates`), Node/WASM/npm (`Protocol.renderComponentTemplates`), and FFI (`webui_protocol_render_component_templates`).
diff --git a/crates/webui-handler/benches/bootstrap_state_bench.rs b/crates/webui-handler/benches/bootstrap_state_bench.rs
index b4c22ab74..bfe66f0c4 100644
--- a/crates/webui-handler/benches/bootstrap_state_bench.rs
+++ b/crates/webui-handler/benches/bootstrap_state_bench.rs
@@ -685,7 +685,12 @@ fn partial_state_serialization_bench(c: &mut Criterion) {
     let response = json!({
         "templates": {},
         "templateFunctions": {},
-        "templateStyles": [],
+        "componentStyles": {
+            "version": 1,
+            "strategy": "link",
+            "resources": {},
+            "closures": {},
+        },
         "cssHrefs": [],
         "inventory": "",
         "path": "/",
diff --git a/crates/webui-handler/src/css_module.rs b/crates/webui-handler/src/css_module.rs
index 67605a79f..a937dc5b2 100644
--- a/crates/webui-handler/src/css_module.rs
+++ b/crates/webui-handler/src/css_module.rs
@@ -16,11 +16,12 @@ use serde_json::Value;
 /// Build a complete `<script type="importmap">` tag string that registers a
 /// single CSS module under `specifier` via a `data:text/css,…` URI.
 ///
-/// If `nonce` is `Some`, a `nonce="…"` attribute is inserted between `type`
-/// and `>` so strict CSP `script-src 'nonce-…'` policies allow the inline
-/// script. CSS bytes are percent-encoded so they survive the `data:` URI
-/// parser; the importmap JSON is produced via `serde_json` so the specifier
-/// and URI value are correctly JSON-escaped.
+/// The tag carries `data-webui-resource` so Light DOM hydration excludes the
+/// compiler-emitted script from template node ordinals. If `nonce` is `Some`,
+/// a `nonce="…"` attribute is inserted so strict CSP `script-src 'nonce-…'`
+/// policies allow the inline script. CSS bytes are percent-encoded so they
+/// survive the `data:` URI parser; the importmap JSON is produced via
+/// `serde_json` so the specifier and URI value are correctly JSON-escaped.
 ///
 /// Requires browser support for Multiple Import Maps (Chrome 133+); the
 /// browser merges each emitted importmap into the document-level resolution
@@ -30,10 +31,11 @@ pub fn build_importmap_tag(specifier: &str, css: &str, nonce: Option<&str>) -> S
     let data_uri = build_data_uri(css);
     let body = build_importmap_json(specifier, data_uri);
 
-    // `<script type="importmap"></script>` is 33 chars; `nonce=""` adds 8 +
-    // the value. A few extra bytes avoid a reallocation when the body is
-    // small.
-    let cap = 40 + body.len() + nonce.map_or(0, |n| n.len() + 9);
+    let escaped_specifier = crate::html_encode::encode_safe(specifier);
+    // `<script type="importmap" data-webui-resource=""></script>` is 56 chars;
+    // `nonce=""` adds 8 + the value. A few extra bytes avoid a reallocation
+    // when the body is small.
+    let cap = 64 + body.len() + escaped_specifier.len() + nonce.map_or(0, |n| n.len() + 9);
     let mut out = String::with_capacity(cap);
     out.push_str("<script type=\"importmap\"");
     if let Some(n) = nonce {
@@ -41,7 +43,9 @@ pub fn build_importmap_tag(specifier: &str, css: &str, nonce: Option<&str>) -> S
         out.push_str(n);
         out.push('"');
     }
-
+    out.push_str(" data-webui-resource=\"");
+    out.push_str(&escaped_specifier);
+    out.push('"');
     out.push('>');
     out.push_str(&body);
     out.push_str("</script>");
@@ -123,7 +127,7 @@ mod tests {
         let tag = build_importmap_tag("my-comp", "span{color:blue;}", None);
         assert_eq!(
             tag,
-            r#"<script type="importmap">{"imports":{"my-comp":"data:text/css,span{color:blue;}"}}</script>"#
+            r#"<script type="importmap" data-webui-resource="my-comp">{"imports":{"my-comp":"data:text/css,span{color:blue;}"}}</script>"#
         );
     }
 
@@ -132,7 +136,7 @@ mod tests {
         let tag = build_importmap_tag("dash-page", "h1{font-size:2rem}", Some("test-nonce-123"));
         assert_eq!(
             tag,
-            r#"<script type="importmap" nonce="test-nonce-123">{"imports":{"dash-page":"data:text/css,h1{font-size:2rem}"}}</script>"#
+            r#"<script type="importmap" nonce="test-nonce-123" data-webui-resource="dash-page">{"imports":{"dash-page":"data:text/css,h1{font-size:2rem}"}}</script>"#
         );
     }
 
diff --git a/crates/webui-handler/src/html_encode.rs b/crates/webui-handler/src/html_encode.rs
index b6844ca25..ba68b2594 100644
--- a/crates/webui-handler/src/html_encode.rs
+++ b/crates/webui-handler/src/html_encode.rs
@@ -8,6 +8,8 @@
 
 use std::borrow::Cow;
 
+use crate::{ResponseWriter, Result};
+
 /// Characters escaped and their replacements:
 ///
 /// * `&` → `&amp;`
@@ -57,10 +59,57 @@ pub fn encode_safe(input: &str) -> Cow<'_, str> {
     Cow::Owned(out)
 }
 
+/// Write CSS into an HTML `<style>` raw-text element without allowing an
+/// authored, case-insensitive `</style` sequence to terminate the element.
+///
+/// Escaping only the slash (`<\/style`) preserves the CSS string value and
+/// keeps the ordinary path allocation-free.
+pub(crate) fn write_style_text(writer: &mut dyn ResponseWriter, css: &str) -> Result<()> {
+    let bytes = css.as_bytes();
+    let mut chunk_start = 0usize;
+    let mut index = 0usize;
+    while index + 7 <= bytes.len() {
+        if bytes[index] == b'<'
+            && bytes[index + 1] == b'/'
+            && bytes[index + 2].eq_ignore_ascii_case(&b's')
+            && bytes[index + 3].eq_ignore_ascii_case(&b't')
+            && bytes[index + 4].eq_ignore_ascii_case(&b'y')
+            && bytes[index + 5].eq_ignore_ascii_case(&b'l')
+            && bytes[index + 6].eq_ignore_ascii_case(&b'e')
+        {
+            writer.write(&css[chunk_start..index + 1])?;
+            writer.write("\\/")?;
+            chunk_start = index + 2;
+            index += 7;
+        } else {
+            index += 1;
+        }
+    }
+    writer.write(&css[chunk_start..])
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
 
+    #[derive(Default)]
+    struct StyleWriter {
+        output: String,
+        writes: usize,
+    }
+
+    impl ResponseWriter for StyleWriter {
+        fn write(&mut self, content: &str) -> Result<()> {
+            self.output.push_str(content);
+            self.writes += 1;
+            Ok(())
+        }
+
+        fn end(&mut self) -> Result<()> {
+            Ok(())
+        }
+    }
+
     #[test]
     fn no_escaping_returns_borrowed() {
         let input = "Hello World 123";
@@ -179,4 +228,26 @@ mod tests {
             assert_eq!(encode_safe(input), expected, "Failed for input: {input:?}");
         }
     }
+
+    #[test]
+    fn style_text_preserves_normal_bytes_in_one_write() {
+        let mut writer = StyleWriter::default();
+        write_style_text(&mut writer, ".card{content:'normal / style'}").unwrap();
+        assert_eq!(writer.output, ".card{content:'normal / style'}");
+        assert_eq!(writer.writes, 1);
+    }
+
+    #[test]
+    fn style_text_escapes_mixed_case_end_tags() {
+        let mut writer = StyleWriter::default();
+        write_style_text(
+            &mut writer,
+            ".a{content:'</style>'}.b{content:'</StYlE attr>'}",
+        )
+        .unwrap();
+        assert_eq!(
+            writer.output,
+            ".a{content:'<\\/style>'}.b{content:'<\\/StYlE attr>'}"
+        );
+    }
 }
diff --git a/crates/webui-handler/src/lib.rs b/crates/webui-handler/src/lib.rs
index 440ba9854..ffbfd208b 100644
--- a/crates/webui-handler/src/lib.rs
+++ b/crates/webui-handler/src/lib.rs
@@ -171,6 +171,22 @@ fn invalid_fragment_range_error(
     ))
 }
 
+#[cold]
+#[inline(never)]
+fn route_style_plan_missing_error() -> HandlerError {
+    HandlerError::Invariant(
+        "matched route style targets were computed without a route chain".to_string(),
+    )
+}
+
+#[cold]
+#[inline(never)]
+fn route_style_plan_length_error(routes: usize, targets: usize) -> HandlerError {
+    HandlerError::Invariant(format!(
+        "matched route style target count {targets} does not match route count {routes}"
+    ))
+}
+
 /// Interface for writing rendered output
 pub trait ResponseWriter {
     /// Write content to the output
@@ -376,6 +392,18 @@ pub struct WebUIHandler {
     plugin_factory: Option<fn() -> Box<dyn HandlerPlugin>>,
 }
 
+#[derive(Clone, Copy, Eq, PartialEq)]
+enum StyleClosureInstall {
+    Static,
+    Routed,
+}
+
+pub(crate) struct ShadowStyleRoot {
+    component_index: u32,
+    static_closure_emitted: bool,
+    routed_resources: Vec<u32>,
+}
+
 /// Context object for processing WebUI fragments
 pub(crate) struct WebUIProcessContext<'protocol, 'state, 'output> {
     pub(crate) protocol: &'protocol WebUIProtocol,
@@ -415,8 +443,18 @@ pub(crate) struct WebUIProcessContext<'protocol, 'state, 'output> {
     /// Component-name → bit-position map built once when the runtime
     /// [`Protocol`] is created and shared by every render.
     pub(crate) component_index: &'protocol HashMap<String, u32>,
+    /// Style-resource ID → request-local dedup bit built with [`Protocol`].
+    pub(crate) style_resource_index: &'protocol HashMap<String, u32>,
+    /// Component tag → covering bundle chunk, built once per render.
+    ///
+    /// Empty (and allocation-free) for unbundled builds. Every style delivery
+    /// path resolves closure members through this so they all agree on what a
+    /// chunk already ships.
+    pub(crate) style_chunk_index: HashMap<&'protocol str, u32>,
+    /// CSS strategy declared by the compiled protocol.
+    pub(crate) css_strategy: webui_protocol::CssStrategy,
     /// HTML emitted at the structural `head_end` boundary (before
-    /// `</head>`), after the built-in nonce/CSS-preload emissions.
+    /// `</head>`), after the built-in nonce/CSS emissions.
     /// Zero-copy borrow of the caller's `RenderOptions<'a>::head_inject`
     /// (no per-render clone — saves an allocation when the host passes
     /// a `&'static str` such as a dev livereload script).
@@ -434,7 +472,7 @@ pub(crate) struct WebUIProcessContext<'protocol, 'state, 'output> {
     /// render. Defends against malformed protocols that emit the
     /// signal more than once (e.g., a template with multiple `<head>`
     /// tags) — without this, host-supplied `head_inject` HTML, CSS
-    /// preload `<link>` tags, and the CSP `<meta>` nonce would be
+    /// resources, and the CSP `<meta>` nonce would be
     /// duplicated, which can be a CSP-bypass / cache-bloat vector.
     pub(crate) head_end_emitted: bool,
     /// Tracks whether the `body_start` hook has already fired in this
@@ -456,6 +494,19 @@ pub(crate) struct WebUIProcessContext<'protocol, 'state, 'output> {
     /// Incremented each time a matched route is rendered, allowing O(1) element
     /// binding on the client side instead of DOM-walking.
     pub(crate) route_chain_index: usize,
+    /// Matched route metadata computed at most once when head styles or body
+    /// bootstrap first need it, then shared by streaming checkpoints.
+    pub(crate) route_chain: Option<Vec<crate::route_handler::RouteChainEntry>>,
+    /// Whether each matched route closure installs into the Document CSS tree.
+    ///
+    /// Kept parallel to `route_chain`; the route graph computes both in one walk.
+    pub(crate) route_document_style_targets: Vec<bool>,
+    /// Request-reachable components in deterministic first-discovery order.
+    ///
+    /// Resolved once at `head_end` for Shadow Link preloads, then consumed at
+    /// `body_end` for hydration metadata so the fragment graph is not walked
+    /// twice per request.
+    pub(crate) reachable_components: Option<Vec<String>>,
     /// Present only for the opt-in progressive streaming render path.
     pub(crate) streaming: Option<&'output mut StreamingRenderState<'protocol>>,
     /// Reusable JSON serialization scratch buffer, owned by the render context.
@@ -471,6 +522,12 @@ pub(crate) struct WebUIProcessContext<'protocol, 'state, 'output> {
     /// bucket capacity rather than reallocating a fresh `HashMap`. Bounded
     /// ([`SCOPE_POOL_CAP`]) and dropped with the context at request end.
     pub(crate) scope_pool: Vec<HashMap<String, Value>>,
+    /// Resources delivered into the Document CSS tree. The empty set does not
+    /// allocate, and streaming retains it across checkpoints.
+    pub(crate) document_style_resources: HashSet<String>,
+    /// Active Shadow roots and their route-activated resource indexes. The
+    /// route vector allocates only when a matched Light route contributes CSS.
+    pub(crate) shadow_style_roots: Vec<ShadowStyleRoot>,
 }
 
 /// Compiler-owned signal namespace. The leading `}}}` cannot be produced by
@@ -486,6 +543,42 @@ pub(crate) fn structural_signal_value(
     signal.value.strip_prefix(STRUCTURAL_SIGNAL_PREFIX)
 }
 
+/// Find the end of a leading doctype without treating quoted `>` bytes in
+/// legacy PUBLIC or SYSTEM identifiers as the declaration close.
+fn doctype_prefix_end(raw: &str) -> Option<usize> {
+    const PREFIX: &[u8] = b"<!doctype";
+
+    let bytes = raw.as_bytes();
+    let mut cursor = usize::from(bytes.starts_with(b"\xEF\xBB\xBF")) * 3;
+    while bytes
+        .get(cursor)
+        .is_some_and(|byte| byte.is_ascii_whitespace())
+    {
+        cursor += 1;
+    }
+
+    let prefix_end = cursor.checked_add(PREFIX.len())?;
+    if !bytes.get(cursor..prefix_end)?.eq_ignore_ascii_case(PREFIX) {
+        return None;
+    }
+    let separator = *bytes.get(prefix_end)?;
+    if separator != b'>' && !separator.is_ascii_whitespace() {
+        return None;
+    }
+
+    let mut quote = None;
+    for (offset, byte) in bytes[prefix_end..].iter().copied().enumerate() {
+        match quote {
+            Some(active) if byte == active => quote = None,
+            Some(_) => {}
+            None if matches!(byte, b'\'' | b'"') => quote = Some(byte),
+            None if byte == b'>' => return Some(prefix_end + offset + 1),
+            None => {}
+        }
+    }
+    None
+}
+
 /// Maximum scope maps retained in the request-local pool. Small: sibling
 /// component roots rarely nest deeply, so the cap keeps retained capacity bounded.
 const SCOPE_POOL_CAP: usize = 8;
@@ -587,6 +680,7 @@ pub(crate) struct WebUiBootstrap<'a> {
     pub(crate) nonce: Option<&'a str>,
     pub(crate) css_hrefs: &'a [&'a str],
     pub(crate) style_specs: &'a [&'a str],
+    pub(crate) component_styles: &'a Value,
     pub(crate) templates: &'a [WebUiTemplatePayload<'a>],
 }
 
@@ -1073,6 +1167,15 @@ pub(crate) fn write_webui_bootstrap(
     if !bootstrap.chain.is_empty() {
         write_json_field(writer, scratch, &mut wrote_field, "chain", bootstrap.chain)?;
     }
+    // Definitions must be visible before template metadata can cause the
+    // runtime to create a component root.
+    write_json_field(
+        writer,
+        scratch,
+        &mut wrote_field,
+        "componentStyles",
+        bootstrap.component_styles,
+    )?;
     if !bootstrap.css_hrefs.is_empty() {
         write_json_field(
             writer,
@@ -1264,6 +1367,15 @@ impl WebUIHandler {
         &self,
         fragments: &'data [WebUIFragment],
         context: &mut WebUIProcessContext<'data, '_, '_>,
+    ) -> Result<()> {
+        self.process_fragment_from(fragments, 0, context)
+    }
+
+    fn process_fragment_from<'data>(
+        &self,
+        fragments: &'data [WebUIFragment],
+        start: usize,
+        context: &mut WebUIProcessContext<'data, '_, '_>,
     ) -> Result<()> {
         // Pre-scan: find the best matching route among sibling routes by specificity.
         // This ensures `/contacts/add` (2 literals) beats `/contacts/:id` (1 literal).
@@ -1274,7 +1386,7 @@ impl WebUIHandler {
             &context.route_base,
             context.route_index,
         );
-        self.process_fragment_range(fragments, 0..fragments.len(), &best_route, context)
+        self.process_fragment_range(fragments, start..fragments.len(), &best_route, context)
     }
 
     fn process_fragment_range<'data>(
@@ -1410,6 +1522,9 @@ impl WebUIHandler {
                 write_usize(context.writer, ri)?;
                 context.writer.write("\" active>")?;
 
+                if !Self::component_owns_css_tree(comp, context.protocol) {
+                    self.emit_component_style_closure(comp, StyleClosureInstall::Routed, context)?;
+                }
                 if !matched_child.content_fragment_id.is_empty() {
                     self.process_fragment_id(&matched_child.content_fragment_id, context)?;
                 }
@@ -1473,7 +1588,7 @@ impl WebUIHandler {
     /// scripts honor `script-src`).
     ///
     /// Example for `my-comp` with CSS `span{color:blue;}`:
-    /// `<script type="importmap" nonce="...">{"imports":{"my-comp":"data:text/css,span{color:blue;}"}}</script>`
+    /// `<script type="importmap" nonce="..." data-webui-resource="my-comp">{"imports":{"my-comp":"data:text/css,span{color:blue;}"}}</script>`
     fn emit_css_module_importmap(
         &self,
         specifier: &str,
@@ -1485,20 +1600,337 @@ impl WebUIHandler {
         Ok(())
     }
 
+    /// Install one compiler-ordered closure into the active CSS tree.
+    fn emit_component_style_closure(
+        &self,
+        root: &str,
+        install: StyleClosureInstall,
+        context: &mut WebUIProcessContext,
+    ) -> Result<()> {
+        if context.protocol.style_closures.is_empty() {
+            return Ok(());
+        }
+        let shadow_static_closure = if install == StyleClosureInstall::Routed {
+            match context.shadow_style_roots.last() {
+                Some(shadow_root) => {
+                    if !shadow_root.static_closure_emitted {
+                        return Err(HandlerError::Invariant(
+                            "routed styles reached a ShadowRoot before its static style hook"
+                                .to_string(),
+                        ));
+                    }
+                    let root_name = context
+                        .component_index
+                        .iter()
+                        .find_map(|(name, index)| {
+                            (*index == shadow_root.component_index).then_some(name.as_str())
+                        })
+                        .ok_or_else(|| {
+                            HandlerError::Invariant(
+                                "active Shadow style root lost its protocol index".to_string(),
+                            )
+                        })?;
+                    Some(
+                        context
+                            .protocol
+                            .style_closures
+                            .get(root_name)
+                            .ok_or_else(|| {
+                                HandlerError::Invariant(format!(
+                            "component style closure metadata is missing Shadow root `{root_name}`"
+                        ))
+                            })?,
+                    )
+                }
+                None => None,
+            }
+        } else {
+            None
+        };
+        let closure = context.protocol.style_closures.get(root).ok_or_else(|| {
+            HandlerError::Invariant(format!(
+                "component style closure metadata is missing root `{root}`"
+            ))
+        })?;
+        let is_document_tree = context.shadow_style_roots.is_empty();
+        let strategy = context.css_strategy;
+
+        // A bundled build delivers merged chunks; otherwise every component
+        // delivers its own stylesheet. Both walk the closure in the same order,
+        // so the emitted cascade is identical either way. Bundling is a
+        // build-wide decision, so the two never mix within one protocol.
+        let unit_count = WebUIProtocol::style_closure_unit_count(closure);
+        let mut emitted_resources = HashSet::with_capacity(unit_count);
+
+        for position in 0..unit_count {
+            let unit = context
+                .protocol
+                .style_closure_unit(closure, &context.style_chunk_index, position)
+                .ok_or_else(|| {
+                    HandlerError::Invariant(format!(
+                        "component style closure `{root}` references out-of-range unit {position}"
+                    ))
+                })?;
+            let (name, chunk) = (unit.name, unit.chunk);
+            if !emitted_resources.insert(name) {
+                continue;
+            }
+            let resource = unit.resource.ok_or_else(|| match chunk {
+                Some(index) => HandlerError::Invariant(format!(
+                    "component style closure `{root}` references missing style chunk {index}"
+                )),
+                None => HandlerError::Invariant(format!(
+                    "component style closure `{root}` references missing resource `{name}`"
+                )),
+            })?;
+            if is_document_tree && !context.document_style_resources.insert(name.to_string()) {
+                continue;
+            }
+            if let Some(static_closure) = shadow_static_closure {
+                let resource_index = match chunk {
+                    Some(index) => {
+                        if static_closure.style_chunks.contains(&index) {
+                            continue;
+                        }
+                        index
+                    }
+                    None => {
+                        if static_closure.component_tags.iter().any(|tag| tag == name) {
+                            continue;
+                        }
+                        context.component_index.get(name).copied().ok_or_else(|| {
+                            HandlerError::Invariant(format!(
+                                "component style resource `{name}` is missing its protocol index"
+                            ))
+                        })?
+                    }
+                };
+                let shadow_root = context.shadow_style_roots.last_mut().ok_or_else(|| {
+                    HandlerError::Invariant(
+                        "active Shadow style root disappeared during routed style delivery"
+                            .to_string(),
+                    )
+                })?;
+                if shadow_root.routed_resources.contains(&resource_index) {
+                    continue;
+                }
+                shadow_root.routed_resources.push(resource_index);
+            }
+
+            match strategy {
+                webui_protocol::CssStrategy::Link => {
+                    context.writer.write("<link rel=\"stylesheet\" href=\"")?;
+                    context
+                        .writer
+                        .write(&crate::html_encode::encode_safe(resource))?;
+                    context.writer.write("\" data-webui-resource=\"")?;
+                    context
+                        .writer
+                        .write(&crate::html_encode::encode_safe(name))?;
+                    context.writer.write("\" data-webui-strategy=\"link\">")?;
+                }
+                strategy => {
+                    context.writer.write("<style")?;
+                    if let Some(nonce) = context.nonce {
+                        context.writer.write(" nonce=\"")?;
+                        context
+                            .writer
+                            .write(&crate::html_encode::encode_safe(nonce))?;
+                        context.writer.write("\"")?;
+                    }
+                    context.writer.write(" data-webui-resource=\"")?;
+                    context
+                        .writer
+                        .write(&crate::html_encode::encode_safe(name))?;
+                    context.writer.write("\" data-webui-strategy=\"")?;
+                    context
+                        .writer
+                        .write(if strategy == webui_protocol::CssStrategy::Module {
+                            "module"
+                        } else {
+                            "style"
+                        })?;
+                    context.writer.write("\">")?;
+                    crate::html_encode::write_style_text(context.writer, resource)?;
+                    context.writer.write("</style>")?;
+                }
+            }
+        }
+        Ok(())
+    }
+
+    pub(crate) fn ensure_request_route_chain(context: &mut WebUIProcessContext) {
+        if context.route_chain.is_none() {
+            let plan = crate::route_handler::collect_route_chain_plan(
+                context.protocol,
+                context.entry_id,
+                context.request_path,
+                context.route_index,
+            );
+            context.route_document_style_targets = plan.document_style_targets;
+            context.route_chain = Some(plan.entries);
+        }
+    }
+
+    fn emit_active_route_styles(
+        &self,
+        preloaded: &mut Vec<u32>,
+        context: &mut WebUIProcessContext,
+    ) -> Result<()> {
+        Self::ensure_request_route_chain(context);
+        let Some(chain) = context.route_chain.take() else {
+            return Err(route_style_plan_missing_error());
+        };
+        let document_targets = std::mem::take(&mut context.route_document_style_targets);
+        if chain.len() != document_targets.len() {
+            let error = route_style_plan_length_error(chain.len(), document_targets.len());
+            context.route_document_style_targets = document_targets;
+            context.route_chain = Some(chain);
+            return Err(error);
+        }
+
+        let result = (|| {
+            for (entry, targets_document) in chain.iter().zip(&document_targets) {
+                if *targets_document {
+                    self.emit_component_style_closure(
+                        &entry.component,
+                        StyleClosureInstall::Static,
+                        context,
+                    )?;
+                    continue;
+                }
+
+                if context.css_strategy != webui_protocol::CssStrategy::Link {
+                    continue;
+                }
+                self.emit_component_style_preloads(&entry.component, preloaded, context)?;
+            }
+            Ok(())
+        })();
+
+        context.route_document_style_targets = document_targets;
+        context.route_chain = Some(chain);
+        result
+    }
+
+    fn emit_component_style_preloads(
+        &self,
+        root: &str,
+        preloaded: &mut Vec<u32>,
+        context: &mut WebUIProcessContext,
+    ) -> Result<()> {
+        let Some(closure) = context.protocol.style_closures.get(root) else {
+            return Ok(());
+        };
+        // A chunk shared by several tree-local roots needs one preload.
+        let unit_count = WebUIProtocol::style_closure_unit_count(closure);
+        for position in 0..unit_count {
+            let Some(unit) =
+                context
+                    .protocol
+                    .style_closure_unit(closure, &context.style_chunk_index, position)
+            else {
+                continue;
+            };
+            let Some(href) = unit.resource else {
+                continue;
+            };
+            let name = unit.name;
+            if context.document_style_resources.contains(name) {
+                continue;
+            }
+            let Some(&resource_index) = context.style_resource_index.get(name) else {
+                continue;
+            };
+            if preloaded.contains(&resource_index) {
+                continue;
+            }
+            context
+                .writer
+                .write("<link rel=\"preload\" as=\"style\" href=\"")?;
+            context
+                .writer
+                .write(&crate::html_encode::encode_safe(href))?;
+            context.writer.write("\">")?;
+            preloaded.push(resource_index);
+        }
+        Ok(())
+    }
+
+    fn emit_reachable_shadow_preloads(
+        &self,
+        preloaded: &mut Vec<u32>,
+        context: &mut WebUIProcessContext,
+    ) -> Result<()> {
+        if context.css_strategy != webui_protocol::CssStrategy::Link {
+            return Ok(());
+        }
+        let reachable = context.reachable_components.take().unwrap_or_else(|| {
+            crate::route_handler::collect_reachable_component_order_for_request(
+                context.protocol,
+                context.entry_id,
+                context.request_path,
+                context.route_index,
+            )
+        });
+        let result = (|| {
+            for component in &reachable {
+                if context.protocol.component_uses_shadow_dom(component) {
+                    self.emit_component_style_preloads(component, preloaded, context)?;
+                }
+            }
+            Ok(())
+        })();
+        context.reachable_components = Some(reachable);
+        result
+    }
+
+    fn process_shadow_style_signal(
+        &self,
+        root: &str,
+        context: &mut WebUIProcessContext,
+    ) -> Result<()> {
+        let Some(root_index) = context.component_index.get(root).copied() else {
+            return Err(HandlerError::Invariant(format!(
+                "Shadow style hook `{root}` references an unknown component"
+            )));
+        };
+        if context
+            .shadow_style_roots
+            .last()
+            .map(|shadow_root| shadow_root.component_index)
+            != Some(root_index)
+        {
+            return Err(HandlerError::Invariant(format!(
+                "Shadow style hook `{root}` does not match the active component root"
+            )));
+        }
+        self.emit_component_style_closure(root, StyleClosureInstall::Static, context)?;
+        let shadow_root = context.shadow_style_roots.last_mut().ok_or_else(|| {
+            HandlerError::Invariant(
+                "active Shadow style root disappeared after its static style hook".to_string(),
+            )
+        })?;
+        shadow_root.static_closure_emitted = true;
+        Ok(())
+    }
+
     /// Emit a component's CSS module importmap on its first render
     /// (deduped by `rendered_components`) into the component's light DOM,
     /// so the browser registers it under the component's specifier
     /// before the shadow root template is parsed. See
     /// [`Self::emit_css_module_importmap`] for the emitted shape.
     ///
-    /// Only components rendered on the current route get inline
-    /// definitions; others receive theirs via `templateStyles` during
-    /// SPA partial navigation.
+    /// Only components rendered on the current route get inline definitions;
+    /// navigation responses carry later definitions in `componentStyles`.
     fn emit_css_module(
         &self,
         component: &webui_protocol::WebUIFragmentComponent,
         context: &mut WebUIProcessContext,
     ) -> Result<()> {
+        if context.css_strategy != webui_protocol::CssStrategy::Module {
+            return Ok(());
+        }
         let metadata_already_streamed = context.streaming.as_ref().is_some_and(|streaming| {
             streaming_template_already_sent(
                 streaming,
@@ -1570,6 +2002,13 @@ impl WebUIHandler {
             }
 
             if !route_frag.fragment_id.is_empty() {
+                if !Self::component_owns_css_tree(&route_frag.fragment_id, context.protocol) {
+                    self.emit_component_style_closure(
+                        &route_frag.fragment_id,
+                        StyleClosureInstall::Routed,
+                        context,
+                    )?;
+                }
                 let comp = webui_protocol::WebUIFragmentComponent {
                     fragment_id: route_frag.fragment_id.clone(),
                 };
@@ -1624,6 +2063,11 @@ impl WebUIHandler {
                 .insert(component.fragment_id.clone());
         }
 
+        let owns_css_tree = Self::component_owns_css_tree(&component.fragment_id, context.protocol);
+        if owns_css_tree {
+            Self::push_shadow_style_root(&component.fragment_id, context)?;
+        }
+
         // Save parent scope. `mem::take` leaves an alloc-free empty map behind.
         let saved_local_vars = std::mem::take(&mut context.local_vars);
         // The component's accumulated attrs become its local vars; the next
@@ -1639,7 +2083,12 @@ impl WebUIHandler {
             p.push_scope();
         }
 
-        self.process_fragment_id(&component.fragment_id, context)?;
+        let render_result = self.process_fragment_id(&component.fragment_id, context);
+
+        if owns_css_tree {
+            Self::pop_shadow_style_root(&component.fragment_id, context)?;
+        }
+        render_result?;
 
         if let Some(p) = &mut context.plugin {
             p.pop_scope();
@@ -1656,6 +2105,53 @@ impl WebUIHandler {
         Ok(())
     }
 
+    #[inline]
+    pub(crate) fn component_owns_css_tree(component: &str, protocol: &WebUIProtocol) -> bool {
+        !protocol.style_closures.is_empty()
+            && protocol
+                .components
+                .get(component)
+                .is_some_and(|data| data.uses_shadow_dom)
+    }
+
+    pub(crate) fn push_shadow_style_root(
+        component: &str,
+        context: &mut WebUIProcessContext,
+    ) -> Result<()> {
+        if !context.protocol.style_closures.contains_key(component) {
+            return Err(HandlerError::Invariant(format!(
+                "component style closure metadata is missing Shadow root `{component}`"
+            )));
+        }
+        let root_index = context
+            .component_index
+            .get(component)
+            .copied()
+            .ok_or_else(|| {
+                HandlerError::Invariant(format!(
+                    "Shadow component `{component}` is missing its protocol index"
+                ))
+            })?;
+        context.shadow_style_roots.push(ShadowStyleRoot {
+            component_index: root_index,
+            static_closure_emitted: false,
+            routed_resources: Vec::new(),
+        });
+        Ok(())
+    }
+
+    pub(crate) fn pop_shadow_style_root(
+        component: &str,
+        context: &mut WebUIProcessContext,
+    ) -> Result<()> {
+        context.shadow_style_roots.pop().ok_or_else(|| {
+            HandlerError::Invariant(format!(
+                "Shadow component `{component}` lost its active style root"
+            ))
+        })?;
+        Ok(())
+    }
+
     /// Resolve a dotted path value, checking local variables first, then global state.
     fn resolve_value(
         &self,
@@ -1795,13 +2291,17 @@ impl WebUIHandler {
             return self.process_state_signal(signal, !signal.raw_text_context, context);
         };
 
+        if let Some(root) = structural_value.strip_prefix("shadow_styles:") {
+            return self.process_shadow_style_signal(root, context);
+        }
+
         if context.streaming.is_some()
             && self.process_streaming_signal(structural_value, context)?
         {
             return Ok(());
         }
 
-        // Hook: emit nonce meta and CSS <link> tags before </head>.
+        // Hook: emit nonce meta and Document-owned CSS before </head>.
         // Guarded by `head_end_emitted` so a malformed protocol cannot
         // emit nonce/preloads/inject more than once per render.
         if structural_value == "head_end" && !context.head_end_emitted {
@@ -1816,6 +2316,8 @@ impl WebUIHandler {
                 context.writer.write("\">")?;
             }
 
+            // Render-policy CSS is emitted before component styles so an
+            // authored declaration still wins on a tie.
             if !context.protocol.component_render_css.is_empty() {
                 context.writer.write("<style data-webui-render-policy")?;
                 if let Some(nonce) = context.nonce {
@@ -1832,47 +2334,12 @@ impl WebUIHandler {
                 context.writer.write("</style>")?;
             }
 
-            // Emit CSS <link> tags in <head> for Link-strategy components.
-            // For components with a non-empty css_href:
-            //   Link + Shadow → <link rel="preload"> (stylesheet is in shadow root)
-            //   Link + Light  → <link rel="stylesheet"> (no shadow root)
-            //
-            // Style and Module strategies emit their CSS during component
-            // rendering (shadow-DOM template / importmap respectively).
-            let is_link = context.protocol.css_strategy() == webui_protocol::CssStrategy::Link;
-            let is_shadow = context.protocol.dom_strategy() == webui_protocol::DomStrategy::Shadow;
-
-            if is_link {
-                let (needed_components, _) =
-                    crate::route_handler::get_needed_components_for_request(
-                        context.protocol,
-                        context.entry_id,
-                        context.request_path,
-                        "",
-                        (context.component_index, context.route_index),
-                    )?;
-
-                for name in &needed_components {
-                    if let Some(href) = context
-                        .protocol
-                        .components
-                        .get(name)
-                        .map(|c| c.css_href.as_str())
-                        .filter(|h| !h.is_empty())
-                    {
-                        if is_shadow {
-                            context.writer.write("<link rel=\"preload\" href=\"")?;
-                            context.writer.write(href)?;
-                            context
-                                .writer
-                                .write("\" as=\"style\" data-webui-ssr-preload=\"style\">")?;
-                        } else {
-                            context.writer.write("<link rel=\"stylesheet\" href=\"")?;
-                            context.writer.write(href)?;
-                            context.writer.write("\">")?;
-                        }
-                    }
-                }
+            if !context.protocol.style_closures.is_empty() {
+                let entry_id = context.entry_id;
+                self.emit_component_style_closure(entry_id, StyleClosureInstall::Static, context)?;
+                let mut preloaded = Vec::new();
+                self.emit_active_route_styles(&mut preloaded, context)?;
+                self.emit_reachable_shadow_preloads(&mut preloaded, context)?;
             }
 
             // Compiler-resolved `modulepreload` hints for the shared chunks
@@ -1915,9 +2382,8 @@ impl WebUIHandler {
             }
         }
 
-        // Hook: emit state-supplied HTML immediately after `<body>`.
-        // Guarded by its own dedup flag so a malformed protocol emitting
-        // the signal twice cannot duplicate the injected markup.
+        // Hook: emit state-supplied HTML immediately after `<body>`. Guarded
+        // by its own dedup flag so a malformed protocol cannot duplicate it.
         if structural_value == "body_start" && !context.body_start_emitted {
             context.body_start_emitted = true;
             write_component_asset_styles(context)?;
@@ -1940,28 +2406,37 @@ impl WebUIHandler {
                 // round-trip. The graph walker follows conditional and loop branches
                 // unconditionally, but only descends into the matched route chain —
                 // components on other routes are delivered via SPA partial navigation.
-                let reachable = crate::route_handler::collect_reachable_components_for_request(
-                    context.protocol,
-                    context.entry_id,
-                    context.request_path,
-                    context.route_index,
-                );
+                let reachable = context
+                    .reachable_components
+                    .take()
+                    .unwrap_or_else(|| {
+                        crate::route_handler::collect_reachable_component_order_for_request(
+                            context.protocol,
+                            context.entry_id,
+                            context.request_path,
+                            context.route_index,
+                        )
+                    })
+                    .into_iter()
+                    .collect::<HashSet<_>>();
                 let state_selection =
                     collect_hydration_state(context.protocol, reachable.iter().map(String::as_str));
 
                 // Emit CSS module importmaps for reachable-but-unrendered
                 // components so the framework can adopt them when an `<if>`
                 // condition flips true client-side.
-                for name in &reachable {
-                    if !context.rendered_components.contains(name) {
-                        if let Some(css) = context
-                            .protocol
-                            .components
-                            .get(name)
-                            .map(|c| c.css.as_str())
-                            .filter(|s| !s.is_empty())
-                        {
-                            self.emit_css_module_importmap(name, css, context)?;
+                if context.css_strategy == webui_protocol::CssStrategy::Module {
+                    for name in &reachable {
+                        if !context.rendered_components.contains(name) {
+                            if let Some(css) = context
+                                .protocol
+                                .components
+                                .get(name)
+                                .map(|c| c.css.as_str())
+                                .filter(|s| !s.is_empty())
+                            {
+                                self.emit_css_module_importmap(name, css, context)?;
+                            }
                         }
                     }
                 }
@@ -1993,19 +2468,19 @@ impl WebUIHandler {
                 );
 
                 // Chain
-                let chain = crate::route_handler::collect_route_chain(
-                    context.protocol,
-                    context.entry_id,
-                    context.request_path,
-                    context.route_index,
-                );
+                Self::ensure_request_route_chain(context);
+                let chain = context.route_chain.as_deref().ok_or_else(|| {
+                    HandlerError::Invariant(
+                        "request route chain disappeared after collection".to_string(),
+                    )
+                })?;
                 let chain_json: Vec<Value> = chain
                     .iter()
                     .map(crate::route_handler::RouteChainEntry::to_json)
                     .collect();
 
                 // CSS hrefs emitted during SSR (Link-strategy components)
-                let is_link = context.protocol.css_strategy() == webui_protocol::CssStrategy::Link;
+                let is_link = context.css_strategy == webui_protocol::CssStrategy::Link;
                 let mut css_hrefs: Vec<&str> = Vec::new();
                 if is_link {
                     for name in &reachable {
@@ -2023,20 +2498,36 @@ impl WebUIHandler {
 
                 // Module style specifiers emitted during SSR
                 let mut style_specs: Vec<&str> = Vec::new();
-                for name in &reachable {
-                    if context
-                        .protocol
-                        .components
-                        .get(name)
-                        .map(|c| !c.css.is_empty())
-                        .unwrap_or(false)
-                    {
-                        style_specs.push(name);
+                if context.css_strategy == webui_protocol::CssStrategy::Module {
+                    for name in &reachable {
+                        if context
+                            .protocol
+                            .components
+                            .get(name)
+                            .map(|c| !c.css.is_empty())
+                            .unwrap_or(false)
+                        {
+                            style_specs.push(name);
+                        }
                     }
                 }
 
                 let empty_payloads: [WebUiTemplatePayload<'_>; 0] = [];
                 let payloads = template_payloads.as_deref().unwrap_or(&empty_payloads);
+                let mut style_roots = Vec::with_capacity(reachable.len() + chain.len() * 3 + 1);
+                style_roots.push(context.entry_id);
+                for entry in chain {
+                    style_roots.push(entry.component.as_str());
+                    if !entry.pending_component.is_empty() {
+                        style_roots.push(entry.pending_component.as_str());
+                    }
+                    if !entry.error_component.is_empty() {
+                        style_roots.push(entry.error_component.as_str());
+                    }
+                }
+                style_roots.extend(reachable.iter().map(String::as_str));
+                let component_styles =
+                    crate::route_handler::collect_component_styles(context.protocol, style_roots)?;
                 write_webui_data_block(
                     context.writer,
                     &mut context.json_scratch,
@@ -2050,6 +2541,7 @@ impl WebUIHandler {
                         nonce: context.nonce,
                         css_hrefs: &css_hrefs,
                         style_specs: &style_specs,
+                        component_styles: &component_styles,
                         templates: payloads,
                     },
                 )?;
@@ -2329,10 +2821,36 @@ impl WebUIHandler {
         options: &RenderOptions<'a>,
         writer: &'a mut dyn ResponseWriter,
     ) -> Result<()> {
+        protocol.ensure_style_metadata()?;
         let document = protocol.protocol();
-        if !document.fragments.contains_key(options.entry_id) {
-            return Err(HandlerError::MissingFragment(options.entry_id.to_string()));
-        }
+        let entry = document
+            .fragments
+            .get(options.entry_id)
+            .ok_or_else(|| HandlerError::MissingFragment(options.entry_id.to_string()))?;
+        let entry_owns_css_tree = Self::component_owns_css_tree(options.entry_id, document);
+        let has_document_head_boundary = !entry_owns_css_tree
+            && !document.style_closures.is_empty()
+            && entry.fragments.iter().any(|fragment| {
+                matches!(
+                    fragment.fragment.as_ref(),
+                    Some(Fragment::Signal(signal))
+                        if structural_signal_value(signal) == Some("head_end")
+                )
+            });
+        let doctype_split = (!entry_owns_css_tree
+            && !has_document_head_boundary
+            && !document.style_closures.is_empty())
+        .then(|| {
+            let Some(Fragment::Raw(raw)) = entry
+                .fragments
+                .first()
+                .and_then(|fragment| fragment.fragment.as_ref())
+            else {
+                return None;
+            };
+            doctype_prefix_end(&raw.value).map(|end| (raw.value.as_str(), end))
+        })
+        .flatten();
         let component_asset_style_manifest = protocol.component_asset_style_manifest()?;
         let mut context = WebUIProcessContext {
             protocol: document,
@@ -2358,15 +2876,55 @@ impl WebUIHandler {
             body_start_emitted: false,
             component_asset_styles_emitted: false,
             component_index: protocol.component_index(),
+            style_resource_index: protocol.style_resource_index(),
+            style_chunk_index: protocol.protocol().style_chunk_index(),
+            css_strategy: protocol.css_strategy(),
             body_end_emitted: false,
             route_index: protocol.route_index(),
             route_chain_index: 0,
+            route_chain: None,
+            route_document_style_targets: Vec::new(),
+            reachable_components: None,
             streaming: None,
             json_scratch: Vec::new(),
             scope_pool: Vec::new(),
+            document_style_resources: HashSet::new(),
+            shadow_style_roots: Vec::new(),
+        };
+
+        if entry_owns_css_tree {
+            Self::push_shadow_style_root(options.entry_id, &mut context)?;
+        }
+
+        let render_result = if let Some((first_raw, split)) = doctype_split {
+            context.writer.write(&first_raw[..split])?;
+            self.emit_component_style_closure(
+                options.entry_id,
+                StyleClosureInstall::Static,
+                &mut context,
+            )?;
+            self.emit_active_route_styles(&mut Vec::new(), &mut context)?;
+            context.writer.write(&first_raw[split..])?;
+            self.process_fragment_from(&entry.fragments, 1, &mut context)
+        } else {
+            if !entry_owns_css_tree
+                && !has_document_head_boundary
+                && !document.style_closures.is_empty()
+            {
+                self.emit_component_style_closure(
+                    options.entry_id,
+                    StyleClosureInstall::Static,
+                    &mut context,
+                )?;
+                self.emit_active_route_styles(&mut Vec::new(), &mut context)?;
+            }
+            self.process_fragment_id(options.entry_id, &mut context)
         };
 
-        self.process_fragment_id(options.entry_id, &mut context)?;
+        if entry_owns_css_tree {
+            Self::pop_shadow_style_root(options.entry_id, &mut context)?;
+        }
+        render_result?;
         writer.end()?;
 
         Ok(())
@@ -2402,11 +2960,12 @@ fn handle(
 #[cfg(test)]
 mod tests {
     use super::*;
+    use crate::streaming::STREAMING_MARKER;
     use std::cell::RefCell;
-    use webui_parser::HtmlParser;
+    use webui_parser::{ComponentRegistration, DomStrategy, HtmlParser};
     use webui_protocol::{
         web_ui_fragment, ComparisonOperator, ConditionExpr, FragmentList, LogicalOperator,
-        WebUIFragmentAttribute,
+        WebUIFragmentAttribute, WebUiFragmentRoute,
     };
     use webui_test_utils::test_json;
 
@@ -7014,7 +7573,7 @@ mod tests {
             "dashboard route should exist"
         );
         assert!(
-            html.contains("active>") && html.contains("<dash-page>"),
+            html.contains("active>") && html.contains("<dash-page"),
             "matched route should be active with component tag: {html}"
         );
         assert!(
@@ -7054,7 +7613,7 @@ mod tests {
         let detail_end = after_detail.find("</webui-route>").expect("closing tag");
         let detail_body = &after_detail[..detail_end];
         assert!(
-            !detail_body.contains("<detail-page>"),
+            !detail_body.contains("<detail-page"),
             "non-matched route should not render component content: {detail_body}"
         );
     }
@@ -7075,7 +7634,7 @@ mod tests {
 
         // Detail route matches /contacts/42
         assert!(
-            html.contains("active>") && html.contains("<detail-page>"),
+            html.contains("active>") && html.contains("<detail-page"),
             "detail route should be active: {html}"
         );
         assert!(html.contains("<p>Detail</p>"), "detail should have content");
@@ -7091,7 +7650,7 @@ mod tests {
         let dash_end = after_dash.find("</webui-route>").expect("closing tag");
         let dash_body = &after_dash[..dash_end];
         assert!(
-            !dash_body.contains("<dash-page>"),
+            !dash_body.contains("<dash-page"),
             "dashboard should not render component content: {dash_body}"
         );
     }
@@ -7397,11 +7956,13 @@ mod tests {
         );
 
         let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
         protocol
             .components
             .entry("my-card".to_string())
             .or_default()
             .css = "p{color:red}".to_string();
+        protocol.populate_style_closures(&["index.html"]);
         let state = test_json!({});
         let mut writer = TestWriter::new();
 
@@ -7527,7 +8088,7 @@ mod tests {
 
         assert!(
             !html.contains(r#"<style type="module""#),
-            "Non-module strategy should not emit legacy CSS module tags in <head>: {html}"
+            "Non-module strategy should not emit CSS module tags in <head>: {html}"
         );
         assert!(
             !html.contains(r#"<script type="importmap""#),
@@ -7624,7 +8185,6 @@ mod tests {
 
         let mut protocol = WebUIProtocol::new(fragments);
         protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
-        protocol.set_dom_strategy(webui_protocol::DomStrategy::Light);
 
         let comp = protocol
             .components
@@ -7632,6 +8192,7 @@ mod tests {
             .or_default();
         comp.css_href = "my-card.css".to_string();
         comp.template_json = r#"{"h":"<div>card</div>"}"#.to_string();
+        protocol.populate_style_closures(&["index.html"]);
 
         let state = test_json!({});
         let mut writer = TestWriter::new();
@@ -7647,7 +8208,7 @@ mod tests {
         let html = writer.get_content();
 
         let head_end = html.find("</head>").expect("</head> missing");
-        let link_pos = html.find(r#"<link rel="stylesheet" href="my-card.css">"#);
+        let link_pos = html.find(r#"<link rel="stylesheet" href="my-card.css""#);
         assert!(
             link_pos.is_some_and(|p| p < head_end),
             "Light DOM Link strategy should emit <link rel=stylesheet> in <head>: {html}"
@@ -7667,10 +8228,7 @@ mod tests {
     }
 
     #[test]
-    fn test_link_strategy_shadow_dom_emits_preload_in_head() {
-        // Shadow DOM + Link strategy: handler emits <link rel="preload">
-        // with data-webui-ssr-preload in <head>. No stylesheet — the shadow
-        // root template already contains <link rel="stylesheet">.
+    fn link_strategy_preloads_static_shadow_css_in_head() {
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
@@ -7678,13 +8236,9 @@ mod tests {
                 fragments: vec![
                     WebUIFragment::raw("<html><head>".to_string()),
                     structural_fragment("head_end"),
-                    WebUIFragment::raw("</head><body><o-loading-state>".to_string()),
-                    WebUIFragment::component("o-loading-state"),
-                    WebUIFragment::raw("</o-loading-state><my-card>".to_string()),
+                    WebUIFragment::raw("</head><body><my-card>".to_string()),
                     WebUIFragment::component("my-card"),
-                    WebUIFragment::raw("</my-card>".to_string()),
-                    structural_fragment("body_end"),
-                    WebUIFragment::raw("</body></html>".to_string()),
+                    WebUIFragment::raw("</my-card></body></html>".to_string()),
                 ],
                 contains_boundary: false,
             },
@@ -7699,35 +8253,30 @@ mod tests {
         fragments.insert(
             "my-card".to_string(),
             FragmentList {
-                fragments: vec![WebUIFragment::raw("<div>card</div>".to_string())],
+                fragments: vec![
+                    WebUIFragment::raw("<template shadowrootmode=\"open\">".to_string()),
+                    structural_fragment("shadow_styles:my-card"),
+                    WebUIFragment::raw("<div>card</div></template>".to_string()),
+                ],
                 contains_boundary: false,
             },
         );
 
         let mut protocol = WebUIProtocol::new(fragments);
         protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
-        protocol.set_dom_strategy(webui_protocol::DomStrategy::Shadow);
-
-        let comp1 = protocol
-            .components
-            .entry("o-loading-state".to_string())
-            .or_default();
-        comp1.css_href = "o-loading-state.css".to_string();
-        comp1.template_json = r#"{"h":"<div>loading</div>"}"#.to_string();
-
-        let comp2 = protocol
+        let component = protocol
             .components
             .entry("my-card".to_string())
             .or_default();
-        comp2.css_href = "my-card.css".to_string();
-        comp2.template_json = r#"{"h":"<div>card</div>"}"#.to_string();
+        component.css_href = "my-card.css".to_string();
+        component.template_json = r#"{"h":"<div>card</div>"}"#.to_string();
+        component.uses_shadow_dom = true;
+        protocol.populate_style_closures(&["index.html"]);
 
-        let state = test_json!({});
         let mut writer = TestWriter::new();
-
         handle(
             &protocol,
-            &state,
+            &test_json!({}),
             &RenderOptions::new("index.html", "/"),
             &mut writer,
         )
@@ -7735,299 +8284,1068 @@ mod tests {
 
         let html = writer.get_content();
         let head_end = html.find("</head>").expect("</head> missing");
-        let head_section = &html[..head_end];
-
-        // Both preload hints must be present with data-webui-ssr-preload attr
-        assert!(
-            head_section.contains(
-                r#"<link rel="preload" href="o-loading-state.css" as="style" data-webui-ssr-preload="style">"#
-            ),
-            "Missing preload for o-loading-state.css in <head>: {html}"
-        );
-        assert!(
-            head_section.contains(
-                r#"<link rel="preload" href="my-card.css" as="style" data-webui-ssr-preload="style">"#
-            ),
-            "Missing preload for my-card.css in <head>: {html}"
-        );
-        // No stylesheet links — shadow root handles that
-        assert!(
-            !head_section.contains(r#"<link rel="stylesheet""#),
-            "Shadow DOM should NOT emit <link rel=stylesheet> in <head>: {html}"
-        );
+        let preload = html
+            .find(r#"<link rel="preload" as="style" href="my-card.css">"#)
+            .expect("Shadow preload missing");
+        let stylesheet = html
+            .find(r#"<link rel="stylesheet" href="my-card.css""#)
+            .expect("Shadow stylesheet missing");
+        assert!(preload < head_end);
+        assert!(stylesheet > head_end);
+        assert_eq!(html.matches(r#"rel="preload" as="style""#).count(), 1);
     }
 
     #[test]
-    fn test_module_preloads_emit_in_head_in_compiler_order() {
-        // The whole value of these hints is ordering: preloads are issued in
-        // document order over one connection, so the largest chunk must go
-        // first. The compiler sorts; the handler must not reorder or dedupe.
-        let mut fragments = HashMap::new();
-        fragments.insert(
-            "index.html".to_string(),
-            FragmentList {
-                fragments: vec![
-                    WebUIFragment::raw(
-                        r#"<html><head><script type="module" async src="/index.js"></script>"#
-                            .to_string(),
-                    ),
-                    structural_fragment("head_end"),
-                    WebUIFragment::raw("</head><body>".to_string()),
-                    structural_fragment("body_end"),
-                    WebUIFragment::raw("</body></html>".to_string()),
-                ],
-                contains_boundary: false,
-            },
+    fn tree_local_styles_deduplicate_per_root_and_resume_caller_frame() {
+        let fragments = HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<html><head>".to_string()),
+                        structural_fragment("head_end"),
+                        WebUIFragment::raw("</head><body><outer-box>".to_string()),
+                        WebUIFragment::component("outer-box"),
+                        WebUIFragment::raw("</outer-box></body></html>".to_string()),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "outer-box".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<template shadowrootmode=\"open\">".to_string()),
+                        structural_fragment("shadow_styles:outer-box"),
+                        WebUIFragment::raw("<light-card>".to_string()),
+                        WebUIFragment::component("light-card"),
+                        WebUIFragment::raw("</light-card><light-card>".to_string()),
+                        WebUIFragment::component("light-card"),
+                        WebUIFragment::raw("</light-card><inner-box>".to_string()),
+                        WebUIFragment::component("inner-box"),
+                        WebUIFragment::raw("</inner-box><light-card>".to_string()),
+                        WebUIFragment::component("light-card"),
+                        WebUIFragment::raw("</light-card></template>".to_string()),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "inner-box".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<template shadowrootmode=\"open\">".to_string()),
+                        structural_fragment("shadow_styles:inner-box"),
+                        WebUIFragment::raw("<light-card>".to_string()),
+                        WebUIFragment::component("light-card"),
+                        WebUIFragment::raw("</light-card></template>".to_string()),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "light-card".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<p>card</p>".to_string())],
+                    contains_boundary: false,
+                },
+            ),
+        ]);
+        let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Style);
+        for (tag, css, uses_shadow_dom) in [
+            ("outer-box", ".outer{}", true),
+            ("inner-box", ".inner{}", true),
+            ("light-card", ".card{}", false),
+        ] {
+            let component = protocol.components.entry(tag.to_string()).or_default();
+            component.css = css.to_string();
+            component.uses_shadow_dom = uses_shadow_dom;
+        }
+        protocol.populate_style_closures(&["index.html"]);
+
+        let mut writer = TestWriter::new();
+        handle(
+            &protocol,
+            &test_json!({}),
+            &RenderOptions::new("index.html", "/").with_nonce("css-nonce"),
+            &mut writer,
+        )
+        .unwrap();
+        let html = writer.get_content();
+
+        assert_eq!(html.matches("data-webui-resource=\"outer-box\"").count(), 1);
+        assert_eq!(html.matches("data-webui-resource=\"inner-box\"").count(), 1);
+        assert_eq!(
+            html.matches("data-webui-resource=\"light-card\"").count(),
+            2,
+            "the Light resource installs once in each Shadow tree: {html}"
+        );
+        assert_eq!(
+            html.matches("data-webui-resource=").count(),
+            4,
+            "outer-box + light-card and inner-box + light-card are the four tree-local installs"
+        );
+        assert_eq!(
+            html.matches("nonce=\"css-nonce\"").count(),
+            4,
+            "each inline style resource carries the nonce"
+        );
+        assert!(html.contains(r#"<meta name="webui-nonce" content="css-nonce">"#));
+        let inner_end = html.find("</inner-box>").expect("inner host close");
+        let caller_continuation = &html[inner_end..];
+        let trailing_card = caller_continuation
+            .find("<p>card</p>")
+            .expect("caller continues after nested Shadow root");
+        assert!(trailing_card > 0);
+        assert!(
+            !caller_continuation.contains("data-webui-resource=\"light-card\""),
+            "returning from the nested Shadow root must restore the outer frame's delivered set"
         );
+    }
 
+    #[test]
+    fn routed_document_styles_are_hoisted_for_the_active_chain() {
+        let route = WebUiFragmentRoute {
+            path: "/".to_string(),
+            fragment_id: "app-shell".to_string(),
+            children: vec![
+                WebUiFragmentRoute {
+                    path: String::new(),
+                    fragment_id: "dashboard-page".to_string(),
+                    exact: true,
+                    ..Default::default()
+                },
+                WebUiFragmentRoute {
+                    path: "details".to_string(),
+                    fragment_id: "detail-page".to_string(),
+                    exact: true,
+                    ..Default::default()
+                },
+            ],
+            ..Default::default()
+        };
+        let fragments = HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<html><head>"),
+                        structural_fragment("head_start"),
+                        structural_fragment("head_end"),
+                        WebUIFragment::raw("</head><body>"),
+                        structural_fragment("body_start"),
+                        WebUIFragment::boundary(0, "index.html", "boundary-0", None),
+                        WebUIFragment::route_from(route),
+                        WebUIFragment::boundary_end(0),
+                        structural_fragment("body_end"),
+                        WebUIFragment::raw("</body></html>"),
+                    ],
+                    contains_boundary: true,
+                },
+            ),
+            (
+                "app-shell".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<header>App</header>"),
+                        WebUIFragment::outlet(),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "dashboard-page".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<main>Dashboard</main>")],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "detail-page".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<main>Detail</main>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]);
         let mut protocol = WebUIProtocol::new(fragments);
-        protocol.module_preloads = vec!["/chunk-big.js".to_string(), "/chunk-small.js".to_string()];
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
+        for tag in ["app-shell", "dashboard-page", "detail-page"] {
+            let component = protocol.components.entry(tag.to_string()).or_default();
+            component.css_href = format!("/{tag}.css");
+            component.template_json = r#"{"h":""}"#.to_string();
+        }
+        protocol.populate_style_closures(&["index.html"]);
 
-        let state = test_json!({});
         let mut writer = TestWriter::new();
         handle(
             &protocol,
-            &state,
+            &test_json!({}),
             &RenderOptions::new("index.html", "/"),
             &mut writer,
         )
         .unwrap();
-
         let html = writer.get_content();
-        let head_end = html.find("</head>").expect("</head> missing");
+
+        assert_eq!(
+            html.matches(r#"data-webui-resource="app-shell""#).count(),
+            1,
+            "the matched route shell must install once: {html}"
+        );
+        assert_eq!(
+            html.matches(r#"data-webui-resource="dashboard-page""#)
+                .count(),
+            1,
+            "the matched child route must install once: {html}"
+        );
+        assert!(
+            !html.contains(r#"data-webui-resource="detail-page""#),
+            "inactive route CSS must not be delivered: {html}"
+        );
+        let head_end = html.find("</head>").expect("head close");
         let head = &html[..head_end];
+        for (resource, href) in [
+            ("app-shell", "/app-shell.css"),
+            ("dashboard-page", "/dashboard-page.css"),
+        ] {
+            let encoded_href = crate::html_encode::encode_safe(href);
+            assert!(
+                head.contains(&format!(
+                    r#"<link rel="stylesheet" href="{encoded_href}" data-webui-resource="{resource}" data-webui-strategy="link">"#
+                )),
+                "Document-targeted route CSS must be render-blocking in head: {html}"
+            );
+            assert!(
+                !head.contains(&format!(
+                    r#"<link rel="preload" as="style" href="{encoded_href}">"#
+                )),
+                "a hoisted stylesheet must not also be preloaded: {html}"
+            );
+        }
         assert!(
-            head.contains(
-                r#"<link rel="modulepreload" href="/chunk-big.js"><link rel="modulepreload" href="/chunk-small.js">"#
-            ),
-            "hints must appear in <head> in the compiler's order: {html}"
+            !head.contains("detail-page.css"),
+            "inactive route CSS must not be preloaded: {html}"
+        );
+        let app_style = html
+            .find(r#"data-webui-resource="app-shell""#)
+            .expect("app style");
+        let dashboard_style = html
+            .find(r#"data-webui-resource="dashboard-page""#)
+            .expect("dashboard style");
+        let app_host = html.find("<app-shell").expect("app route host");
+        let dashboard_host = html.find("<dashboard-page").expect("dashboard route host");
+        assert!(
+            app_style < dashboard_style
+                && dashboard_style < head_end
+                && head_end < app_host
+                && app_host < dashboard_host,
+            "matched Document route closures must be hoisted in chain order: {html}"
         );
+
+        let protocol = Protocol::new(protocol);
+        let mut streamed = FlushTestWriter::default();
+        WebUIHandler::new()
+            .render_streaming(
+                &protocol,
+                &test_json!({}),
+                &RenderOptions::new("index.html", "/"),
+                &mut streamed,
+            )
+            .unwrap();
+        let streamed_head_end = streamed
+            .output
+            .find("</head>")
+            .expect("streamed head close");
+        for resource in ["app-shell", "dashboard-page"] {
+            let marker = format!(r#"data-webui-resource="{resource}""#);
+            let position = streamed.output.find(&marker).expect("streamed route style");
+            assert!(
+                position < streamed_head_end,
+                "streaming must hoist {resource} into head: {}",
+                streamed.output
+            );
+            assert_eq!(
+                streamed.output.matches(&marker).count(),
+                1,
+                "streaming must not emit {resource} twice: {}",
+                streamed.output
+            );
+        }
     }
 
     #[test]
-    fn test_no_module_preloads_emits_nothing() {
-        let mut fragments = HashMap::new();
-        fragments.insert(
+    fn bundled_routed_document_stylesheet_is_hoisted_once() {
+        let route = WebUiFragmentRoute {
+            path: "/".to_string(),
+            fragment_id: "dashboard-page".to_string(),
+            exact: true,
+            ..Default::default()
+        };
+        let mut protocol = WebUIProtocol::new(HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<html><head>"),
+                        structural_fragment("head_start"),
+                        structural_fragment("head_end"),
+                        WebUIFragment::raw("</head><body>"),
+                        WebUIFragment::route_from(route),
+                        structural_fragment("body_end"),
+                        WebUIFragment::raw("</body></html>"),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "dashboard-page".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<main>Dashboard</main>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]));
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
+        for tag in ["dashboard-page", "summary-card", "activity-list"] {
+            protocol
+                .components
+                .entry(tag.to_string())
+                .or_default()
+                .css_href = format!("/{tag}.css");
+        }
+        protocol.style_closures.insert(
             "index.html".to_string(),
-            FragmentList {
-                fragments: vec![
-                    WebUIFragment::raw("<html><head>".to_string()),
-                    structural_fragment("head_end"),
-                    WebUIFragment::raw("</head><body>".to_string()),
-                    structural_fragment("body_end"),
-                    WebUIFragment::raw("</body></html>".to_string()),
-                ],
-                contains_boundary: false,
-            },
-        );
-        let protocol = WebUIProtocol::new(fragments);
+            webui_protocol::ComponentStyleClosure::default(),
+        );
+        protocol.style_closures.insert(
+            "dashboard-page".to_string(),
+            webui_protocol::ComponentStyleClosure {
+                component_tags: vec![
+                    "dashboard-page".to_string(),
+                    "summary-card".to_string(),
+                    "activity-list".to_string(),
+                ],
+                style_chunks: vec![0],
+            },
+        );
+        protocol.style_chunks.push(webui_protocol::StyleChunk {
+            name: "_chunk-dashboard-page-3".to_string(),
+            css: String::new(),
+            css_href: "/_chunk-dashboard-page-3.css".to_string(),
+            component_tags: vec![
+                "dashboard-page".to_string(),
+                "summary-card".to_string(),
+                "activity-list".to_string(),
+            ],
+        });
 
-        let state = test_json!({});
         let mut writer = TestWriter::new();
         handle(
             &protocol,
-            &state,
+            &test_json!({}),
             &RenderOptions::new("index.html", "/"),
             &mut writer,
         )
         .unwrap();
+        let html = writer.get_content();
+        let head_end = html.find("</head>").expect("head close");
+        let marker = r#"data-webui-resource="_chunk-dashboard-page-3""#;
+        let style = html.find(marker).expect("bundled route stylesheet");
 
         assert!(
-            !writer.get_content().contains("modulepreload"),
-            "a build without hints must be byte-identical to before"
+            style < head_end,
+            "bundled route CSS must be in head: {html}"
+        );
+        assert_eq!(
+            html.matches(marker).count(),
+            1,
+            "the route host must not emit the hoisted chunk again: {html}"
+        );
+        let bundled_href = crate::html_encode::encode_safe("/_chunk-dashboard-page-3.css");
+        assert!(
+            !html.contains(&format!(
+                r#"<link rel="preload" as="style" href="{bundled_href}">"#
+            )),
+            "the applied bundled stylesheet must not also be preloaded: {html}"
         );
     }
 
     #[test]
-    fn test_link_strategy_head_links_follow_document_order() {
-        // Regression for #381: Link-strategy <head> CSS <link> tags must be
-        // emitted in document/traversal order, not alphabetical tag order.
-        // Document order here is <z-widget> then <a-widget>; an alphabetical
-        // sort would (incorrectly) place a-widget first.
-        let mut fragments = HashMap::new();
-        fragments.insert(
-            "index.html".to_string(),
-            FragmentList {
-                fragments: vec![
-                    WebUIFragment::raw("<html><head>".to_string()),
-                    structural_fragment("head_end"),
-                    WebUIFragment::raw("</head><body><z-widget>".to_string()),
-                    WebUIFragment::component("z-widget"),
-                    WebUIFragment::raw("</z-widget><a-widget>".to_string()),
-                    WebUIFragment::component("a-widget"),
-                    WebUIFragment::raw("</a-widget>".to_string()),
-                    structural_fragment("body_end"),
-                    WebUIFragment::raw("</body></html>".to_string()),
-                ],
-                contains_boundary: false,
-            },
-        );
-        fragments.insert(
-            "z-widget".to_string(),
-            FragmentList {
-                fragments: vec![WebUIFragment::raw("<div>z</div>".to_string())],
-                contains_boundary: false,
-            },
-        );
-        fragments.insert(
-            "a-widget".to_string(),
-            FragmentList {
-                fragments: vec![WebUIFragment::raw("<div>a</div>".to_string())],
-                contains_boundary: false,
-            },
-        );
+    fn routed_document_inline_styles_are_hoisted() {
+        for strategy in [
+            webui_protocol::CssStrategy::Style,
+            webui_protocol::CssStrategy::Module,
+        ] {
+            let route = WebUiFragmentRoute {
+                path: "/".to_string(),
+                fragment_id: "dashboard-page".to_string(),
+                exact: true,
+                ..Default::default()
+            };
+            let mut protocol = WebUIProtocol::new(HashMap::from([
+                (
+                    "index.html".to_string(),
+                    FragmentList {
+                        fragments: vec![
+                            WebUIFragment::raw("<html><head>"),
+                            structural_fragment("head_start"),
+                            structural_fragment("head_end"),
+                            WebUIFragment::raw("</head><body>"),
+                            WebUIFragment::route_from(route),
+                            structural_fragment("body_end"),
+                            WebUIFragment::raw("</body></html>"),
+                        ],
+                        contains_boundary: false,
+                    },
+                ),
+                (
+                    "dashboard-page".to_string(),
+                    FragmentList {
+                        fragments: vec![WebUIFragment::raw("<main>Dashboard</main>")],
+                        contains_boundary: false,
+                    },
+                ),
+            ]));
+            protocol.set_css_strategy(strategy);
+            protocol
+                .components
+                .entry("dashboard-page".to_string())
+                .or_default()
+                .css = ".dashboard{display:grid}".to_string();
+            protocol.populate_style_closures(&["index.html"]);
 
-        let mut protocol = WebUIProtocol::new(fragments);
-        protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
-        protocol.set_dom_strategy(webui_protocol::DomStrategy::Light);
+            let mut writer = TestWriter::new();
+            handle(
+                &protocol,
+                &test_json!({}),
+                &RenderOptions::new("index.html", "/").with_nonce("css-nonce"),
+                &mut writer,
+            )
+            .unwrap();
+            let html = writer.get_content();
+            let head_end = html.find("</head>").expect("head close");
+            let marker = r#"data-webui-resource="dashboard-page""#;
+            let style = html.find(marker).expect("route style fallback");
+            let host = html.find("<dashboard-page").expect("dashboard route host");
+            let strategy_name = if strategy == webui_protocol::CssStrategy::Module {
+                "module"
+            } else {
+                "style"
+            };
+            let style_marker = format!(
+                r#"data-webui-resource="dashboard-page" data-webui-strategy="{strategy_name}""#
+            );
 
-        let z = protocol
-            .components
-            .entry("z-widget".to_string())
-            .or_default();
-        z.css_href = "z-widget.css".to_string();
-        z.template_json = r#"{"h":"<div>z</div>"}"#.to_string();
+            assert!(
+                style < head_end && head_end < host,
+                "{strategy:?} route CSS must be applied in head before its host: {html}"
+            );
+            assert_eq!(
+                html.matches(&style_marker).count(),
+                1,
+                "{strategy:?} route CSS must not be emitted twice: {html}"
+            );
+        }
+    }
 
-        let a = protocol
+    #[test]
+    fn light_route_inside_static_shadow_root_is_only_preloaded_in_head() {
+        let route = WebUiFragmentRoute {
+            path: "/".to_string(),
+            fragment_id: "dashboard-page".to_string(),
+            exact: true,
+            ..Default::default()
+        };
+        let mut protocol = WebUIProtocol::new(HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<html><head>"),
+                        structural_fragment("head_start"),
+                        structural_fragment("head_end"),
+                        WebUIFragment::raw("</head><body><outer-box>"),
+                        WebUIFragment::component("outer-box"),
+                        WebUIFragment::raw("</outer-box></body></html>"),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "outer-box".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<template shadowrootmode=\"open\">"),
+                        structural_fragment("shadow_styles:outer-box"),
+                        WebUIFragment::route_from(route),
+                        WebUIFragment::raw("</template>"),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "dashboard-page".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<main>Dashboard</main>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]));
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
+        for tag in ["outer-box", "dashboard-page"] {
+            protocol
+                .components
+                .entry(tag.to_string())
+                .or_default()
+                .css_href = format!("/{tag}.css");
+        }
+        protocol
             .components
-            .entry("a-widget".to_string())
-            .or_default();
-        a.css_href = "a-widget.css".to_string();
-        a.template_json = r#"{"h":"<div>a</div>"}"#.to_string();
+            .get_mut("outer-box")
+            .expect("outer-box component")
+            .uses_shadow_dom = true;
+        protocol.populate_style_closures(&["index.html"]);
 
-        let state = test_json!({});
         let mut writer = TestWriter::new();
-
         handle(
             &protocol,
-            &state,
+            &test_json!({}),
             &RenderOptions::new("index.html", "/"),
             &mut writer,
         )
         .unwrap();
-
         let html = writer.get_content();
-        let head_end = html.find("</head>").expect("</head> missing");
-        let head_section = &html[..head_end];
-
-        let z_pos = head_section
-            .find(r#"<link rel="stylesheet" href="z-widget.css">"#)
-            .expect("z-widget stylesheet link missing from <head>");
-        let a_pos = head_section
-            .find(r#"<link rel="stylesheet" href="a-widget.css">"#)
-            .expect("a-widget stylesheet link missing from <head>");
+        let head_end = html.find("</head>").expect("head close");
+        let head = &html[..head_end];
+        let dashboard_style = html
+            .find(r#"data-webui-resource="dashboard-page""#)
+            .expect("tree-local dashboard stylesheet");
+        let shadow_start = html
+            .find("<template shadowrootmode=\"open\">")
+            .expect("Shadow template");
+        let dashboard_host = html.find("<dashboard-page").expect("dashboard route host");
+        let dashboard_href = crate::html_encode::encode_safe("/dashboard-page.css");
 
         assert!(
-            z_pos < a_pos,
-            "CSS <link> tags must follow document order (z-widget before \
-             a-widget), not alphabetical order: {html}"
+            head.contains(&format!(
+                r#"<link rel="preload" as="style" href="{dashboard_href}">"#
+            )),
+            "Shadow-targeted route CSS must start loading from head: {html}"
+        );
+        assert!(
+            !head.contains(r#"data-webui-resource="dashboard-page""#),
+            "Shadow-targeted route CSS must not be applied to Document: {html}"
+        );
+        assert!(
+            shadow_start < dashboard_style && dashboard_style < dashboard_host,
+            "the applying stylesheet must remain inside the owning ShadowRoot: {html}"
         );
     }
 
     #[test]
-    fn test_css_module_emitted_in_component_light_dom() {
-        // CSS module <style> tags are emitted inline in the component's light DOM,
-        // not in <head>. This keeps SSR output lean — only rendered components
-        // get their style definitions.
-        let mut fragments = HashMap::new();
-        fragments.insert(
-            "index.html".to_string(),
-            FragmentList {
-                fragments: vec![
-                    WebUIFragment::raw("<html><head>".to_string()),
-                    structural_fragment("head_end"),
-                    WebUIFragment::raw("</head><body><my-card>".to_string()),
-                    WebUIFragment::component("my-card"),
-                    WebUIFragment::raw("</my-card>".to_string()),
-                    WebUIFragment::raw("</body></html>".to_string()),
-                ],
-                contains_boundary: false,
-            },
+    fn isolated_shadow_entry_does_not_emit_document_preloads() {
+        let route = WebUiFragmentRoute {
+            path: "/".to_string(),
+            fragment_id: "dashboard-page".to_string(),
+            exact: true,
+            ..Default::default()
+        };
+        let mut protocol = WebUIProtocol::new(HashMap::from([
+            (
+                "outer-box".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<template shadowrootmode=\"open\">"),
+                        structural_fragment("shadow_styles:outer-box"),
+                        WebUIFragment::route_from(route),
+                        WebUIFragment::raw("</template>"),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "dashboard-page".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<main>Dashboard</main>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]));
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
+        for tag in ["outer-box", "dashboard-page"] {
+            protocol
+                .components
+                .entry(tag.to_string())
+                .or_default()
+                .css_href = format!("/{tag}.css");
+        }
+        protocol
+            .components
+            .get_mut("outer-box")
+            .expect("outer-box component")
+            .uses_shadow_dom = true;
+        protocol.populate_style_closures(&["outer-box"]);
+
+        let mut writer = TestWriter::new();
+        handle(
+            &protocol,
+            &test_json!({}),
+            &RenderOptions::new("outer-box", "/"),
+            &mut writer,
+        )
+        .unwrap();
+        let html = writer.get_content();
+
+        assert!(
+            html.starts_with("<template shadowrootmode=\"open\">"),
+            "isolated component output must not be prefixed with document metadata: {html}"
         );
-        fragments.insert(
-            "my-card".to_string(),
-            FragmentList {
-                fragments: vec![WebUIFragment::raw(r#"<p>hi</p>"#.to_string())],
-                contains_boundary: false,
-            },
+        assert!(
+            !html.contains(r#"<link rel="preload""#),
+            "an isolated Shadow entry has no Document head for preloads: {html}"
         );
+        assert!(
+            html.contains(r#"data-webui-resource="dashboard-page""#),
+            "the route stylesheet must still install inside the ShadowRoot: {html}"
+        );
+    }
 
+    #[test]
+    fn routed_shadow_styles_stay_tree_local_and_deduplicate_static_resources() {
+        let route = WebUiFragmentRoute {
+            path: "/".to_string(),
+            fragment_id: "app-shell".to_string(),
+            children: vec![
+                WebUiFragmentRoute {
+                    path: String::new(),
+                    fragment_id: "dashboard-page".to_string(),
+                    exact: true,
+                    ..Default::default()
+                },
+                WebUiFragmentRoute {
+                    path: "details".to_string(),
+                    fragment_id: "detail-page".to_string(),
+                    exact: true,
+                    ..Default::default()
+                },
+            ],
+            ..Default::default()
+        };
+        let fragments = HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<html><head>"),
+                        structural_fragment("head_start"),
+                        structural_fragment("head_end"),
+                        WebUIFragment::raw("</head><body>"),
+                        structural_fragment("body_start"),
+                        WebUIFragment::boundary(0, "index.html", "boundary-0", None),
+                        WebUIFragment::route_from(route),
+                        WebUIFragment::boundary_end(0),
+                        structural_fragment("body_end"),
+                        WebUIFragment::raw("</body></html>"),
+                    ],
+                    contains_boundary: true,
+                },
+            ),
+            (
+                "app-shell".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<template shadowrootmode=\"open\">"),
+                        structural_fragment("shadow_styles:app-shell"),
+                        WebUIFragment::raw("<shared-card"),
+                        structural_fragment("streaming_root:shared-card"),
+                        WebUIFragment::raw(">"),
+                        WebUIFragment::component("shared-card"),
+                        WebUIFragment::raw("</shared-card>"),
+                        WebUIFragment::outlet(),
+                        WebUIFragment::raw("</template>"),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "dashboard-page".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<shared-card"),
+                        structural_fragment("streaming_root:shared-card"),
+                        WebUIFragment::raw(">"),
+                        WebUIFragment::component("shared-card"),
+                        WebUIFragment::raw("</shared-card><main>Dashboard</main>"),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "detail-page".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<main>Detail</main>")],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "shared-card".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<p>Shared</p>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]);
         let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Style);
+        for tag in ["app-shell", "dashboard-page", "detail-page", "shared-card"] {
+            let component = protocol.components.entry(tag.to_string()).or_default();
+            component.css = format!(".{tag}{{display:block}}");
+            component.template_json = r#"{"h":""}"#.to_string();
+        }
         protocol
             .components
-            .entry("my-card".to_string())
-            .or_default()
-            .css = "p{color:red}".to_string();
-        let state = test_json!({});
-        let mut writer = TestWriter::new();
+            .get_mut("app-shell")
+            .expect("app shell component")
+            .uses_shadow_dom = true;
+        protocol.populate_style_closures(&["index.html"]);
 
+        let mut writer = TestWriter::new();
         handle(
             &protocol,
-            &state,
+            &test_json!({}),
             &RenderOptions::new("index.html", "/"),
             &mut writer,
         )
         .unwrap();
-
         let html = writer.get_content();
 
-        // CSS module importmap must be INSIDE the component tag (light DOM)
-        let tag_open = html.find("<my-card>").expect("<my-card> missing");
-        let css_pos = html
-            .find(r#"<script type="importmap""#)
-            .expect("CSS module importmap missing");
-        let tag_close = html.rfind("</my-card>").expect("</my-card> missing");
+        for resource in ["app-shell", "shared-card", "dashboard-page"] {
+            assert_eq!(
+                html.matches(&format!(r#"data-webui-resource="{resource}""#))
+                    .count(),
+                1,
+                "{resource} must install once in the active ShadowRoot: {html}"
+            );
+        }
         assert!(
-            css_pos > tag_open && css_pos < tag_close,
-            "CSS module should be inside component light DOM: {html}"
+            !html.contains(r#"data-webui-resource="detail-page""#),
+            "inactive route CSS must not enter the ShadowRoot: {html}"
+        );
+        let shadow_start = html
+            .find("<template shadowrootmode=\"open\">")
+            .expect("Shadow template");
+        let dashboard_style = html
+            .find(r#"data-webui-resource="dashboard-page""#)
+            .expect("dashboard style");
+        let dashboard_host = html.find("<dashboard-page").expect("dashboard route host");
+        let shadow_end = html.find("</template>").expect("Shadow template close");
+        assert!(
+            shadow_start < dashboard_style
+                && dashboard_style < dashboard_host
+                && dashboard_host < shadow_end,
+            "active route CSS must precede its generated host inside the owning ShadowRoot: {html}"
         );
 
-        // <head> should NOT contain module styles
-        let head_end = html.find("</head>").expect("</head> missing");
+        let protocol = Protocol::new(protocol);
+        let mut streamed = FlushTestWriter::default();
+        WebUIHandler::new()
+            .render_streaming(
+                &protocol,
+                &test_json!({}),
+                &RenderOptions::new("index.html", "/"),
+                &mut streamed,
+            )
+            .unwrap();
+        for resource in ["app-shell", "shared-card"] {
+            assert_eq!(
+                streamed
+                    .output
+                    .matches(&format!(r#"data-webui-resource="{resource}""#))
+                    .count(),
+                1,
+                "streaming must preserve tree-local delivery for {resource}: {}",
+                streamed.output
+            );
+        }
         assert!(
-            css_pos > head_end,
-            "CSS module should not be in <head>: {html}"
+            !streamed
+                .output
+                .contains(r#"data-webui-resource="dashboard-page""#),
+            "route CSS is carried by the streamed checkpoint rather than installed before the route host: {}",
+            streamed.output
+        );
+        assert!(
+            streamed
+                .output
+                .contains(r#""dashboard-page":{"css":".dashboard-page{display:block}""#)
+                && streamed
+                    .output
+                    .contains(r#""dashboard-page":["dashboard-page","shared-card"]"#),
+            "streamed route CSS metadata must preserve tree ownership and cascade order: {}",
+            streamed.output
         );
+        assert!(
+            !streamed
+                .output
+                .contains(r#"data-webui-resource="detail-page""#),
+            "streaming must omit inactive route CSS: {}",
+            streamed.output
+        );
+    }
+
+    #[test]
+    fn document_styles_follow_doctype_before_headless_document_content() {
+        for entry_fragments in [
+            vec![
+                WebUIFragment::raw("<!DOCTYPE html><html><body>"),
+                structural_fragment("body_start"),
+                WebUIFragment::raw("<my-card>"),
+                WebUIFragment::component("my-card"),
+                WebUIFragment::raw("</my-card></body></html>"),
+            ],
+            vec![
+                WebUIFragment::raw("<!doctype html><html><my-card>"),
+                WebUIFragment::component("my-card"),
+                WebUIFragment::raw("</my-card></html>"),
+            ],
+        ] {
+            let mut protocol = WebUIProtocol::new(HashMap::from([
+                (
+                    "index.html".to_string(),
+                    FragmentList {
+                        fragments: entry_fragments,
+                        contains_boundary: false,
+                    },
+                ),
+                (
+                    "my-card".to_string(),
+                    FragmentList {
+                        fragments: vec![WebUIFragment::raw("<p>card</p>")],
+                        contains_boundary: false,
+                    },
+                ),
+            ]));
+            protocol.set_css_strategy(webui_protocol::CssStrategy::Style);
+            let component = protocol
+                .components
+                .entry("my-card".to_string())
+                .or_default();
+            component.css = ".card{color:red}".to_string();
+            component.uses_shadow_dom = false;
+            protocol.populate_style_closures(&["index.html"]);
+
+            let mut writer = TestWriter::new();
+            handle(
+                &protocol,
+                &test_json!({}),
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .expect("render");
+            let html = writer.get_content();
+
+            assert!(
+                html.to_ascii_lowercase().starts_with("<!doctype html>"),
+                "the doctype must remain the first document token: {html}"
+            );
+            let style = html.find("data-webui-resource=\"my-card\"").expect("style");
+            let document = html.find("<html").expect("document root");
+            let component = html.find("<my-card>").expect("component host");
+            assert!(
+                style < document && style < component,
+                "headless document styles must precede document content: {html}"
+            );
+        }
     }
 
     #[test]
-    fn test_css_module_emitted_for_route_components() {
-        // Route components get CSS modules emitted inline in their light DOM.
-        let template = r#"<h1>Dashboard</h1>"#;
+    fn authored_shadow_component_can_render_as_entry_fragment() {
+        let mut protocol = WebUIProtocol::new(HashMap::from([(
+            "my-card".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<template shadowrootmode=\"open\">"),
+                    structural_fragment("shadow_styles:my-card"),
+                    WebUIFragment::raw("<p>card</p></template>"),
+                ],
+                contains_boundary: false,
+            },
+        )]));
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Style);
+        let component = protocol
+            .components
+            .entry("my-card".to_string())
+            .or_default();
+        component.css = ".card{color:red}".to_string();
+        component.uses_shadow_dom = true;
+        protocol.populate_style_closures(&["my-card"]);
+
+        let mut writer = TestWriter::new();
+        handle(
+            &protocol,
+            &test_json!({}),
+            &RenderOptions::new("my-card", "/"),
+            &mut writer,
+        )
+        .expect("render");
+        let html = writer.get_content();
+
+        assert!(html.starts_with("<template shadowrootmode=\"open\"><style "));
+        assert_eq!(html.matches("data-webui-resource=\"my-card\"").count(), 1);
+        assert!(html.ends_with("<p>card</p></template>"));
+    }
+
+    #[test]
+    fn component_style_closures_escape_mixed_case_style_end_tags() {
+        for strategy in [
+            webui_protocol::CssStrategy::Style,
+            webui_protocol::CssStrategy::Module,
+        ] {
+            let mut protocol = WebUIProtocol::new(HashMap::from([
+                (
+                    "index.html".to_string(),
+                    FragmentList {
+                        fragments: vec![
+                            WebUIFragment::raw("<html><head>"),
+                            structural_fragment("head_end"),
+                            WebUIFragment::raw("</head><body><safe-card>"),
+                            WebUIFragment::component("safe-card"),
+                            WebUIFragment::raw("</safe-card></body></html>"),
+                        ],
+                        contains_boundary: false,
+                    },
+                ),
+                (
+                    "safe-card".to_string(),
+                    FragmentList {
+                        fragments: vec![WebUIFragment::raw("<p>Safe</p>")],
+                        contains_boundary: false,
+                    },
+                ),
+            ]));
+            protocol.set_css_strategy(strategy);
+            protocol.components.insert(
+                "safe-card".to_string(),
+                webui_protocol::ComponentData {
+                    css: ".safe{content:'</StYlE>'}".to_string(),
+                    ..Default::default()
+                },
+            );
+            protocol.populate_style_closures(&["index.html"]);
+            let mut writer = TestWriter::new();
+
+            handle(
+                &protocol,
+                &test_json!({}),
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .unwrap();
+
+            let html = writer.get_content();
+            assert!(html.contains(".safe{content:'<\\/StYlE>'}"), "{html}");
+            assert!(!html.contains(".safe{content:'</StYlE>'}"), "{html}");
+        }
+    }
+
+    #[test]
+    fn shadow_closure_supports_link_and_module_ssr_paths() {
+        for strategy in [
+            webui_protocol::CssStrategy::Link,
+            webui_protocol::CssStrategy::Module,
+        ] {
+            let mut protocol = WebUIProtocol::new(HashMap::from([
+                (
+                    "index.html".to_string(),
+                    FragmentList {
+                        fragments: vec![
+                            WebUIFragment::raw("<html><head>".to_string()),
+                            structural_fragment("head_end"),
+                            WebUIFragment::raw("</head><body><my-card>".to_string()),
+                            WebUIFragment::component("my-card"),
+                            WebUIFragment::raw("</my-card></body></html>".to_string()),
+                        ],
+                        contains_boundary: false,
+                    },
+                ),
+                (
+                    "my-card".to_string(),
+                    FragmentList {
+                        fragments: vec![
+                            WebUIFragment::raw("<template shadowrootmode=\"open\">".to_string()),
+                            structural_fragment("shadow_styles:my-card"),
+                            WebUIFragment::raw("<p>card</p></template>".to_string()),
+                        ],
+                        contains_boundary: false,
+                    },
+                ),
+            ]));
+            protocol.set_css_strategy(strategy);
+            let component = protocol
+                .components
+                .entry("my-card".to_string())
+                .or_default();
+            component.css = ".card{color:red}".to_string();
+            component.css_href = "/my-card.css".to_string();
+            component.uses_shadow_dom = true;
+            protocol.populate_style_closures(&["index.html"]);
+
+            let mut writer = TestWriter::new();
+            handle(
+                &protocol,
+                &test_json!({}),
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .unwrap();
+            let html = writer.get_content();
+            match strategy {
+                webui_protocol::CssStrategy::Link => {
+                    let escaped_href = crate::html_encode::encode_safe("/my-card.css");
+                    assert!(html.contains(&format!(
+                        "<template shadowrootmode=\"open\"><link rel=\"stylesheet\" href=\"{escaped_href}\" data-webui-resource=\"my-card\" data-webui-strategy=\"link\">"
+                    )));
+                }
+                webui_protocol::CssStrategy::Module => {
+                    assert!(html.contains(
+                        "<template shadowrootmode=\"open\"><style data-webui-resource=\"my-card\" data-webui-strategy=\"module\">.card{color:red}</style>"
+                    ));
+                    assert_eq!(html.matches("<script type=\"importmap\"").count(), 1);
+                }
+                webui_protocol::CssStrategy::Style => unreachable!(),
+            }
+        }
+    }
 
+    #[test]
+    fn test_module_preloads_emit_in_head_in_compiler_order() {
+        // The whole value of these hints is ordering: preloads are issued in
+        // document order over one connection, so the largest chunk must go
+        // first. The compiler sorts; the handler must not reorder or dedupe.
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
             FragmentList {
                 fragments: vec![
-                    WebUIFragment::raw("<html><head>".to_string()),
+                    WebUIFragment::raw(
+                        r#"<html><head><script type="module" async src="/index.js"></script>"#
+                            .to_string(),
+                    ),
                     structural_fragment("head_end"),
                     WebUIFragment::raw("</head><body>".to_string()),
-                    WebUIFragment::route("/", "dash-page"),
                     structural_fragment("body_end"),
                     WebUIFragment::raw("</body></html>".to_string()),
                 ],
                 contains_boundary: false,
             },
         );
-        fragments.insert(
-            "dash-page".to_string(),
-            FragmentList {
-                fragments: vec![WebUIFragment::raw(template.to_string())],
-                contains_boundary: false,
-            },
-        );
 
         let mut protocol = WebUIProtocol::new(fragments);
-        let comp = protocol
-            .components
-            .entry("dash-page".to_string())
-            .or_default();
-        comp.css = "h1{font-size:2rem}".to_string();
-        comp.template_json = r#"{"h":"<h1>Dashboard</h1>"}"#.to_string();
+        protocol.module_preloads = vec!["/chunk-big.js".to_string(), "/chunk-small.js".to_string()];
+
         let state = test_json!({});
         let mut writer = TestWriter::new();
-
         handle(
             &protocol,
             &state,
@@ -8037,21 +9355,56 @@ mod tests {
         .unwrap();
 
         let html = writer.get_content();
-
+        let head_end = html.find("</head>").expect("</head> missing");
+        let head = &html[..head_end];
         assert!(
-            html.contains(r#""dash-page":"data:text/css,h1{font-size:2rem}""#),
-            "Route component should have CSS module importmap with data: URI: {html}"
+            head.contains(
+                r#"<link rel="modulepreload" href="/chunk-big.js"><link rel="modulepreload" href="/chunk-small.js">"#
+            ),
+            "hints must appear in <head> in the compiler's order: {html}"
         );
+    }
+
+    #[test]
+    fn test_no_module_preloads_emits_nothing() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<html><head>".to_string()),
+                    structural_fragment("head_end"),
+                    WebUIFragment::raw("</head><body>".to_string()),
+                    structural_fragment("body_end"),
+                    WebUIFragment::raw("</body></html>".to_string()),
+                ],
+                contains_boundary: false,
+            },
+        );
+        let protocol = WebUIProtocol::new(fragments);
+
+        let state = test_json!({});
+        let mut writer = TestWriter::new();
+        handle(
+            &protocol,
+            &state,
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        )
+        .unwrap();
+
         assert!(
-            html.contains("<h1>Dashboard</h1>"),
-            "Route component should render content: {html}"
+            !writer.get_content().contains("modulepreload"),
+            "a build without hints must be byte-identical to before"
         );
     }
 
     #[test]
-    fn test_head_css_link_skipped_for_components_without_css() {
-        // Regression: components without CSS files must not get <link> tags
-        // in <head>, otherwise the browser requests a 404.
+    fn test_link_strategy_head_links_follow_document_order() {
+        // Regression for #381: Link-strategy <head> CSS <link> tags must be
+        // emitted in document/traversal order, not alphabetical tag order.
+        // Document order here is <z-widget> then <a-widget>; an alphabetical
+        // sort would (incorrectly) place a-widget first.
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
@@ -8059,9 +9412,11 @@ mod tests {
                 fragments: vec![
                     WebUIFragment::raw("<html><head>".to_string()),
                     structural_fragment("head_end"),
-                    WebUIFragment::raw("</head><body>".to_string()),
-                    WebUIFragment::component("has-css"),
-                    WebUIFragment::component("no-css"),
+                    WebUIFragment::raw("</head><body><z-widget>".to_string()),
+                    WebUIFragment::component("z-widget"),
+                    WebUIFragment::raw("</z-widget><a-widget>".to_string()),
+                    WebUIFragment::component("a-widget"),
+                    WebUIFragment::raw("</a-widget>".to_string()),
                     structural_fragment("body_end"),
                     WebUIFragment::raw("</body></html>".to_string()),
                 ],
@@ -8069,66 +9424,72 @@ mod tests {
             },
         );
         fragments.insert(
-            "has-css".to_string(),
+            "z-widget".to_string(),
             FragmentList {
-                fragments: vec![WebUIFragment::raw("<p>styled</p>".to_string())],
+                fragments: vec![WebUIFragment::raw("<div>z</div>".to_string())],
                 contains_boundary: false,
             },
         );
         fragments.insert(
-            "no-css".to_string(),
+            "a-widget".to_string(),
             FragmentList {
-                fragments: vec![WebUIFragment::raw("<p>plain</p>".to_string())],
+                fragments: vec![WebUIFragment::raw("<div>a</div>".to_string())],
                 contains_boundary: false,
             },
         );
 
         let mut protocol = WebUIProtocol::new(fragments);
         protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
-        protocol.set_dom_strategy(webui_protocol::DomStrategy::Light);
 
-        // Only has-css has an external stylesheet (Link strategy)
-        protocol
+        let z = protocol
             .components
-            .entry("has-css".to_string())
-            .or_default()
-            .css_href = "has-css.css".to_string();
+            .entry("z-widget".to_string())
+            .or_default();
+        z.css_href = "z-widget.css".to_string();
+        z.template_json = r#"{"h":"<div>z</div>"}"#.to_string();
+
+        let a = protocol
+            .components
+            .entry("a-widget".to_string())
+            .or_default();
+        a.css_href = "a-widget.css".to_string();
+        a.template_json = r#"{"h":"<div>a</div>"}"#.to_string();
+        protocol.populate_style_closures(&["index.html"]);
 
         let state = test_json!({});
         let mut writer = TestWriter::new();
 
-        let handler = WebUIHandler::with_plugin(|| {
-            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
-        });
-        handler
-            .handle(
-                &protocol,
-                &state,
-                &RenderOptions::new("index.html", "/"),
-                &mut writer,
-            )
-            .unwrap();
+        handle(
+            &protocol,
+            &state,
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        )
+        .unwrap();
 
         let html = writer.get_content();
+        let head_end = html.find("</head>").expect("</head> missing");
+        let head_section = &html[..head_end];
+
+        let z_pos = head_section
+            .find(r#"<link rel="stylesheet" href="z-widget.css""#)
+            .expect("z-widget stylesheet link missing from <head>");
+        let a_pos = head_section
+            .find(r#"<link rel="stylesheet" href="a-widget.css""#)
+            .expect("a-widget stylesheet link missing from <head>");
+
         assert!(
-            html.contains(r#"<link rel="stylesheet" href="has-css.css">"#),
-            "Component with CSS should get a <link rel=stylesheet> in <head>: {html}"
-        );
-        assert!(
-            !html.contains("no-css.css"),
-            "Component without CSS must NOT get a <link> in <head>: {html}"
+            z_pos < a_pos,
+            "CSS <link> tags must follow document order (z-widget before \
+             a-widget), not alphabetical order: {html}"
         );
     }
 
     #[test]
-    fn test_reachable_unrendered_components_get_templates_and_css_but_not_inventory() {
-        // Simulates a page where app-shell renders cart-panel, but cart-panel
-        // contains an <if> block with product-card inside. When the condition
-        // is false (empty cart), product-card is NOT rendered — but it IS
-        // reachable from the fragment graph. Its template metadata and CSS module
-        // definition must be in the output so the client can mount it when
-        // the <if> flips true. However, its bit must NOT be set in the
-        // inventory — the inventory tracks what was actually rendered.
+    fn test_css_module_emitted_in_component_light_dom() {
+        // CSS module <style> tags are emitted inline in the component's light DOM,
+        // not in <head>. This keeps SSR output lean — only rendered components
+        // get their style definitions.
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
@@ -8136,75 +9497,240 @@ mod tests {
                 fragments: vec![
                     WebUIFragment::raw("<html><head>".to_string()),
                     structural_fragment("head_end"),
-                    WebUIFragment::raw("</head><body><app-shell>".to_string()),
-                    WebUIFragment::component("app-shell"),
-                    WebUIFragment::raw("</app-shell>".to_string()),
-                    structural_fragment("body_end"),
+                    WebUIFragment::raw("</head><body><my-card>".to_string()),
+                    WebUIFragment::component("my-card"),
+                    WebUIFragment::raw("</my-card>".to_string()),
                     WebUIFragment::raw("</body></html>".to_string()),
                 ],
                 contains_boundary: false,
             },
         );
-        // app-shell contains a cart panel
         fragments.insert(
-            "app-shell".to_string(),
+            "my-card".to_string(),
             FragmentList {
-                fragments: vec![
-                    WebUIFragment::raw("<div>Shell</div>".to_string()),
-                    WebUIFragment::component("cart-panel"),
-                ],
+                fragments: vec![WebUIFragment::raw(r#"<p>hi</p>"#.to_string())],
                 contains_boundary: false,
             },
         );
-        // cart-panel has an <if> block containing product-card
-        fragments.insert(
-            "cart-panel".to_string(),
-            FragmentList {
-                fragments: vec![
-                    WebUIFragment::raw("<aside>".to_string()),
-                    WebUIFragment::if_cond(ConditionExpr::identifier("hasItems"), "cart-items"),
-                    WebUIFragment::raw("</aside>".to_string()),
-                ],
-                contains_boundary: false,
+
+        let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
+        protocol
+            .components
+            .entry("my-card".to_string())
+            .or_default()
+            .css = "p{color:red}".to_string();
+        protocol.populate_style_closures(&["index.html"]);
+        let state = test_json!({});
+        let mut writer = TestWriter::new();
+
+        handle(
+            &protocol,
+            &state,
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        )
+        .unwrap();
+
+        let html = writer.get_content();
+
+        // CSS module importmap must be INSIDE the component tag (light DOM)
+        let tag_open = html.find("<my-card>").expect("<my-card> missing");
+        let css_pos = html
+            .find(r#"<script type="importmap""#)
+            .expect("CSS module importmap missing");
+        let tag_close = html.rfind("</my-card>").expect("</my-card> missing");
+        assert!(
+            css_pos > tag_open && css_pos < tag_close,
+            "CSS module should be inside component light DOM: {html}"
+        );
+
+        // <head> should NOT contain module styles
+        let head_end = html.find("</head>").expect("</head> missing");
+        assert!(
+            css_pos > head_end,
+            "CSS module should not be in <head>: {html}"
+        );
+    }
+
+    #[test]
+    fn styled_protocol_without_closures_is_rejected_for_full_ssr() {
+        let mut protocol = WebUIProtocol::default();
+        protocol.fragments = HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<legacy-card>"),
+                        WebUIFragment::component("legacy-card"),
+                        WebUIFragment::raw("</legacy-card>"),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "legacy-card".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<p>Legacy</p>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]);
+        protocol.components.insert(
+            "legacy-card".to_string(),
+            webui_protocol::ComponentData {
+                css: ".legacy{color:red}".to_string(),
+                ..Default::default()
             },
         );
-        // cart-items (if block body) contains product-card
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
+        let mut writer = TestWriter::new();
+
+        let error = handle(
+            &protocol,
+            &test_json!({}),
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        )
+        .expect_err("styled protocols require closure metadata");
+        assert!(error
+            .to_string()
+            .contains("component style closure metadata is required"));
+    }
+
+    #[test]
+    fn test_css_module_emitted_for_route_components() {
+        // Route components get CSS modules emitted inline in their light DOM.
+        let template = r#"<h1>Dashboard</h1>"#;
+
+        let mut fragments = HashMap::new();
         fragments.insert(
-            "cart-items".to_string(),
+            "index.html".to_string(),
             FragmentList {
-                fragments: vec![WebUIFragment::component("product-card")],
+                fragments: vec![
+                    WebUIFragment::raw("<html><head>".to_string()),
+                    structural_fragment("head_end"),
+                    WebUIFragment::raw("</head><body>".to_string()),
+                    WebUIFragment::route("/", "dash-page"),
+                    structural_fragment("body_end"),
+                    WebUIFragment::raw("</body></html>".to_string()),
+                ],
                 contains_boundary: false,
             },
         );
         fragments.insert(
-            "product-card".to_string(),
+            "dash-page".to_string(),
             FragmentList {
-                fragments: vec![WebUIFragment::raw("<div>Card</div>".to_string())],
+                fragments: vec![WebUIFragment::raw(template.to_string())],
                 contains_boundary: false,
             },
         );
 
         let mut protocol = WebUIProtocol::new(fragments);
-        protocol.initial_state_strategy = InitialStateStrategy::Components as i32;
-        protocol.component_asset_style_preloads = vec![ComponentAssetStylePreload {
-            root: "lazy-panel".to_string(),
-            style_hrefs: vec!["/assets/lazy-panel-e5f6a7b8.css".to_string()],
-        }];
-        for name in ["app-shell", "cart-panel", "product-card"] {
-            let comp = protocol.components.entry(name.to_string()).or_default();
-            comp.template_json = format!(r#"{{"h":"<div class=\"{name}\"></div>"}}"#);
-            comp.css = format!(".{name}{{display:block}}");
-            if name == "cart-panel" {
-                comp.hydration_mode = StateProjectionMode::Keys as i32;
-                comp.hydration_keys = vec!["hasItems".to_string()];
-            }
-            if name == "product-card" {
-                comp.template_functions = r#"[function(v,s){return !!v("ready",s)}]"#.to_string();
-            }
-        }
-
-        // Render with hasItems=false — product-card should NOT be rendered
-        let state = test_json!({ "hasItems": false });
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
+        let comp = protocol
+            .components
+            .entry("dash-page".to_string())
+            .or_default();
+        comp.css = "h1{font-size:2rem}".to_string();
+        comp.template_json = r#"{"h":"<h1>Dashboard</h1>"}"#.to_string();
+        protocol.populate_style_closures(&["index.html"]);
+        let state = test_json!({});
+        let mut writer = TestWriter::new();
+
+        handle(
+            &protocol,
+            &state,
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        )
+        .unwrap();
+
+        let html = writer.get_content();
+
+        assert!(
+            html.contains(r#""dash-page":"data:text/css,h1{font-size:2rem}""#),
+            "Route component should have CSS module importmap with data: URI: {html}"
+        );
+        assert!(
+            html.contains("<h1>Dashboard</h1>"),
+            "Route component should render content: {html}"
+        );
+        let fallback = html
+            .find(r#"data-webui-resource="dash-page" data-webui-strategy="module""#)
+            .expect("route Module fallback");
+        let host_open = html.find("<dash-page>").expect("route host");
+        let content = html.find("<h1>Dashboard</h1>").expect("route content");
+        assert!(
+            fallback < host_open && host_open < content,
+            "the Module fallback must precede the generated Light route host: {html}"
+        );
+        // The importmap belongs to the component's own Light DOM, never to the
+        // route element. The router only treats `<link>`/`<style>` markers as
+        // route-owned styles, so an importmap emitted as a direct route child
+        // would be cleared on navigation and mistaken for the mounted
+        // component. Keep it inside the host so that can never happen.
+        let importmap = html
+            .find(r#"<script type="importmap""#)
+            .expect("route CSS module importmap");
+        assert!(
+            host_open < importmap,
+            "the CSS module importmap must live inside the route host, not as a route child: {html}"
+        );
+    }
+
+    #[test]
+    fn test_head_css_link_skipped_for_components_without_css() {
+        // Regression: components without CSS files must not get <link> tags
+        // in <head>, otherwise the browser requests a 404.
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<html><head>".to_string()),
+                    structural_fragment("head_end"),
+                    WebUIFragment::raw("</head><body>".to_string()),
+                    WebUIFragment::component("has-css"),
+                    WebUIFragment::component("no-css"),
+                    structural_fragment("body_end"),
+                    WebUIFragment::raw("</body></html>".to_string()),
+                ],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "has-css".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::raw("<p>styled</p>".to_string())],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "no-css".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::raw("<p>plain</p>".to_string())],
+                contains_boundary: false,
+            },
+        );
+
+        let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
+
+        // Only has-css has an external stylesheet (Link strategy)
+        protocol
+            .components
+            .entry("has-css".to_string())
+            .or_default()
+            .css_href = "has-css.css".to_string();
+        protocol
+            .components
+            .entry("no-css".to_string())
+            .or_default()
+            .template_json = r#"{"h":"<p>plain</p>"}"#.to_string();
+        protocol.populate_style_closures(&["index.html"]);
+
+        let state = test_json!({});
         let mut writer = TestWriter::new();
 
         let handler = WebUIHandler::with_plugin(|| {
@@ -8220,29 +9746,118 @@ mod tests {
             .unwrap();
 
         let html = writer.get_content();
-
         assert!(
-            html.contains(r#"<script type="application/json" id="webui-data">"#),
-            "non-executable SSR metadata should be emitted in the webui-data block: {html}"
+            html.contains(r#"<link rel="stylesheet" href="has-css.css""#),
+            "Component with CSS should get a <link rel=stylesheet> in <head>: {html}"
         );
         assert!(
-            html.contains(
-                r#"<script type="application/json" id="webui-component-assets">{"lazy-panel":["/assets/lazy-panel-e5f6a7b8.css"]}</script>"#
-            ),
-            "component asset preload metadata should be emitted as inert head JSON: {html}"
+            !html.contains("no-css.css"),
+            "Component without CSS must NOT get a <link> in <head>: {html}"
         );
-        let asset_manifest = html
-            .find(r#"id="webui-component-assets""#)
-            .expect("component asset manifest must exist");
-        let head_end = html.find("</head>").expect("head must close");
-        assert!(
-            asset_manifest < head_end,
-            "component asset metadata must be available before body interaction: {html}"
+    }
+
+    #[test]
+    fn test_reachable_unrendered_components_get_templates_and_css_but_not_inventory() {
+        // Simulates a page where app-shell renders cart-panel, but cart-panel
+        // contains an <if> block with product-card inside. When the condition
+        // is false (empty cart), product-card is NOT rendered — but it IS
+        // reachable from the fragment graph. Its template metadata and CSS module
+        // definition must be in the output so the client can mount it when
+        // the <if> flips true. However, its bit must NOT be set in the
+        // inventory — the inventory tracks what was actually rendered.
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<html><head>".to_string()),
+                    structural_fragment("head_end"),
+                    WebUIFragment::raw("</head><body><app-shell>".to_string()),
+                    WebUIFragment::component("app-shell"),
+                    WebUIFragment::raw("</app-shell>".to_string()),
+                    structural_fragment("body_end"),
+                    WebUIFragment::raw("</body></html>".to_string()),
+                ],
+                contains_boundary: false,
+            },
         );
-        assert_eq!(
-            html.matches(r#"id="webui-component-assets""#).count(),
-            1,
-            "component asset metadata must be emitted once: {html}"
+        // app-shell contains a cart panel
+        fragments.insert(
+            "app-shell".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<div>Shell</div>".to_string()),
+                    WebUIFragment::component("cart-panel"),
+                ],
+                contains_boundary: false,
+            },
+        );
+        // cart-panel has an <if> block containing product-card
+        fragments.insert(
+            "cart-panel".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<aside>".to_string()),
+                    WebUIFragment::if_cond(ConditionExpr::identifier("hasItems"), "cart-items"),
+                    WebUIFragment::raw("</aside>".to_string()),
+                ],
+                contains_boundary: false,
+            },
+        );
+        // cart-items (if block body) contains product-card
+        fragments.insert(
+            "cart-items".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("product-card")],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "product-card".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::raw("<div>Card</div>".to_string())],
+                contains_boundary: false,
+            },
+        );
+
+        let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
+        protocol.initial_state_strategy = InitialStateStrategy::Components as i32;
+        for name in ["app-shell", "cart-panel", "product-card"] {
+            let comp = protocol.components.entry(name.to_string()).or_default();
+            comp.template_json = format!(r#"{{"h":"<div class=\"{name}\"></div>"}}"#);
+            comp.css = format!(".{name}{{display:block}}");
+            if name == "cart-panel" {
+                comp.hydration_mode = StateProjectionMode::Keys as i32;
+                comp.hydration_keys = vec!["hasItems".to_string()];
+            }
+            if name == "product-card" {
+                comp.template_functions = r#"[function(v,s){return !!v("ready",s)}]"#.to_string();
+            }
+        }
+        protocol.populate_style_closures(&["index.html"]);
+
+        // Render with hasItems=false — product-card should NOT be rendered
+        let state = test_json!({ "hasItems": false });
+        let mut writer = TestWriter::new();
+
+        let handler = WebUIHandler::with_plugin(|| {
+            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+        });
+        handler
+            .handle(
+                &protocol,
+                &state,
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .unwrap();
+
+        let html = writer.get_content();
+
+        assert!(
+            html.contains(r#"<script type="application/json" id="webui-data">"#),
+            "non-executable SSR metadata should be emitted in the webui-data block: {html}"
         );
         assert!(
             html.contains(r#""state":{"hasItems":false}"#),
@@ -8385,7 +10000,16 @@ mod tests {
             },
         )]);
         let mut protocol = WebUIProtocol::new(fragments);
-        protocol.dom_strategy = webui_protocol::DomStrategy::Light as i32;
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
+        for root in ["lazy-panel", "secondary-panel"] {
+            protocol.components.insert(
+                root.to_string(),
+                webui_protocol::ComponentData {
+                    uses_shadow_dom: false,
+                    ..Default::default()
+                },
+            );
+        }
         protocol.component_asset_style_preloads = vec![
             ComponentAssetStylePreload {
                 root: "lazy-panel".to_string(),
@@ -8461,12 +10085,14 @@ mod tests {
         );
 
         let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
         let comp = protocol
             .components
             .entry("dash-page".to_string())
             .or_default();
         comp.css = "h1{font-size:2rem}".to_string();
         comp.template_json = r#"{"h":"<h1>Dashboard</h1>"}"#.to_string();
+        protocol.populate_style_closures(&["index.html"]);
         let state = test_json!({});
         let mut writer = TestWriter::new();
 
@@ -8482,7 +10108,7 @@ mod tests {
 
         assert!(
             html.contains(
-                r#"<script type="importmap" nonce="test-nonce-123">{"imports":{"dash-page":"data:text/css,h1{font-size:2rem}"}}</script>"#
+                r#"<script type="importmap" nonce="test-nonce-123" data-webui-resource="dash-page">{"imports":{"dash-page":"data:text/css,h1{font-size:2rem}"}}</script>"#
             ),
             "CSS module importmap tag should include nonce attribute in canonical order: {html}"
         );
@@ -8536,11 +10162,13 @@ mod tests {
         );
 
         let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
         for name in ["app-shell", "product-card"] {
             let comp = protocol.components.entry(name.to_string()).or_default();
             comp.template_json = format!(r#"{{"h":"<div class=\"{name}\"></div>"}}"#);
             comp.css = format!(".{name}{{display:block}}");
         }
+        protocol.populate_style_closures(&["index.html"]);
 
         // Render with hasItems=false so product-card is reachable but not
         // rendered, forcing its CSS module emission through the body_end path.
@@ -8563,7 +10191,7 @@ mod tests {
 
         assert!(
             html.contains(
-                r#"<script type="importmap" nonce="test-nonce-123">{"imports":{"product-card":"data:text/css,.product-card{display:block}"}}</script>"#
+                r#"<script type="importmap" nonce="test-nonce-123" data-webui-resource="product-card">{"imports":{"product-card":"data:text/css,.product-card{display:block}"}}</script>"#
             ),
             "Unrendered (body_end) CSS module importmap tag should include nonce attribute in canonical order: {html}"
         );
@@ -10198,4 +11826,1855 @@ mod tests {
             "outer `item` must stay bound to its iteration value across the inner loop's save/restore"
         );
     }
+    #[derive(Default)]
+    struct FlushTestWriter {
+        output: String,
+        flushes: Vec<usize>,
+        fail_flush: bool,
+        fail_flush_at: Option<usize>,
+        flush_attempts: usize,
+        ended: bool,
+    }
+
+    impl ResponseWriter for FlushTestWriter {
+        fn write(&mut self, content: &str) -> Result<()> {
+            self.output.push_str(content);
+            Ok(())
+        }
+
+        fn end(&mut self) -> Result<()> {
+            self.ended = true;
+            Ok(())
+        }
+    }
+
+    impl FlushWriter for FlushTestWriter {
+        fn flush(&mut self) -> Result<()> {
+            let attempt = self.flush_attempts;
+            self.flush_attempts += 1;
+            if self.fail_flush || self.fail_flush_at == Some(attempt) {
+                return Err(HandlerError::ClientDisconnected);
+            }
+            self.flushes.push(self.output.len());
+            Ok(())
+        }
+    }
+
+    fn streaming_protocol(with_boundaries: bool) -> Protocol {
+        streaming_protocol_with_state_strategy(with_boundaries, InitialStateStrategy::Components)
+    }
+
+    fn streaming_protocol_with_state_strategy(
+        with_boundaries: bool,
+        state_strategy: InitialStateStrategy,
+    ) -> Protocol {
+        let mut fragments = HashMap::new();
+        let mut entry = vec![
+            WebUIFragment::raw("<!DOCTYPE html><html><HEAD data-shell=\"main\">"),
+            structural_fragment("head_start"),
+            WebUIFragment::raw("<script type=\"module\" async src=\"/index.js\"></script>"),
+            structural_fragment("head_end"),
+            WebUIFragment::raw("</HEAD><body>"),
+            structural_fragment("body_start"),
+        ];
+        if with_boundaries {
+            entry.push(WebUIFragment::boundary(0, "index.html", "boundary-0", None));
+        }
+        entry.extend([
+            WebUIFragment::raw("<my-counter"),
+            structural_fragment("streaming_root:my-counter"),
+            WebUIFragment::raw(">"),
+            WebUIFragment::component("my-counter"),
+            WebUIFragment::raw("</my-counter>"),
+        ]);
+        if with_boundaries {
+            entry.push(WebUIFragment::boundary_end(0));
+        }
+        entry.extend([
+            WebUIFragment::raw("<app-footer>slow tail</app-footer>"),
+            structural_fragment("body_end"),
+            WebUIFragment::raw("</body></html>"),
+        ]);
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: entry,
+                contains_boundary: with_boundaries,
+            },
+        );
+        fragments.insert(
+            "my-counter".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::raw("<button>Count</button>")],
+                contains_boundary: false,
+            },
+        );
+
+        let mut document = WebUIProtocol::new(fragments);
+        document.initial_state_strategy = state_strategy as i32;
+        document.components.insert(
+            "my-counter".to_string(),
+            webui_protocol::ComponentData {
+                template_json: r#"{"h":"<button>Count</button>","th":1}"#.to_string(),
+                template_functions: "[function(){return true}]".to_string(),
+                hydration_mode: StateProjectionMode::Keys as i32,
+                hydration_keys: vec!["count".to_string()],
+                ..Default::default()
+            },
+        );
+        Protocol::new(document)
+    }
+
+    #[test]
+    fn handler_error_stays_small() {
+        // Boxing the cold `StreamingBoundary` payload keeps `HandlerError` — and
+        // therefore `Result<(), HandlerError>` threaded through the hot legacy
+        // render path — down to a single `String`-sized payload plus a
+        // discriminant word. If the boundary payload is un-boxed back to
+        // `{ signal, reason }` it grows to two `String`s (48-byte payload) and
+        // this fails.
+        assert!(
+            std::mem::size_of::<HandlerError>()
+                <= std::mem::size_of::<String>() + std::mem::size_of::<usize>(),
+            "HandlerError grew to {} bytes",
+            std::mem::size_of::<HandlerError>()
+        );
+    }
+
+    #[test]
+    fn streaming_render_flushes_bootstrap_before_slow_tail_and_emits_terminal() {
+        let protocol = streaming_protocol(true);
+        let handler = WebUIHandler::with_plugin(|| {
+            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+        });
+        let state = test_json!({ "count": 1, "serverOnly": "secret" });
+        let mut writer = FlushTestWriter::default();
+
+        handler
+            .render_streaming(
+                &protocol,
+                &state,
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .unwrap();
+
+        assert!(writer.ended);
+        assert_eq!(
+            writer.flushes.len(),
+            3,
+            "bootstrap, boundary commit, and one coalesced terminal-tail flush"
+        );
+        let boundary_flush = &writer.output[writer.flushes[0]..writer.flushes[1]];
+        assert!(boundary_flush.contains("<!--wb:0-->"));
+        assert!(boundary_flush.contains("<!--/wb:0-->"));
+        assert!(
+            boundary_flush.contains(r#"[2,0,0,0,{"declarationId":0,"componentStyles":"#),
+            "boundary flush: {boundary_flush}"
+        );
+        assert!(boundary_flush.contains(r#""inventory":"01","state":{"count":1}"#));
+        assert!(boundary_flush.contains(r#""templates":{"my-counter":"#));
+        assert!(!boundary_flush.contains("slow tail"));
+        assert!(!writer.output.contains("id=\"webui-data\""));
+        // The terminal flush commits the scriptless tail without manufacturing
+        // another state/template projection.
+        let terminal_flush = &writer.output[writer.flushes[1]..writer.flushes[2]];
+        assert!(terminal_flush.contains("slow tail"));
+        assert!(writer.output.contains("[2,1,4,0,{}]"));
+        assert!(!writer.output.contains("[2,1,0,1,"));
+        assert!(!writer.output.contains("[2,2,4,0,{}]"));
+
+        let marker = writer
+            .output
+            .find(STREAMING_MARKER)
+            .expect("streaming marker");
+        let attributed_head = writer
+            .output
+            .find("<HEAD data-shell=\"main\">")
+            .expect("attributed mixed-case head");
+        let authored_script = writer
+            .output
+            .find("src=\"/index.js\"")
+            .expect("entry script");
+        assert!(attributed_head < marker && marker < authored_script);
+    }
+
+    #[test]
+    fn streaming_terminal_tail_never_resends_full_state() {
+        let protocol = streaming_protocol_with_state_strategy(true, InitialStateStrategy::Full);
+        let handler = WebUIHandler::with_plugin(|| {
+            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+        });
+        let mut writer = FlushTestWriter::default();
+
+        handler
+            .render_streaming(
+                &protocol,
+                &test_json!({ "count": 1, "serverOnly": "secret" }),
+                &RenderOptions::new("index.html", "/").with_body_inject(" \n"),
+                &mut writer,
+            )
+            .unwrap();
+
+        assert_eq!(
+            writer.output.matches("serverOnly").count(),
+            1,
+            "full state belongs only to the interactive boundary"
+        );
+        assert!(writer.output.contains("[2,1,4,0,{}]"));
+    }
+
+    /// Streaming must place the reserved-state injects exactly where the
+    /// ordinary render does, so a host can switch modes without its
+    /// boundary HTML moving.
+    #[test]
+    fn state_inject_placement_matches_between_render_modes() {
+        let entry = vec![
+            WebUIFragment::raw("<html><head>"),
+            structural_fragment("head_start"),
+            structural_fragment("head_end"),
+            WebUIFragment::raw("</head><body>"),
+            structural_fragment("body_start"),
+            WebUIFragment::raw("<main>static</main>"),
+            structural_fragment("body_end"),
+            WebUIFragment::raw("</body></html>"),
+        ];
+        let fragments = HashMap::from([(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: entry,
+                contains_boundary: false,
+            },
+        )]);
+        let protocol = Protocol::new(WebUIProtocol::new(fragments));
+        let state = test_json!({
+            "$webui": {
+                "headEnd": "<meta name=he>",
+                "bodyStart": "<span id=bs></span>",
+                "bodyEnd": "<script>be</script>",
+            }
+        });
+        let options = RenderOptions::new("index.html", "/");
+
+        let mut ordinary = TestWriter::new();
+        WebUIHandler::new()
+            .render(&protocol, &state, &options, &mut ordinary)
+            .unwrap();
+        let ordinary_html = ordinary.get_content().to_string();
+
+        let mut streamed = FlushTestWriter::default();
+        WebUIHandler::new()
+            .render_streaming(&protocol, &state, &options, &mut streamed)
+            .unwrap();
+        let streamed_html = &streamed.output;
+
+        for html in [ordinary_html.as_str(), streamed_html.as_str()] {
+            let head_end = html.find("<meta name=he>").expect("headEnd missing");
+            let head_close = html.find("</head>").expect("</head> missing");
+            let body_start = html.find("<span id=bs></span>").expect("bodyStart missing");
+            let main = html.find("<main>static</main>").expect("content missing");
+            let body_end = html.find("<script>be</script>").expect("bodyEnd missing");
+            let body_close = html.find("</body>").expect("</body> missing");
+            assert!(head_end < head_close, "headEnd misplaced: {html}");
+            assert!(body_start < main, "bodyStart misplaced: {html}");
+            assert!(
+                main < body_end && body_end < body_close,
+                "bodyEnd misplaced: {html}"
+            );
+        }
+
+        // The streaming response still terminates with its single empty
+        // terminal record: an inject must not perturb the record stream.
+        assert!(
+            streamed_html.contains(",4,0,{}]"),
+            "streaming must still end in one empty terminal record: {streamed_html}"
+        );
+    }
+
+    #[test]
+    fn streaming_state_inject_emits_and_strips_reserved_key() {
+        let entry = vec![
+            WebUIFragment::raw("<html><head>"),
+            structural_fragment("head_start"),
+            structural_fragment("head_end"),
+            WebUIFragment::raw("</head><body>"),
+            structural_fragment("body_start"),
+            structural_fragment("body_end"),
+            WebUIFragment::raw("</body></html>"),
+        ];
+        let fragments = HashMap::from([(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: entry,
+                contains_boundary: false,
+            },
+        )]);
+        let protocol = Protocol::new(WebUIProtocol::new(fragments));
+        let state = test_json!({ "$webui": { "bodyEnd": "<script>be</script>" } });
+
+        let mut writer = FlushTestWriter::default();
+        WebUIHandler::new()
+            .render_streaming(
+                &protocol,
+                &state,
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .unwrap();
+        assert!(writer.output.contains("<script>be</script>"));
+        assert!(!writer.output.contains("$webui"));
+    }
+
+    #[test]
+    fn static_streaming_document_uses_one_empty_terminal_record() {
+        let fragments = HashMap::from([(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<html><head>"),
+                    structural_fragment("head_start"),
+                    structural_fragment("head_end"),
+                    WebUIFragment::raw("</head><body>"),
+                    structural_fragment("body_start"),
+                    WebUIFragment::raw("<main>static</main>"),
+                    structural_fragment("body_end"),
+                    WebUIFragment::raw("</body></html>"),
+                ],
+                contains_boundary: false,
+            },
+        )]);
+        let protocol = Protocol::new(WebUIProtocol::new(fragments));
+        let mut writer = FlushTestWriter::default();
+
+        WebUIHandler::new()
+            .render_streaming(
+                &protocol,
+                &test_json!({ "serverOnly": "secret" }),
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .unwrap();
+
+        assert_eq!(writer.flushes.len(), 1);
+        assert!(writer.output.contains(STREAMING_MARKER));
+        assert!(writer.output.contains("[2,0,4,0,{}]"));
+        assert!(!writer.output.contains("serverOnly"));
+        assert!(!writer.output.contains("id=\"webui-data\""));
+        assert!(!writer.output.contains("<!--wb:"));
+    }
+
+    #[test]
+    fn streaming_render_emits_nonce_and_functions_before_sentinel() {
+        let protocol = streaming_protocol(true);
+        let handler = WebUIHandler::with_plugin(|| {
+            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+        });
+        let mut writer = FlushTestWriter::default();
+        handler
+            .render_streaming(
+                &protocol,
+                &test_json!({ "count": 1 }),
+                &RenderOptions::new("index.html", "/").with_nonce("test-nonce-123"),
+                &mut writer,
+            )
+            .unwrap();
+
+        let boundary_end = writer.output.find("<!--/wb:0-->").expect("end marker");
+        let envelope = writer.output[boundary_end..]
+            .find("data-webui-boundary nonce=\"test-nonce-123\"")
+            .map(|index| index + boundary_end)
+            .expect("nonce-bearing envelope");
+        let functions = writer
+            .output
+            .find("templateFns")
+            .expect("function side channel");
+        let sentinel = writer
+            .output
+            .find("<webui-hydrate>")
+            .expect("hydration sentinel");
+        assert!(boundary_end < envelope && envelope < functions && functions < sentinel);
+        assert!(writer.output.contains("<script nonce=\"test-nonce-123\">"));
+    }
+
+    #[test]
+    fn streaming_render_rejects_out_of_order_and_nested_boundaries() {
+        fn protocol(boundaries: Vec<WebUIFragment>) -> Protocol {
+            let mut fragments = vec![structural_fragment("head_start")];
+            fragments.extend(boundaries);
+            let fragments = HashMap::from([(
+                "index.html".to_string(),
+                FragmentList {
+                    fragments,
+                    contains_boundary: true,
+                },
+            )]);
+            Protocol::new(WebUIProtocol::new(fragments))
+        }
+
+        let handler = WebUIHandler::new();
+        let mut writer = FlushTestWriter::default();
+        let result = handler.render_streaming(
+            &protocol(vec![WebUIFragment::boundary_end(0)]),
+            &test_json!({}),
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        );
+        match result {
+            Err(HandlerError::StreamingBoundary(err)) => {
+                assert_eq!(err.signal, "boundary");
+                assert!(err.reason.contains("no active occurrence"));
+            }
+            other => panic!("expected ordered-boundary error, got {other:?}"),
+        }
+
+        let mut writer = FlushTestWriter::default();
+        let result = handler.render_streaming(
+            &protocol(vec![
+                WebUIFragment::boundary(0, "index.html", "boundary-0", None),
+                WebUIFragment::boundary(1, "index.html", "boundary-1", None),
+            ]),
+            &test_json!({}),
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        );
+        assert!(matches!(result, Err(HandlerError::StreamingBoundary(_))));
+    }
+
+    #[test]
+    fn streaming_render_propagates_boundary_flush_disconnect() {
+        let protocol = streaming_protocol(true);
+        let handler = WebUIHandler::new();
+        let mut writer = FlushTestWriter {
+            fail_flush: true,
+            ..FlushTestWriter::default()
+        };
+        let result = handler.render_streaming(
+            &protocol,
+            &test_json!({}),
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        );
+        assert!(matches!(result, Err(HandlerError::ClientDisconnected)));
+        assert!(!writer.ended);
+    }
+
+    #[test]
+    fn streaming_render_requires_structural_head_start_before_writing() {
+        let fragments = HashMap::from([(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw(
+                        "<html><HEAD data-shell=\"main\"><script src=\"/early.js\"></script>",
+                    ),
+                    structural_fragment("head_end"),
+                    WebUIFragment::raw("</HEAD><body>"),
+                    structural_fragment("body_start"),
+                    structural_fragment("body_end"),
+                ],
+                contains_boundary: false,
+            },
+        )]);
+        let protocol = Protocol::new(WebUIProtocol::new(fragments));
+        let mut writer = FlushTestWriter::default();
+
+        let result = WebUIHandler::new().render_streaming(
+            &protocol,
+            &test_json!({}),
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        );
+
+        assert!(matches!(
+            result,
+            Err(HandlerError::MissingStreamingHeadStart { before: "head_end" })
+        ));
+        assert_eq!(
+            writer.output,
+            "<html><HEAD data-shell=\"main\"><script src=\"/early.js\"></script>"
+        );
+        assert!(writer.flushes.is_empty());
+        assert!(!writer.ended);
+    }
+
+    #[test]
+    fn streaming_render_rejects_duplicate_head_start() {
+        let fragments = HashMap::from([(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<html><head>"),
+                    structural_fragment("head_start"),
+                    structural_fragment("head_start"),
+                    structural_fragment("head_end"),
+                    WebUIFragment::raw("</head><body>"),
+                    structural_fragment("body_start"),
+                    structural_fragment("body_end"),
+                ],
+                contains_boundary: false,
+            },
+        )]);
+        let protocol = Protocol::new(WebUIProtocol::new(fragments));
+        let mut writer = FlushTestWriter::default();
+
+        let result = WebUIHandler::new().render_streaming(
+            &protocol,
+            &test_json!({}),
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        );
+
+        assert!(matches!(
+            result,
+            Err(HandlerError::DuplicateStreamingHeadStart)
+        ));
+        assert_eq!(writer.output.matches(STREAMING_MARKER).count(), 1);
+        assert!(writer.flushes.is_empty());
+    }
+
+    #[test]
+    fn legacy_render_is_byte_identical_when_boundary_signals_are_present() {
+        let handler = WebUIHandler::with_plugin(|| {
+            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+        });
+        let state = test_json!({
+            "count": 1,
+            "head_start": "must not render",
+            "boundary_start:0": "must not render",
+            "boundary_end:0": "must not render",
+        });
+        let mut with_boundaries = TestWriter::new();
+        let mut without_boundaries = TestWriter::new();
+        handler
+            .render(
+                &streaming_protocol(true),
+                &state,
+                &RenderOptions::new("index.html", "/"),
+                &mut with_boundaries,
+            )
+            .unwrap();
+        handler
+            .render(
+                &streaming_protocol(false),
+                &state,
+                &RenderOptions::new("index.html", "/"),
+                &mut without_boundaries,
+            )
+            .unwrap();
+        assert_eq!(
+            with_boundaries.get_content(),
+            without_boundaries.get_content()
+        );
+    }
+
+    #[test]
+    fn parser_head_attributes_preserve_legacy_ordinary_render_bytes() {
+        for source in [
+            r#"<html><head data-theme="dark"><title>T</title></head><body>x</body></html>"#,
+            r#"<html><head data-theme="{{theme}}"><title>T</title></head><body>x</body></html>"#,
+        ] {
+            let mut parser = HtmlParser::new();
+            parser
+                .parse("index.html", source)
+                .expect("parse head fixture");
+            let protocol = Protocol::new(WebUIProtocol::new(parser.into_fragment_records()));
+            let mut writer = TestWriter::new();
+            WebUIHandler::new()
+                .render(
+                    &protocol,
+                    &test_json!({ "theme": "light" }),
+                    &RenderOptions::new("index.html", "/"),
+                    &mut writer,
+                )
+                .unwrap();
+
+            assert_eq!(
+                writer.get_content(),
+                "<html><head><title>T</title></head><body>x</body></html>"
+            );
+        }
+    }
+
+    #[test]
+    fn mixed_case_native_tags_preserve_ordinary_bytes_and_stream_structurally() {
+        let source =
+            r#"<html><HEAD data-theme="dark"><title>T</title></HEAD><BODY>x</BODY></html>"#;
+        let mut parser = HtmlParser::new();
+        parser.parse("index.html", source).expect("parse fixture");
+        let protocol = Protocol::new(WebUIProtocol::new(parser.into_fragment_records()));
+
+        let mut ordinary = TestWriter::new();
+        WebUIHandler::new()
+            .render(
+                &protocol,
+                &test_json!({}),
+                &RenderOptions::new("index.html", "/"),
+                &mut ordinary,
+            )
+            .unwrap();
+        assert_eq!(ordinary.get_content(), source);
+
+        let mut streaming = FlushTestWriter::default();
+        WebUIHandler::new()
+            .render_streaming(
+                &protocol,
+                &test_json!({}),
+                &RenderOptions::new("index.html", "/"),
+                &mut streaming,
+            )
+            .unwrap();
+        assert!(streaming.output.contains(r#"<HEAD data-theme="dark">"#));
+        assert!(streaming.output.contains("</HEAD><BODY>x"));
+        let opening = streaming.output.find("<HEAD").expect("mixed-case head");
+        let marker = streaming.output.find(STREAMING_MARKER).expect("marker");
+        let title = streaming.output.find("<title>").expect("title");
+        assert!(opening < marker && marker < title);
+        assert_eq!(streaming.output.matches("data-webui-boundary").count(), 1);
+    }
+
+    /// Only `}}}webui:`-namespaced signals are compiler-owned, so an
+    /// unprefixed `body_end` is ordinary authored content.
+    #[test]
+    fn unnamespaced_signal_is_ordinary_content() {
+        let fragments = HashMap::from([(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<html><head>"),
+                    structural_fragment("head_end"),
+                    WebUIFragment::raw("</head><body>"),
+                    WebUIFragment::signal("body_end".to_string(), false),
+                    structural_fragment("body_end"),
+                    WebUIFragment::raw("</body></html>"),
+                ],
+                contains_boundary: false,
+            },
+        )]);
+        let protocol = Protocol::new(WebUIProtocol::new(fragments));
+        let mut writer = TestWriter::new();
+        WebUIHandler::new()
+            .render(
+                &protocol,
+                &test_json!({ "body_end": "content" }),
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .expect("current protocol must render");
+        assert!(writer.get_content().contains("content"));
+    }
+
+    #[test]
+    fn authored_raw_signal_keys_remain_content_in_both_render_modes() {
+        let source = concat!(
+            "<html><head></head><body>",
+            "{{{head_start}}}|{{{head_end}}}|{{{body_start}}}|{{{body_end}}}|",
+            "{{{boundary_start:0}}}|{{{boundary_end:0}}}|{{{streaming_root:forged}}}",
+            "</body></html>",
+        );
+        let state = test_json!({
+            "head_start": "hs",
+            "head_end": "he",
+            "body_start": "bs",
+            "body_end": "be",
+            "boundary_start:0": "b0s",
+            "boundary_end:0": "b0e",
+            "streaming_root:forged": "root",
+        });
+        let mut parser = HtmlParser::new();
+        parser.parse("index.html", source).expect("parse fixture");
+        let protocol = Protocol::new(WebUIProtocol::new(parser.into_fragment_records()));
+        let expected = "<html><head></head><body>hs|he|bs|be|b0s|b0e|root</body></html>";
+
+        let mut ordinary = TestWriter::new();
+        WebUIHandler::new()
+            .render(
+                &protocol,
+                &state,
+                &RenderOptions::new("index.html", "/"),
+                &mut ordinary,
+            )
+            .unwrap();
+        assert_eq!(ordinary.get_content(), expected);
+
+        let mut streaming = FlushTestWriter::default();
+        WebUIHandler::new()
+            .render_streaming(
+                &protocol,
+                &state,
+                &RenderOptions::new("index.html", "/"),
+                &mut streaming,
+            )
+            .unwrap();
+        assert!(streaming.output.contains("<body>hs|he|bs|be|b0s|b0e|root"));
+        assert!(!streaming.output.contains("<!--wb:"));
+        assert_eq!(streaming.output.matches(STREAMING_MARKER).count(), 1);
+        assert_eq!(streaming.output.matches("data-webui-boundary").count(), 1);
+    }
+
+    #[test]
+    fn streaming_rejects_structural_signals_after_terminal() {
+        let fragments = HashMap::from([(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<html><head>"),
+                    structural_fragment("head_start"),
+                    structural_fragment("head_end"),
+                    WebUIFragment::raw("</head><body>"),
+                    structural_fragment("body_start"),
+                    structural_fragment("body_end"),
+                    WebUIFragment::raw("</body>"),
+                    structural_fragment("boundary_start:0"),
+                    WebUIFragment::raw("</html>"),
+                ],
+                contains_boundary: false,
+            },
+        )]);
+        let protocol = Protocol::new(WebUIProtocol::new(fragments));
+        let mut streaming = FlushTestWriter::default();
+        let result = WebUIHandler::new().render_streaming(
+            &protocol,
+            &test_json!({}),
+            &RenderOptions::new("index.html", "/"),
+            &mut streaming,
+        );
+
+        match result {
+            Err(HandlerError::StreamingBoundary(error)) => {
+                assert_eq!(error.signal, "boundary_start:0");
+                assert!(
+                    error
+                        .reason
+                        .contains("structural signal arrived after body_end"),
+                    "reason: {}",
+                    error.reason
+                );
+            }
+            other => panic!("expected post-terminal rejection, got {other:?}"),
+        }
+        assert_eq!(
+            streaming.output,
+            "<html><head><meta name=\"webui-streaming\" content=\"1\"></head><body></body>"
+        );
+        assert!(!streaming.output.contains("<!--wb:0-->"));
+
+        let mut ordinary = TestWriter::new();
+        WebUIHandler::new()
+            .render(
+                &protocol,
+                &test_json!({}),
+                &RenderOptions::new("index.html", "/"),
+                &mut ordinary,
+            )
+            .unwrap();
+        assert_eq!(
+            ordinary.get_content(),
+            "<html><head></head><body></body></html>"
+        );
+    }
+
+    fn disjoint_streaming_protocol_ext(
+        hosts: &[&str],
+        emit_root_signal: bool,
+        include_styles: bool,
+    ) -> Protocol {
+        let mut fragments = HashMap::new();
+        let mut entry = vec![
+            WebUIFragment::raw("<!DOCTYPE html><html><head>"),
+            structural_fragment("head_start"),
+            structural_fragment("head_end"),
+            WebUIFragment::raw("</head><body>"),
+            structural_fragment("body_start"),
+        ];
+        for (sequence, host) in hosts.iter().enumerate() {
+            entry.push(WebUIFragment::boundary(
+                sequence as u32,
+                "index.html",
+                format!("boundary-{sequence}"),
+                None,
+            ));
+            entry.push(WebUIFragment::raw(format!("<{host}")));
+            if emit_root_signal {
+                entry.push(structural_fragment(format!("streaming_root:{host}")));
+            }
+            entry.push(WebUIFragment::raw(">"));
+            entry.push(WebUIFragment::component(*host));
+            entry.push(WebUIFragment::raw(format!("</{host}>")));
+            entry.push(WebUIFragment::boundary_end(sequence as u32));
+        }
+        entry.push(structural_fragment("body_end"));
+        entry.push(WebUIFragment::raw("</body></html>"));
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: entry,
+                contains_boundary: true,
+            },
+        );
+        fragments.insert(
+            "comp-a".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::raw("<b>A</b>")],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "comp-b".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::raw("<b>B</b>")],
+                contains_boundary: false,
+            },
+        );
+
+        let mut document = WebUIProtocol::new(fragments);
+        document.initial_state_strategy = InitialStateStrategy::Components as i32;
+        document.components.insert(
+            "comp-a".to_string(),
+            webui_protocol::ComponentData {
+                template_json: r#"{"h":"<i>A</i>","th":1}"#.to_string(),
+                hydration_mode: StateProjectionMode::Keys as i32,
+                hydration_keys: vec!["a_count".to_string()],
+                ..Default::default()
+            },
+        );
+        document.components.insert(
+            "comp-b".to_string(),
+            webui_protocol::ComponentData {
+                template_json: r#"{"h":"<i>B</i>","th":1}"#.to_string(),
+                hydration_mode: StateProjectionMode::Keys as i32,
+                hydration_keys: vec!["b_count".to_string()],
+                ..Default::default()
+            },
+        );
+        if include_styles {
+            document.set_css_strategy(webui_protocol::CssStrategy::Style);
+            document
+                .components
+                .get_mut("comp-a")
+                .expect("comp-a component")
+                .css = ".comp-a{color:red}".to_string();
+            document
+                .components
+                .get_mut("comp-b")
+                .expect("comp-b component")
+                .css = ".comp-b{color:blue}".to_string();
+            document.populate_style_closures(&["index.html"]);
+        }
+        Protocol::new(document)
+    }
+
+    fn disjoint_streaming_protocol(hosts: &[&str]) -> Protocol {
+        disjoint_streaming_protocol_ext(hosts, true, false)
+    }
+
+    fn styled_disjoint_streaming_protocol(hosts: &[&str]) -> Protocol {
+        disjoint_streaming_protocol_ext(hosts, true, true)
+    }
+
+    fn streaming_root_validation_protocol(
+        mut host_fragments: Vec<WebUIFragment>,
+        tail: Vec<WebUIFragment>,
+    ) -> Protocol {
+        let mut entry = vec![
+            WebUIFragment::raw("<html><head>"),
+            structural_fragment("head_start"),
+            structural_fragment("head_end"),
+            WebUIFragment::raw("</head><body>"),
+            structural_fragment("body_start"),
+            WebUIFragment::boundary(0, "index.html", "boundary-0", None),
+        ];
+        entry.append(&mut host_fragments);
+        entry.extend(tail);
+        let fragments = HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: entry,
+                    contains_boundary: true,
+                },
+            ),
+            (
+                "comp-a".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<b>A</b>")],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "comp-b".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<b>B</b>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]);
+        Protocol::new(WebUIProtocol::new(fragments))
+    }
+
+    fn completed_streaming_tail() -> Vec<WebUIFragment> {
+        vec![
+            WebUIFragment::raw("</comp-a>"),
+            WebUIFragment::boundary_end(0),
+            structural_fragment("body_end"),
+            WebUIFragment::raw("</body></html>"),
+        ]
+    }
+
+    fn assert_streaming_root_error(
+        protocol: &Protocol,
+        expected_signal: &str,
+        expected_reason: &str,
+    ) {
+        let mut writer = FlushTestWriter::default();
+        let result = WebUIHandler::new().render_streaming(
+            protocol,
+            &test_json!({}),
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        );
+        match result {
+            Err(HandlerError::StreamingBoundary(error)) => {
+                assert_eq!(error.signal, expected_signal);
+                assert!(
+                    error.reason.contains(expected_reason),
+                    "reason: {}",
+                    error.reason
+                );
+            }
+            other => panic!("expected streaming-root rejection, got {other:?}"),
+        }
+    }
+
+    #[test]
+    fn streaming_root_signal_injects_data_ws_inside_boundary() {
+        let protocol = disjoint_streaming_protocol(&["comp-a"]);
+        let handler = WebUIHandler::with_plugin(|| {
+            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+        });
+        let mut writer = FlushTestWriter::default();
+        handler
+            .render_streaming(
+                &protocol,
+                &test_json!({ "a_count": 1 }),
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .unwrap();
+        // The parser-owned signal is consumed to inject exactly ` data-ws`
+        // inside the host's opening tag, before the custom element upgrades.
+        assert!(
+            writer.output.contains("<comp-a data-ws>"),
+            "streamed host must carry data-ws: {}",
+            writer.output
+        );
+    }
+
+    #[test]
+    fn streaming_root_signal_preserves_ordinary_output_bytes() {
+        // Ordinary rendering ignores `streaming_root` byte-for-byte: identical
+        // output with and without the signal, and never a `data-ws` attribute.
+        let with_signal = disjoint_streaming_protocol_ext(&["comp-a", "comp-b"], true, false);
+        let without_signal = disjoint_streaming_protocol_ext(&["comp-a", "comp-b"], false, false);
+        let state = test_json!({ "a_count": 1, "b_count": 2 });
+        let plugin = || {
+            WebUIHandler::with_plugin(
+                || Box::new(crate::plugin::webui::WebUIHydrationPlugin::new()),
+            )
+        };
+        let mut with_writer = TestWriter::new();
+        let mut without_writer = TestWriter::new();
+        plugin()
+            .render(
+                &with_signal,
+                &state,
+                &RenderOptions::new("index.html", "/"),
+                &mut with_writer,
+            )
+            .unwrap();
+        plugin()
+            .render(
+                &without_signal,
+                &state,
+                &RenderOptions::new("index.html", "/"),
+                &mut without_writer,
+            )
+            .unwrap();
+        // The rendered DOM (everything up to the inert data block) is
+        // deterministic and is where a leaked `data-ws` would appear. The
+        // ordinary template map is HashSet-ordered, so compare the DOM prefix
+        // for byte identity rather than the whole document.
+        let dom_prefix = |content: &str| -> String {
+            content
+                .split_once(r#"<script type="application/json" id="webui-data""#)
+                .map_or_else(|| content.to_string(), |(head, _)| head.to_string())
+        };
+        assert_eq!(
+            dom_prefix(&with_writer.get_content()),
+            dom_prefix(&without_writer.get_content())
+        );
+        assert!(!with_writer.get_content().contains("data-ws"));
+        assert!(with_writer.get_content().contains("<comp-a>"));
+    }
+
+    #[test]
+    fn streaming_component_without_root_signal_is_rejected() {
+        let protocol = streaming_root_validation_protocol(
+            vec![
+                WebUIFragment::raw("<comp-a>"),
+                WebUIFragment::component("comp-a"),
+            ],
+            completed_streaming_tail(),
+        );
+
+        assert_streaming_root_error(
+            &protocol,
+            "comp-a",
+            "has no compiler-owned streaming_root signal",
+        );
+    }
+
+    #[test]
+    fn duplicate_and_misplaced_streaming_root_signals_are_rejected() {
+        let duplicate = streaming_root_validation_protocol(
+            vec![
+                WebUIFragment::raw("<comp-a"),
+                structural_fragment("streaming_root:comp-a"),
+                structural_fragment("streaming_root:comp-a"),
+                WebUIFragment::raw(">"),
+                WebUIFragment::component("comp-a"),
+            ],
+            completed_streaming_tail(),
+        );
+        assert_streaming_root_error(&duplicate, "comp-a", "is misplaced");
+
+        let after_tag_close = streaming_root_validation_protocol(
+            vec![
+                WebUIFragment::raw("<comp-a>"),
+                structural_fragment("streaming_root:comp-a"),
+                WebUIFragment::component("comp-a"),
+            ],
+            completed_streaming_tail(),
+        );
+        assert_streaming_root_error(&after_tag_close, "comp-a", "is misplaced");
+
+        let detached_from_opening = streaming_root_validation_protocol(
+            vec![
+                WebUIFragment::raw("not an opening tag"),
+                structural_fragment("streaming_root:comp-a"),
+                WebUIFragment::raw(">"),
+                WebUIFragment::component("comp-a"),
+            ],
+            completed_streaming_tail(),
+        );
+        assert_streaming_root_error(
+            &detached_from_opening,
+            "comp-a",
+            "unclosed component opening-tag close",
+        );
+    }
+
+    #[test]
+    fn mismatched_streaming_root_signal_is_rejected() {
+        let protocol = streaming_root_validation_protocol(
+            vec![
+                WebUIFragment::raw("<comp-a"),
+                structural_fragment("streaming_root:comp-b"),
+                WebUIFragment::raw(">"),
+                WebUIFragment::component("comp-a"),
+            ],
+            completed_streaming_tail(),
+        );
+
+        assert_streaming_root_error(&protocol, "comp-b", "root signal names <comp-b>");
+    }
+
+    #[test]
+    fn pending_streaming_root_is_rejected_at_structural_ends() {
+        let protocol = streaming_root_validation_protocol(
+            vec![
+                WebUIFragment::raw("<comp-a"),
+                structural_fragment("streaming_root:comp-a"),
+                WebUIFragment::raw(">"),
+            ],
+            vec![structural_fragment("boundary_end:0")],
+        );
+        assert_streaming_root_error(&protocol, "comp-a", "is misplaced");
+    }
+
+    #[test]
+    fn streaming_root_outside_boundary_is_rejected() {
+        let fragments = HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: vec![
+                        WebUIFragment::raw("<html><head>"),
+                        structural_fragment("head_start"),
+                        structural_fragment("head_end"),
+                        WebUIFragment::raw("</head><body>"),
+                        structural_fragment("body_start"),
+                        WebUIFragment::raw("<comp-a"),
+                        structural_fragment("streaming_root:comp-a"),
+                        WebUIFragment::raw(">"),
+                        WebUIFragment::component("comp-a"),
+                        WebUIFragment::raw("</comp-a>"),
+                        structural_fragment("body_end"),
+                        WebUIFragment::raw("</body></html>"),
+                    ],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "comp-a".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<b>A</b>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]);
+        let protocol = Protocol::new(WebUIProtocol::new(fragments));
+        let mut writer = FlushTestWriter::default();
+        let result = WebUIHandler::new().render_streaming(
+            &protocol,
+            &test_json!({}),
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        );
+        match result {
+            Err(HandlerError::StreamingBoundary(err)) => {
+                assert_eq!(err.signal, "comp-a");
+                assert!(
+                    err.reason
+                        .contains("no boundary or generated component span"),
+                    "reason: {}",
+                    err.reason
+                );
+            }
+            other => panic!("expected outside-boundary rejection, got {other:?}"),
+        }
+    }
+
+    fn parser_route_protocol(with_boundary: bool) -> Protocol {
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        parser
+            .component_registry_mut()
+            .register_component(ComponentRegistration::new(
+                "route-page",
+                "<p>route content</p>",
+                None,
+                true,
+            ))
+            .expect("register route component");
+        let route = r#"<route path="/" component="route-page" exact />"#;
+        let html = if with_boundary {
+            format!(
+                "<html><head></head><body>\
+                 <boundary name=\"route\">{route}</boundary>\
+                 </body></html>"
+            )
+        } else {
+            format!("<html><head></head><body>{route}</body></html>")
+        };
+        parser
+            .parse("index.html", &html)
+            .expect("parse route streaming fixture");
+        let mut document = WebUIProtocol::new(parser.into_fragment_records());
+        document.components.insert(
+            "route-page".to_string(),
+            webui_protocol::ComponentData::default(),
+        );
+        Protocol::new(document)
+    }
+
+    #[test]
+    fn streaming_parser_route_host_is_marked_inside_explicit_boundary() {
+        let protocol = parser_route_protocol(true);
+        let mut writer = FlushTestWriter::default();
+        WebUIHandler::new()
+            .render_streaming(
+                &protocol,
+                &test_json!({}),
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .unwrap();
+
+        assert!(
+            writer
+                .output
+                .contains("<route-page data-ws><p>route content</p></route-page>"),
+            "matched route host must be deferred before upgrade: {}",
+            writer.output
+        );
+    }
+
+    #[test]
+    fn streaming_parser_route_host_outside_boundary_is_rejected() {
+        let protocol = parser_route_protocol(false);
+        let mut writer = FlushTestWriter::default();
+        let result = WebUIHandler::new().render_streaming(
+            &protocol,
+            &test_json!({}),
+            &RenderOptions::new("index.html", "/"),
+            &mut writer,
+        );
+
+        match result {
+            Err(HandlerError::StreamingBoundary(error)) => {
+                assert_eq!(error.signal, "route-page");
+                assert!(
+                    error
+                        .reason
+                        .contains("no boundary or generated component span"),
+                    "reason: {}",
+                    error.reason
+                );
+            }
+            other => panic!("expected route boundary rejection, got {other:?}"),
+        }
+        assert!(
+            !writer.output.contains("<route-page>"),
+            "an unmarked custom-element opening must never be completed"
+        );
+    }
+
+    #[test]
+    fn streaming_checkpoint_preserves_relative_route_base_for_metadata() {
+        let entry = vec![
+            WebUIFragment::raw("<html><head>"),
+            structural_fragment("head_start"),
+            structural_fragment("head_end"),
+            WebUIFragment::raw("</head><body>"),
+            structural_fragment("body_start"),
+            WebUIFragment::boundary(0, "index.html", "boundary-0", None),
+            WebUIFragment::route_from(webui_protocol::WebUiFragmentRoute {
+                path: "/account".into(),
+                fragment_id: "account-shell".into(),
+                exact: false,
+                ..Default::default()
+            }),
+            WebUIFragment::boundary_end(0),
+            structural_fragment("body_end"),
+            WebUIFragment::raw("</body></html>"),
+        ];
+        let fragments = HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: entry,
+                    contains_boundary: true,
+                },
+            ),
+            (
+                "account-shell".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::route_from(
+                        webui_protocol::WebUiFragmentRoute {
+                            path: "./details".into(),
+                            fragment_id: "details-page".into(),
+                            exact: true,
+                            pending_component: "details-loading".into(),
+                            error_component: "details-error".into(),
+                            ..Default::default()
+                        },
+                    )],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "details-page".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<p>details</p>")],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "details-loading".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<p>loading</p>")],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "details-error".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<p>error</p>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]);
+        let mut document = WebUIProtocol::new(fragments);
+        document.initial_state_strategy = InitialStateStrategy::Components as i32;
+        for name in [
+            "account-shell",
+            "details-page",
+            "details-loading",
+            "details-error",
+        ] {
+            document.components.insert(
+                name.to_string(),
+                webui_protocol::ComponentData {
+                    template_json: format!(r#"{{"h":"<{name}></{name}>","th":1}}"#),
+                    ..Default::default()
+                },
+            );
+        }
+        let protocol = Protocol::new(document);
+        let handler = WebUIHandler::with_plugin(|| {
+            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+        });
+        let mut writer = FlushTestWriter::default();
+
+        handler
+            .render_streaming(
+                &protocol,
+                &test_json!({}),
+                &RenderOptions::new("index.html", "/account/details"),
+                &mut writer,
+            )
+            .unwrap();
+
+        let first = &writer.output[writer.flushes[0]..writer.flushes[1]];
+        assert!(
+            first.contains(r#""details-loading":"#),
+            "relative-route pending metadata missing: {first}"
+        );
+        assert!(
+            first.contains(r#""details-error":"#),
+            "relative-route error metadata missing: {first}"
+        );
+    }
+
+    #[test]
+    fn streaming_checkpoint_keeps_independent_siblings_beside_route_roots() {
+        let entry = vec![
+            WebUIFragment::raw("<html><head>"),
+            structural_fragment("head_start"),
+            structural_fragment("head_end"),
+            WebUIFragment::raw("</head><body>"),
+            structural_fragment("body_start"),
+            WebUIFragment::boundary(0, "index.html", "boundary-0", None),
+            WebUIFragment::raw("<static-shell"),
+            structural_fragment("streaming_root:static-shell"),
+            WebUIFragment::raw(">"),
+            WebUIFragment::component("static-shell"),
+            WebUIFragment::raw("</static-shell>"),
+            WebUIFragment::raw("<route-shell"),
+            structural_fragment("streaming_root:route-shell"),
+            WebUIFragment::raw(">"),
+            WebUIFragment::component("route-shell"),
+            WebUIFragment::raw("</route-shell>"),
+            WebUIFragment::boundary_end(0),
+            structural_fragment("body_end"),
+            WebUIFragment::raw("</body></html>"),
+        ];
+        let fragments = HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: entry,
+                    contains_boundary: true,
+                },
+            ),
+            (
+                "static-shell".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::if_cond(
+                        ConditionExpr::identifier("show_hidden"),
+                        "static-hidden-if",
+                    )],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "static-hidden-if".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::component("static-hidden")],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "static-hidden".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<p>hidden</p>")],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "route-shell".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::route_from(
+                        webui_protocol::WebUiFragmentRoute {
+                            path: "/account".into(),
+                            fragment_id: "route-page".into(),
+                            exact: true,
+                            ..Default::default()
+                        },
+                    )],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "route-page".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<p>route</p>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]);
+        let mut document = WebUIProtocol::new(fragments);
+        document.set_css_strategy(webui_protocol::CssStrategy::Link);
+        document.initial_state_strategy = InitialStateStrategy::Components as i32;
+        for (name, keys) in [
+            ("static-shell", vec!["show_hidden", "static_count"]),
+            ("static-hidden", vec!["hidden_count"]),
+            ("route-shell", vec!["route_shell_count"]),
+            ("route-page", vec!["route_count"]),
+        ] {
+            document.components.insert(
+                name.to_string(),
+                webui_protocol::ComponentData {
+                    template_json: format!(r#"{{"h":"<{name}></{name}>","th":1}}"#),
+                    hydration_mode: StateProjectionMode::Keys as i32,
+                    hydration_keys: keys.into_iter().map(str::to_string).collect(),
+                    css_href: format!("/{name}.css"),
+                    ..Default::default()
+                },
+            );
+        }
+        document.populate_style_closures(&["index.html"]);
+        let protocol = Protocol::new(document);
+        assert_eq!(
+            protocol
+                .component_reachability()
+                .is_route_dependent(protocol.component_index()["route-shell"]),
+            Some(true),
+            "fixture must exercise request-aware checkpoint reachability"
+        );
+        let handler = WebUIHandler::with_plugin(|| {
+            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+        });
+        let mut writer = FlushTestWriter::default();
+
+        handler
+            .render_streaming(
+                &protocol,
+                &test_json!({
+                    "show_hidden": false,
+                    "static_count": 1,
+                    "hidden_count": 2,
+                    "route_shell_count": 3,
+                    "route_count": 4,
+                    "unrelated": "private",
+                }),
+                &RenderOptions::new("index.html", "/account"),
+                &mut writer,
+            )
+            .unwrap();
+
+        let checkpoint = &writer.output[writer.flushes[0]..writer.flushes[1]];
+        for template in ["static-shell", "static-hidden", "route-shell", "route-page"] {
+            assert!(
+                checkpoint.contains(&format!(r#""{template}":"#)),
+                "{template} metadata missing: {checkpoint}"
+            );
+        }
+        for state in [
+            r#""show_hidden":false"#,
+            r#""static_count":1"#,
+            r#""hidden_count":2"#,
+            r#""route_shell_count":3"#,
+            r#""route_count":4"#,
+        ] {
+            assert!(
+                checkpoint.contains(state),
+                "{state} state missing: {checkpoint}"
+            );
+        }
+        assert!(
+            !checkpoint.contains("unrelated"),
+            "checkpoint leaked unrelated state: {checkpoint}"
+        );
+        assert!(
+            checkpoint.contains(
+                r#""css":["/static-shell.css","/static-hidden.css","/route-shell.css","/route-page.css"]"#
+            ),
+            "checkpoint metadata lost source order: {checkpoint}"
+        );
+        assert!(
+            checkpoint.contains(r#""componentStyles":"#)
+                && checkpoint.contains(r#""strategy":"link""#)
+                && checkpoint.contains(r#""static-shell":["static-shell","static-hidden"]"#),
+            "checkpoint is missing tree-local style metadata: {checkpoint}"
+        );
+        for resource in ["static-shell", "static-hidden", "route-shell", "route-page"] {
+            assert_eq!(
+                writer
+                    .output
+                    .matches(&format!(r#"data-webui-resource="{resource}""#))
+                    .count(),
+                1,
+                "Document delivery state must persist across streamed checkpoints"
+            );
+        }
+    }
+
+    #[test]
+    fn streaming_checkpoints_carry_boundary_local_templates_and_state() {
+        // Three boundaries: comp-a, comp-b, then comp-a reused. Each checkpoint
+        // envelope must be locally scoped — templates/state for exactly the
+        // components rendered since the previous checkpoint, with reused tags
+        // carrying hydration state but never a duplicate template.
+        let protocol = disjoint_streaming_protocol(&["comp-a", "comp-b", "comp-a"]);
+        let handler = WebUIHandler::with_plugin(|| {
+            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+        });
+        let state = test_json!({ "a_count": 1, "b_count": 2, "serverOnly": "secret" });
+        let mut writer = FlushTestWriter::default();
+        handler
+            .render_streaming(
+                &protocol,
+                &state,
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .unwrap();
+
+        assert_eq!(
+            writer.flushes.len(),
+            5,
+            "bootstrap, three boundary commits, and one terminal"
+        );
+        let segment = |index: usize| -> &str {
+            &writer.output[writer.flushes[index]..writer.flushes[index + 1]]
+        };
+        let b0 = segment(0);
+        let b1 = segment(1);
+        let b2 = segment(2);
+
+        // Boundary 0: only comp-a's template/state; no comp-b artifacts.
+        assert!(b0.contains(r#""templates":{"comp-a":"#), "b0: {b0}");
+        assert!(b0.contains(r#""a_count":1"#), "b0: {b0}");
+        assert!(
+            b0.contains(r#"[2,0,0,0,{"declarationId":0,"componentStyles":"#),
+            "b0: {b0}"
+        );
+        assert!(b0.contains(r#""inventory":"01""#), "b0: {b0}");
+        assert!(!b0.contains("comp-b"), "b0 leaked comp-b: {b0}");
+        assert!(!b0.contains("b_count"), "b0 leaked b_count: {b0}");
+
+        // Boundary 1: only comp-b's template/state; no duplicate comp-a template.
+        assert!(b1.contains(r#""templates":{"comp-b":"#), "b1: {b1}");
+        assert!(b1.contains(r#""b_count":2"#), "b1: {b1}");
+        assert!(
+            b1.contains(r#"[2,1,0,1,{"declarationId":1,"componentStyles":"#),
+            "b1: {b1}"
+        );
+        assert!(b1.contains(r#""inventory":"02""#), "b1: {b1}");
+        assert!(
+            !b1.contains(r#""templates":{"comp-a"#),
+            "b1 re-sent comp-a: {b1}"
+        );
+        assert!(!b1.contains("a_count"), "b1 leaked a_count: {b1}");
+
+        // Boundary 2: comp-a reused — state present, template absent (empty delta).
+        assert!(b2.contains(r#""a_count":1"#), "b2: {b2}");
+        assert!(
+            b2.contains(r#"[2,2,0,2,{"declarationId":2,"componentStyles":"#),
+            "b2: {b2}"
+        );
+        assert!(b2.contains(r#""inventory":"""#), "b2: {b2}");
+        assert!(
+            !b2.contains(r#""templates""#),
+            "b2 re-sent a template: {b2}"
+        );
+
+        // Server-only state never leaks into any envelope.
+        assert!(!writer.output.contains("serverOnly"));
+    }
+
+    #[test]
+    fn streaming_checkpoints_emit_style_resources_and_closures_once() {
+        let protocol = styled_disjoint_streaming_protocol(&["comp-a", "comp-b", "comp-a"]);
+        let handler = WebUIHandler::with_plugin(|| {
+            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+        });
+        let mut writer = FlushTestWriter::default();
+        handler
+            .render_streaming(
+                &protocol,
+                &test_json!({ "a_count": 1, "b_count": 2 }),
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .unwrap();
+
+        let segment = |index: usize| -> &str {
+            &writer.output[writer.flushes[index]..writer.flushes[index + 1]]
+        };
+        let checkpoint_styles = |checkpoint: &str| -> Value {
+            let script = checkpoint
+                .rfind(r#"<script type="application/json" data-webui-boundary"#)
+                .unwrap();
+            let payload_start = script + checkpoint[script..].find('>').unwrap() + 1;
+            let payload_end =
+                payload_start + checkpoint[payload_start..].find("</script>").unwrap();
+            let record: Value =
+                serde_json::from_str(&checkpoint[payload_start..payload_end]).unwrap();
+            record[4]["componentStyles"].clone()
+        };
+
+        let first = checkpoint_styles(segment(0));
+        assert!(first["resources"]["comp-a"].is_object());
+        assert!(first["resources"]["comp-b"].is_object());
+        assert!(first["closures"]["index.html"].is_array());
+        assert!(first["closures"]["comp-a"].is_array());
+
+        let second = checkpoint_styles(segment(1));
+        assert_eq!(second["resources"], test_json!({}));
+        assert_eq!(second["closures"], test_json!({ "comp-b": ["comp-b"] }));
+
+        let repeated = checkpoint_styles(segment(2));
+        assert_eq!(repeated["resources"], test_json!({}));
+        assert_eq!(repeated["closures"], test_json!({}));
+        for resource in ["comp-a", "comp-b"] {
+            assert_eq!(
+                [&first, &second, &repeated]
+                    .iter()
+                    .filter(|styles| {
+                        styles["resources"]
+                            .as_object()
+                            .is_some_and(|resources| resources.contains_key(resource))
+                    })
+                    .count(),
+                1,
+                "{resource} style metadata was serialized more than once"
+            );
+        }
+    }
+
+    #[test]
+    fn streaming_checkpoint_carries_reachable_unrendered_metadata_without_inventory() {
+        let entry = vec![
+            WebUIFragment::raw("<html><head>"),
+            structural_fragment("head_start"),
+            structural_fragment("head_end"),
+            WebUIFragment::raw("</head><body>"),
+            structural_fragment("body_start"),
+            WebUIFragment::boundary(0, "index.html", "boundary-0", None),
+            WebUIFragment::raw("<comp-a"),
+            structural_fragment("streaming_root:comp-a"),
+            WebUIFragment::raw(">"),
+            WebUIFragment::component("comp-a"),
+            WebUIFragment::raw("</comp-a>"),
+            WebUIFragment::boundary_end(0),
+            WebUIFragment::boundary(1, "index.html", "boundary-1", None),
+            WebUIFragment::raw("<comp-hidden"),
+            structural_fragment("streaming_root:comp-hidden"),
+            WebUIFragment::raw(">"),
+            WebUIFragment::component("comp-hidden"),
+            WebUIFragment::raw("</comp-hidden>"),
+            WebUIFragment::boundary_end(1),
+            structural_fragment("body_end"),
+            WebUIFragment::raw("</body></html>"),
+        ];
+        let fragments = HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: entry,
+                    contains_boundary: true,
+                },
+            ),
+            (
+                "comp-a".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::if_cond(
+                        ConditionExpr::identifier("show_hidden"),
+                        "hidden-if",
+                    )],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "hidden-if".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::component("comp-hidden")],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "comp-hidden".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<p>hidden</p>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]);
+        let mut document = WebUIProtocol::new(fragments);
+        document.set_css_strategy(webui_protocol::CssStrategy::Module);
+        document.initial_state_strategy = InitialStateStrategy::Components as i32;
+        document.components.insert(
+            "comp-a".to_string(),
+            webui_protocol::ComponentData {
+                template_json: r#"{"h":"<div></div>","th":1}"#.to_string(),
+                hydration_mode: StateProjectionMode::Keys as i32,
+                hydration_keys: vec!["show_hidden".to_string()],
+                ..Default::default()
+            },
+        );
+        document.components.insert(
+            "comp-hidden".to_string(),
+            webui_protocol::ComponentData {
+                template_json: r#"{"h":"<p>hidden</p>","th":1}"#.to_string(),
+                css: ".hidden{display:block}".to_string(),
+                hydration_mode: StateProjectionMode::Keys as i32,
+                hydration_keys: vec!["hidden_count".to_string()],
+                ..Default::default()
+            },
+        );
+        document.populate_style_closures(&["index.html"]);
+        let protocol = Protocol::new(document);
+        let handler = WebUIHandler::with_plugin(|| {
+            Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+        });
+        let mut writer = FlushTestWriter::default();
+
+        handler
+            .render_streaming(
+                &protocol,
+                &test_json!({
+                    "show_hidden": false,
+                    "hidden_count": 7,
+                    "unrelated": "private",
+                }),
+                &RenderOptions::new("index.html", "/"),
+                &mut writer,
+            )
+            .unwrap();
+
+        let boundary = |index: usize| -> &str {
+            &writer.output[writer.flushes[index]..writer.flushes[index + 1]]
+        };
+        let first = boundary(0);
+        let second = boundary(1);
+
+        assert!(first.contains(r#""comp-a":"#), "first: {first}");
+        assert!(first.contains(r#""comp-hidden":"#), "first: {first}");
+        assert!(first.contains(r#""show_hidden":false"#), "first: {first}");
+        assert!(first.contains(r#""hidden_count":7"#), "first: {first}");
+        assert!(first.contains(r#""inventory":"01""#), "first: {first}");
+        assert!(
+            first.contains(r#"<script type="importmap""#),
+            "first: {first}"
+        );
+        assert!(
+            !first.contains("unrelated"),
+            "first leaked unrelated state: {first}"
+        );
+
+        assert!(
+            !second.contains(r#""templates""#),
+            "second re-sent metadata: {second}"
+        );
+        assert!(
+            !second.contains(r#"<script type="importmap""#),
+            "second re-sent CSS: {second}"
+        );
+        assert!(second.contains(r#""hidden_count":7"#), "second: {second}");
+        assert!(second.contains(r#""inventory":"02""#), "second: {second}");
+        assert_eq!(
+            writer
+                .output
+                .matches(r#"<script type="importmap">"#)
+                .count(),
+            1,
+            "import-map output: {}",
+            writer.output
+        );
+    }
+
+    #[test]
+    fn streaming_flush_count_is_boundaries_plus_one() {
+        for &count in &[1usize, 3, 10, 100] {
+            let hosts: Vec<&str> = (0..count)
+                .map(|index| if index % 2 == 0 { "comp-a" } else { "comp-b" })
+                .collect();
+            let protocol = disjoint_streaming_protocol(&hosts);
+            let handler = WebUIHandler::with_plugin(|| {
+                Box::new(crate::plugin::webui::WebUIHydrationPlugin::new())
+            });
+            let mut writer = FlushTestWriter::default();
+            handler
+                .render_streaming(
+                    &protocol,
+                    &test_json!({ "a_count": 1, "b_count": 2 }),
+                    &RenderOptions::new("index.html", "/"),
+                    &mut writer,
+                )
+                .unwrap();
+            assert_eq!(
+                writer.flushes.len(),
+                count + 2,
+                "expected bootstrap + boundaries + terminal flushes for {count} boundaries"
+            );
+        }
+    }
+
+    #[test]
+    fn checkpoint_state_key_scratch_reuses_allocation_and_stays_local() {
+        let mut fragments = HashMap::new();
+        fragments.insert("comp-a".to_string(), FragmentList::default());
+        fragments.insert("comp-b".to_string(), FragmentList::default());
+        let mut protocol = WebUIProtocol::new(fragments);
+        protocol.initial_state_strategy = InitialStateStrategy::Components as i32;
+        protocol.components.insert(
+            "comp-a".to_string(),
+            webui_protocol::ComponentData {
+                hydration_mode: StateProjectionMode::Keys as i32,
+                hydration_keys: vec!["a".to_string(), "shared".to_string()],
+                ..Default::default()
+            },
+        );
+        protocol.components.insert(
+            "comp-b".to_string(),
+            webui_protocol::ComponentData {
+                hydration_mode: StateProjectionMode::Keys as i32,
+                hydration_keys: vec!["b".to_string(), "shared".to_string()],
+                ..Default::default()
+            },
+        );
+
+        let protocol = Protocol::new(protocol);
+        let component_index = protocol.component_index();
+        let reachability = protocol.component_reachability();
+        let mut scratch = Vec::with_capacity(INITIAL_KEY_CAPACITY);
+        assert!(!collect_hydration_key_ids_into(
+            protocol.protocol(),
+            reachability,
+            [component_index["comp-a"]],
+            &mut scratch,
+        ));
+        let keys = scratch
+            .iter()
+            .filter_map(|id| reachability.hydration_key(*id))
+            .collect::<Vec<_>>();
+        assert_eq!(keys, ["a", "shared"]);
+        let pointer = scratch.as_ptr();
+        let capacity = scratch.capacity();
+
+        assert!(!collect_hydration_key_ids_into(
+            protocol.protocol(),
+            reachability,
+            [component_index["comp-b"]],
+            &mut scratch,
+        ));
+        let keys = scratch
+            .iter()
+            .filter_map(|id| reachability.hydration_key(*id))
+            .collect::<Vec<_>>();
+        assert_eq!(keys, ["b", "shared"]);
+        assert_eq!(scratch.as_ptr(), pointer);
+        assert_eq!(scratch.capacity(), capacity);
+    }
 }
diff --git a/crates/webui-handler/src/plugin/webui.rs b/crates/webui-handler/src/plugin/webui.rs
index 85b36cfe4..3915cdad9 100644
--- a/crates/webui-handler/src/plugin/webui.rs
+++ b/crates/webui-handler/src/plugin/webui.rs
@@ -777,6 +777,7 @@ mod tests {
                     WebUIFragment::raw_text_signal("tokens", true),
                     WebUIFragment::raw("}</style>"),
                 ],
+                contains_boundary: false,
             },
         );
         let protocol = WebUIProtocol::new(fragments);
diff --git a/crates/webui-handler/src/route_handler.rs b/crates/webui-handler/src/route_handler.rs
index becaaca28..db2c908a9 100644
--- a/crates/webui-handler/src/route_handler.rs
+++ b/crates/webui-handler/src/route_handler.rs
@@ -20,10 +20,32 @@ use std::collections::{HashMap, HashSet};
 use std::fmt;
 use std::sync::{Arc, OnceLock, RwLock};
 use webui_protocol::{
-    web_ui_fragment::Fragment, CssStrategy, DomStrategy, StateProjectionMode, WebUIFragmentRoute,
-    WebUIProtocol,
+    web_ui_fragment::Fragment, ComponentAssetStylePreload, CssStrategy, StateProjectionMode,
+    WebUIFragmentRoute, WebUIProtocol,
 };
 
+fn partition_component_asset_style_preloads(
+    protocol: &WebUIProtocol,
+    preloads: &[ComponentAssetStylePreload],
+) -> (
+    Vec<ComponentAssetStylePreload>,
+    Vec<ComponentAssetStylePreload>,
+) {
+    let mut shadow = Vec::new();
+    let mut light = Vec::new();
+    for preload in preloads {
+        if protocol
+            .components
+            .get(&preload.root)
+            .is_some_and(|component| !component.uses_shadow_dom)
+        {
+            light.push(preload.clone());
+        } else {
+            shadow.push(preload.clone());
+        }
+    }
+    (shadow, light)
+}
 use crate::streaming::PreparedContinuationStatePlan;
 
 // ── Protocol Index ──────────────────────────────────────────────────────
@@ -39,9 +61,12 @@ use crate::streaming::PreparedContinuationStatePlan;
 /// individual metadata lookups.
 pub struct Protocol {
     protocol: WebUIProtocol,
+    style_metadata_error: Option<String>,
+    css_strategy: webui_protocol::CssStrategy,
     component_asset_style_manifest: std::result::Result<String, String>,
     component_asset_style_links: String,
     component_index: HashMap<String, u32>,
+    style_resource_index: HashMap<String, u32>,
     component_reachability: OnceLock<ComponentReachabilityIndex>,
     fragment_ids: Vec<Arc<str>>,
     fragment_slots: HashMap<Arc<str>, u32>,
@@ -67,31 +92,43 @@ impl Protocol {
     ///
     /// Returns a protocol error when `bytes` is not a valid WebUI protobuf.
     pub fn from_protobuf(bytes: &[u8]) -> std::result::Result<Self, webui_protocol::ProtocolError> {
-        WebUIProtocol::from_protobuf(bytes).map(Self::new)
+        let protocol = WebUIProtocol::from_protobuf(bytes)?;
+        if let Some(error) = Self::validate_component_style_metadata(&protocol) {
+            return Err(webui_protocol::ProtocolError::Validation(error));
+        }
+        Ok(Self::new_with_style_metadata(protocol, None))
     }
 
     /// Create a reusable runtime protocol from an already decoded document.
     #[must_use]
-    pub fn new(mut protocol: WebUIProtocol) -> Self {
+    pub fn new(protocol: WebUIProtocol) -> Self {
+        let style_metadata_error = Self::validate_component_style_metadata(&protocol);
+        Self::new_with_style_metadata(protocol, style_metadata_error)
+    }
+
+    fn new_with_style_metadata(
+        mut protocol: WebUIProtocol,
+        style_metadata_error: Option<String>,
+    ) -> Self {
+        let css_strategy = protocol.css_strategy();
         let component_asset_style_preloads =
             std::mem::take(&mut protocol.component_asset_style_preloads);
-        let link_styles = protocol.css_strategy() == CssStrategy::Link;
-        let light_link_styles = link_styles && protocol.dom_strategy() == DomStrategy::Light;
-        let component_asset_style_links = if light_link_styles {
-            crate::serialize_component_asset_style_links(&component_asset_style_preloads)
+        let (shadow_preloads, light_preloads) =
+            partition_component_asset_style_preloads(&protocol, &component_asset_style_preloads);
+        let component_asset_style_links = if css_strategy == CssStrategy::Link {
+            crate::serialize_component_asset_style_links(&light_preloads)
         } else {
             String::new()
         };
-        let component_asset_style_manifest =
-            if link_styles && protocol.dom_strategy() == DomStrategy::Shadow {
-                crate::serialize_component_asset_style_manifest(&component_asset_style_preloads)
-                    .map_err(|error| {
-                        format!("failed to serialize component asset style metadata: {error}")
-                    })
-            } else {
-                Ok(String::new())
-            };
+        let component_asset_style_manifest = if css_strategy == CssStrategy::Link {
+            crate::serialize_component_asset_style_manifest(&shadow_preloads).map_err(|error| {
+                format!("failed to serialize component asset style metadata: {error}")
+            })
+        } else {
+            Ok(String::new())
+        };
         let component_index = build_component_index(&protocol);
+        let style_resource_index = build_style_resource_index(&protocol);
         let route_index = CompiledRouteIndex::new(&protocol);
         let mut fragment_ids: Vec<Arc<str>> = protocol
             .fragments
@@ -107,9 +144,12 @@ impl Protocol {
         }
         Self {
             protocol,
+            style_metadata_error,
+            css_strategy,
             component_asset_style_manifest,
             component_asset_style_links,
             component_index,
+            style_resource_index,
             component_reachability: OnceLock::new(),
             fragment_ids,
             fragment_slots,
@@ -124,6 +164,16 @@ impl Protocol {
         &self.protocol
     }
 
+    pub(crate) fn ensure_style_metadata(&self) -> Result<(), HandlerError> {
+        self.style_metadata_error
+            .as_ref()
+            .map_or(Ok(()), |error| Err(HandlerError::Invariant(error.clone())))
+    }
+
+    pub(crate) fn css_strategy(&self) -> webui_protocol::CssStrategy {
+        self.css_strategy
+    }
+
     pub(crate) fn component_asset_style_manifest(&self) -> Result<&str, HandlerError> {
         match &self.component_asset_style_manifest {
             Ok(manifest) => Ok(manifest),
@@ -139,6 +189,14 @@ impl Protocol {
         &self.component_index
     }
 
+    pub(crate) fn style_resource_index(&self) -> &HashMap<String, u32> {
+        if self.style_resource_index.is_empty() {
+            &self.component_index
+        } else {
+            &self.style_resource_index
+        }
+    }
+
     pub(crate) fn component_reachability(&self) -> &ComponentReachabilityIndex {
         self.component_reachability
             .get_or_init(|| ComponentReachabilityIndex::new(&self.protocol, &self.component_index))
@@ -221,6 +279,7 @@ impl Protocol {
         request_path: &str,
         inventory_hex: &str,
     ) -> Result<String, HandlerError> {
+        self.ensure_style_metadata()?;
         let mut index = self.request_index();
         let (response, state_selection) = render_partial_indexed_with_state(
             self.protocol(),
@@ -238,6 +297,7 @@ impl Protocol {
         component_tags: &[&str],
         inventory_hex: &str,
     ) -> Result<Value, HandlerError> {
+        self.ensure_style_metadata()?;
         let mut index = self.request_index();
         render_component_templates_indexed(
             self.protocol(),
@@ -247,6 +307,96 @@ impl Protocol {
         )
     }
 
+    fn validate_component_style_metadata(protocol: &WebUIProtocol) -> Option<String> {
+        if protocol.style_closures.is_empty() {
+            let requires_closures = protocol.components.iter().any(|(tag, component)| {
+                protocol.component_style_resource(tag).is_some() || component.uses_shadow_dom
+            });
+            if requires_closures {
+                return Some(
+                    "component style closure metadata is required by this protocol".to_string(),
+                );
+            }
+            return None;
+        }
+        let mut seen_resources = HashSet::new();
+        for (root, closure) in &protocol.style_closures {
+            seen_resources.clear();
+            seen_resources.reserve(closure.component_tags.len());
+            for tag in &closure.component_tags {
+                if !seen_resources.insert(tag.as_str()) {
+                    return Some(format!(
+                        "component style closure `{root}` contains duplicate resource `{tag}`"
+                    ));
+                }
+                if protocol.component_style_resource(tag).is_none() {
+                    return Some(format!(
+                        "component style closure `{root}` references missing resource `{tag}`"
+                    ));
+                }
+            }
+        }
+        for (fragment_id, fragments) in &protocol.fragments {
+            for fragment in &fragments.fragments {
+                let Some(Fragment::Signal(signal)) = fragment.fragment.as_ref() else {
+                    continue;
+                };
+                let Some(root) = crate::structural_signal_value(signal)
+                    .and_then(|value| value.strip_prefix("shadow_styles:"))
+                else {
+                    continue;
+                };
+                let Some(component) = protocol.components.get(fragment_id) else {
+                    return Some(format!(
+                        "Shadow style hook `{root}` references unknown component `{fragment_id}`"
+                    ));
+                };
+                if root != fragment_id.as_str() || !component.uses_shadow_dom {
+                    return Some(format!(
+                        "Shadow style hook `{root}` does not match component fragment `{fragment_id}`"
+                    ));
+                }
+            }
+        }
+        for (tag, component) in &protocol.components {
+            if !component.uses_shadow_dom {
+                continue;
+            }
+            let Some(fragments) = protocol.fragments.get(tag) else {
+                continue;
+            };
+            if !protocol.style_closures.contains_key(tag) {
+                return Some(format!(
+                    "component style closure metadata is missing Shadow root `{tag}`"
+                ));
+            }
+            let hook_count = fragments
+                .fragments
+                .iter()
+                .filter(|fragment| {
+                    matches!(
+                        fragment.fragment.as_ref(),
+                        Some(Fragment::Signal(signal))
+                            if crate::structural_signal_value(signal)
+                                .and_then(|value| value.strip_prefix("shadow_styles:"))
+                                == Some(tag.as_str())
+                    )
+                })
+                .count();
+            if hook_count == 0 {
+                return Some(format!(
+                    "Shadow component `{tag}` is missing its compiler style insertion hook"
+                ));
+            }
+            if hook_count > 1 {
+                return Some(format!(
+                    "Shadow component `{tag}` emitted more than one style insertion hook"
+                ));
+            }
+        }
+        None
+    }
+
     #[cfg(test)]
     fn render_partial_metadata(
         &self,
@@ -254,6 +404,7 @@ impl Protocol {
         request_path: &str,
         inventory_hex: &str,
     ) -> Result<Value, HandlerError> {
+        self.ensure_style_metadata()?;
         let mut index = self.request_index();
         render_partial_indexed(
             self.protocol(),
@@ -289,11 +440,241 @@ struct ProtocolIndex {
 }
 
 struct ComponentAssets {
-    styles: Vec<Value>,
+    component_styles: Value,
     templates: serde_json::Map<String, Value>,
     functions: serde_json::Map<String, Value>,
 }
 
+/// Build the versioned, tree-local component style metadata for the requested
+/// roots.
+pub(crate) fn collect_component_styles<'a>(
+    protocol: &WebUIProtocol,
+    roots: impl IntoIterator<Item = &'a str>,
+) -> Result<Value, HandlerError> {
+    collect_component_styles_inner(protocol, roots, None)
+}
+
+#[derive(Clone, Copy)]
+struct StyleInventoryView<'a> {
+    bits: &'a [u8],
+    index: &'a HashMap<String, u32>,
+    chunks_are_indexed: bool,
+}
+
+impl StyleInventoryView<'_> {
+    fn contains_component(self, tag: &str) -> bool {
+        self.index
+            .get(tag)
+            .is_some_and(|&index| has_component(self.bits, index))
+    }
+
+    fn contains_chunk(self, name: &str) -> bool {
+        self.chunks_are_indexed && self.contains_component(name)
+    }
+}
+
+pub(crate) fn collect_component_style_delta<'a>(
+    protocol: &WebUIProtocol,
+    roots: impl IntoIterator<Item = &'a str>,
+    style_inventory: &[u8],
+    style_resource_index: &HashMap<String, u32>,
+) -> Result<Value, HandlerError> {
+    collect_component_styles_inner(
+        protocol,
+        roots,
+        Some(StyleInventoryView {
+            bits: style_inventory,
+            index: style_resource_index,
+            chunks_are_indexed: true,
+        }),
+    )
+}
+
+fn collect_component_styles_for_inventory<'a>(
+    protocol: &WebUIProtocol,
+    roots: impl IntoIterator<Item = &'a str>,
+    component_inventory: &[u8],
+    component_index: &HashMap<String, u32>,
+) -> Result<Value, HandlerError> {
+    collect_component_styles_inner(
+        protocol,
+        roots,
+        Some(StyleInventoryView {
+            bits: component_inventory,
+            index: component_index,
+            chunks_are_indexed: false,
+        }),
+    )
+}
+
+fn collect_component_styles_inner<'a>(
+    protocol: &WebUIProtocol,
+    roots: impl IntoIterator<Item = &'a str>,
+    client_inventory: Option<StyleInventoryView<'_>>,
+) -> Result<Value, HandlerError> {
+    if protocol.style_closures.is_empty() {
+        if protocol
+            .components
+            .keys()
+            .any(|tag| protocol.component_style_resource(tag).is_some())
+        {
+            return Err(HandlerError::Invariant(
+                "component style closure metadata is required by this protocol".to_string(),
+            ));
+        }
+        return Ok(component_styles_payload(
+            protocol.css_strategy(),
+            serde_json::Map::new(),
+            serde_json::Map::new(),
+        ));
+    }
+
+    let mut resources = serde_json::Map::new();
+    let mut closures = serde_json::Map::new();
+    let mut seen_roots = HashSet::new();
+    let roots: Vec<&str> = roots
+        .into_iter()
+        .filter(|root| seen_roots.insert(*root))
+        .collect();
+    let covered_components = covered_components(protocol, &roots, client_inventory);
+    let chunk_index = protocol.style_chunk_index();
+    let mut emitted = HashSet::new();
+
+    for root in roots {
+        let Some(closure) = protocol.style_closures.get(root) else {
+            if !protocol.fragments.contains_key(root) && !protocol.components.contains_key(root) {
+                continue;
+            }
+            return Err(HandlerError::Invariant(format!(
+                "component style closure metadata is missing root `{root}`"
+            )));
+        };
+        if closure.style_chunks.is_empty()
+            && !closure.component_tags.is_empty()
+            && closure
+                .component_tags
+                .iter()
+                .all(|tag| covered_components.contains(tag.as_str()))
+        {
+            continue;
+        }
+        let unit_count = WebUIProtocol::style_closure_unit_count(closure);
+        let mut ordered = Vec::with_capacity(unit_count);
+        emitted.clear();
+        for position in 0..unit_count {
+            // A bundled build ships one resource per chunk. The client installs
+            // resources by name in closure order either way, so only the names
+            // and their grouping change. A closure that lists members rather
+            // than chunks resolves each member to its covering chunk, so it
+            // stays self-sufficient instead of relying on some other closure
+            // installing first.
+            let Some(unit) = protocol.style_closure_unit(closure, &chunk_index, position) else {
+                continue;
+            };
+            let name = unit.name;
+            let resource = unit.resource.ok_or_else(|| match unit.chunk {
+                Some(index) => HandlerError::Invariant(format!(
+                    "component style closure `{root}` references missing style chunk {index}"
+                )),
+                None => HandlerError::Invariant(format!(
+                    "component style closure `{root}` references missing resource `{name}`"
+                )),
+            })?;
+            let (client_has_it, members) = match unit.chunk {
+                Some(index) => (
+                    client_inventory.is_some_and(|inventory| inventory.contains_chunk(name)),
+                    Some(protocol.style_chunk_members(index).unwrap_or_default()),
+                ),
+                None => (
+                    client_inventory.is_some_and(|inventory| inventory.contains_component(name)),
+                    None,
+                ),
+            };
+            // Several members of one closure can resolve to the same chunk.
+            if !emitted.insert(name) {
+                continue;
+            }
+            if !client_has_it && !resources.contains_key(name) {
+                let mut entry = serde_json::Map::new();
+                match protocol.css_strategy() {
+                    webui_protocol::CssStrategy::Link => {
+                        entry.insert("kind".into(), Value::String("link".into()));
+                        entry.insert("href".into(), Value::String(resource.to_owned()));
+                    }
+                    webui_protocol::CssStrategy::Style => {
+                        entry.insert("kind".into(), Value::String("style".into()));
+                        entry.insert("css".into(), Value::String(resource.to_owned()));
+                    }
+                    webui_protocol::CssStrategy::Module => {
+                        entry.insert("kind".into(), Value::String("module".into()));
+                        entry.insert("specifier".into(), Value::String(name.to_owned()));
+                        entry.insert("css".into(), Value::String(resource.to_owned()));
+                    }
+                }
+                if let Some(members) = members.filter(|members| members.len() > 1) {
+                    entry.insert(
+                        "members".into(),
+                        Value::Array(members.iter().cloned().map(Value::String).collect()),
+                    );
+                }
+                resources.insert(name.to_owned(), Value::Object(entry));
+            }
+            ordered.push(Value::String(name.to_owned()));
+        }
+        closures.insert(root.to_owned(), Value::Array(ordered));
+    }
+
+    Ok(component_styles_payload(
+        protocol.css_strategy(),
+        resources,
+        closures,
+    ))
+}
+
+fn covered_components<'a>(
+    protocol: &'a WebUIProtocol,
+    roots: &[&str],
+    inventory: Option<StyleInventoryView<'_>>,
+) -> HashSet<&'a str> {
+    let mut covered = HashSet::with_capacity(protocol.components.len());
+    for root in roots {
+        let Some(closure) = protocol.style_closures.get(*root) else {
+            continue;
+        };
+        for index in &closure.style_chunks {
+            if let Some(chunk) = usize::try_from(*index)
+                .ok()
+                .and_then(|index| protocol.style_chunks.get(index))
+            {
+                covered.extend(chunk.component_tags.iter().map(String::as_str));
+            }
+        }
+    }
+
+    if let Some(inventory) = inventory {
+        for chunk in &protocol.style_chunks {
+            if inventory.contains_chunk(&chunk.name) {
+                covered.extend(chunk.component_tags.iter().map(String::as_str));
+            }
+        }
+    }
+    covered
+}
+
+fn component_styles_payload(
+    strategy: webui_protocol::CssStrategy,
+    resources: serde_json::Map<String, Value>,
+    closures: serde_json::Map<String, Value>,
+) -> Value {
+    let strategy = strategy.wire_name();
+    let mut payload = serde_json::Map::new();
+    payload.insert("version".into(), Value::from(1));
+    payload.insert("strategy".into(), Value::String(strategy.into()));
+    payload.insert("resources".into(), Value::Object(resources));
+    payload.insert("closures".into(), Value::Object(closures));
+    Value::Object(payload)
+}
+
 #[cfg(test)]
 impl ProtocolIndex {
     /// Build a protocol index from a compiled protocol.
@@ -379,6 +760,35 @@ pub(crate) fn build_component_index(protocol: &WebUIProtocol) -> HashMap<String,
     index
 }
 
+/// Build the exact resource-ID index used by streaming style deduplication.
+fn build_style_resource_index(protocol: &WebUIProtocol) -> HashMap<String, u32> {
+    if protocol.style_chunks.is_empty() {
+        return HashMap::new();
+    }
+    let mut sorted: Vec<&str> = protocol
+        .components
+        .keys()
+        .filter(|tag| protocol.component_style_resource(tag).is_some())
+        .map(String::as_str)
+        .chain(
+            protocol
+                .style_chunks
+                .iter()
+                .map(|chunk| chunk.name.as_str()),
+        )
+        .collect();
+    sorted.sort_unstable();
+    sorted.dedup();
+    let mut index = HashMap::with_capacity(sorted.len());
+    for (position, name) in sorted.into_iter().enumerate() {
+        // The protocol cannot hold enough resource records for this to truncate.
+        #[allow(clippy::cast_possible_truncation)]
+        let position = position as u32;
+        index.insert(name.to_string(), position);
+    }
+    index
+}
+
 /// Startup-built direct component dependency graph used by streaming
 /// checkpoints. Route-free component surfaces walk integer indexes on the
 /// request path; only route-dependent surfaces need the more expensive
@@ -732,6 +1142,7 @@ pub fn get_needed_components(
 /// templates needed for the current `request_path`.
 ///
 /// Returns `(needed_names, updated_inventory_hex)`.
+#[cfg(test)]
 pub(crate) fn get_needed_components_for_request(
     protocol: &WebUIProtocol,
     entry_id: &str,
@@ -1250,18 +1661,14 @@ fn partial_response_not_object() -> HandlerError {
     HandlerError::Invariant("partial response must serialize as a JSON object".to_string())
 }
 
-/// Collect all route-reachable inventoryable components for the request path.
-pub(crate) fn collect_reachable_components_for_request(
+/// Collect request-reachable components in deterministic first-discovery order.
+pub(crate) fn collect_reachable_component_order_for_request(
     protocol: &WebUIProtocol,
     entry_id: &str,
     request_path: &str,
     route_index: &CompiledRouteIndex,
-) -> HashSet<String> {
-    // Callers here need set semantics (`.contains`, plugin `&HashSet` API);
-    // discovery order is irrelevant for reachable-template emission.
+) -> Vec<String> {
     collect_inventoryable_components(protocol, entry_id, Some(request_path), false, route_index)
-        .into_iter()
-        .collect()
 }
 
 /// Filter components against the client's inventory bitfield using sequential indices.
@@ -1278,6 +1685,21 @@ pub fn filter_needed_components(
     inventory_hex: &str,
     index: &HashMap<String, u32>,
 ) -> Result<(Vec<String>, String), HandlerError> {
+    let filtered = filter_components_with_inventory(component_names, inventory_hex, index)?;
+    Ok((filtered.needed, filtered.updated_inventory))
+}
+
+struct FilteredComponents {
+    needed: Vec<String>,
+    updated_inventory: String,
+    client_inventory: Vec<u8>,
+}
+
+fn filter_components_with_inventory(
+    component_names: &[String],
+    inventory_hex: &str,
+    index: &HashMap<String, u32>,
+) -> Result<FilteredComponents, HandlerError> {
     let client_inv = parse_inventory(inventory_hex)?;
     let mut updated_inv = client_inv.clone();
 
@@ -1296,7 +1718,11 @@ pub fn filter_needed_components(
         }
     }
 
-    Ok((needed, encode_inventory(&updated_inv)))
+    Ok(FilteredComponents {
+        needed,
+        updated_inventory: encode_inventory(&updated_inv),
+        client_inventory: client_inv,
+    })
 }
 
 fn has_template_payload(component: &webui_protocol::ComponentData) -> bool {
@@ -2032,7 +2458,7 @@ fn walk_children_for_inventory_and_chain(
 /// Use [`render_partial`] for a complete JSON response.
 ///
 /// Returns a `serde_json::Value` object with fields:
-/// - `templateStyles`: module CSS definition tags for inventory-new components (empty for Link/Style)
+/// - `componentStyles`: versioned tree-local resources and ordered closures
 /// - `templates`: client template metadata keyed by component tag (inventory-filtered)
 /// - `templateFunctions`: component-local condition closure arrays keyed by component tag
 /// - `inventory`: updated hex bitmask
@@ -2112,8 +2538,8 @@ fn render_partial_indexed_with_state<'a>(
     let state_selection =
         crate::collect_navigation_state(protocol, component_ids.iter().map(String::as_str));
 
-    let (needed_names, updated_inv) =
-        filter_needed_components(&component_ids, inventory_hex, index.component_index)?;
+    let filtered =
+        filter_components_with_inventory(&component_ids, inventory_hex, index.component_index)?;
 
     // Resolve cache tags and invalidation templates with accumulated params.
     let mut accumulated_params: HashMap<String, String> = HashMap::new();
@@ -2128,16 +2554,19 @@ fn render_partial_indexed_with_state<'a>(
         all_resolved_tags.extend(entry.cache_tags.iter().cloned());
     }
 
-    let tag_refs: Vec<&str> = needed_names.iter().map(|s| s.as_str()).collect();
-    let assets = collect_component_assets(protocol, &tag_refs, index)?;
+    let tag_refs: Vec<&str> = filtered.needed.iter().map(String::as_str).collect();
+    let assets = collect_component_assets(protocol, &tag_refs, &filtered.client_inventory, index)?;
 
     let chain_array = Value::Array(chain.iter().map(RouteChainEntry::to_json).collect());
 
     let mut result = serde_json::Map::with_capacity(7);
-    result.insert("templateStyles".into(), Value::Array(assets.styles));
+    result.insert("componentStyles".into(), assets.component_styles);
     result.insert("templates".into(), Value::Object(assets.templates));
     result.insert("templateFunctions".into(), Value::Object(assets.functions));
-    result.insert("inventory".into(), Value::String(updated_inv));
+    result.insert(
+        "inventory".into(),
+        Value::String(filtered.updated_inventory),
+    );
     result.insert("path".into(), Value::String(request_path.to_string()));
     result.insert("chain".into(), chain_array);
     if !all_resolved_tags.is_empty() {
@@ -2263,27 +2692,36 @@ fn render_component_templates_indexed(
         .filter(|s| seen.insert(**s))
         .map(|s| (*s).to_string())
         .collect();
-    let (needed, updated_inv) =
-        filter_needed_components(&requested, inventory_hex, index.component_index)?;
+    let filtered =
+        filter_components_with_inventory(&requested, inventory_hex, index.component_index)?;
 
-    let tag_refs: Vec<&str> = needed.iter().map(|s| s.as_str()).collect();
-    let assets = collect_component_assets(protocol, &tag_refs, index)?;
+    let tag_refs: Vec<&str> = filtered.needed.iter().map(String::as_str).collect();
+    let assets = collect_component_assets(protocol, &tag_refs, &filtered.client_inventory, index)?;
 
     let mut result = serde_json::Map::with_capacity(4);
-    result.insert("templateStyles".into(), Value::Array(assets.styles));
+    result.insert("componentStyles".into(), assets.component_styles);
     result.insert("templates".into(), Value::Object(assets.templates));
     result.insert("templateFunctions".into(), Value::Object(assets.functions));
-    result.insert("inventory".into(), Value::String(updated_inv));
+    result.insert(
+        "inventory".into(),
+        Value::String(filtered.updated_inventory),
+    );
     Ok(Value::Object(result))
 }
 
-/// Shared helper: collect templates and module CSS styles for a set of component tags.
+/// Shared helper: collect templates and style metadata for component tags.
 fn collect_component_assets(
     protocol: &WebUIProtocol,
     tags: &[&str],
+    client_inventory: &[u8],
     index: &mut RequestProtocolIndex<'_>,
 ) -> Result<ComponentAssets, HandlerError> {
-    let mut style_array = Vec::new();
+    let component_styles = collect_component_styles_for_inventory(
+        protocol,
+        tags.iter().copied(),
+        client_inventory,
+        index.component_index,
+    )?;
     let mut tmpl_map = serde_json::Map::new();
     let mut function_map = serde_json::Map::new();
 
@@ -2298,13 +2736,6 @@ fn collect_component_assets(
         if !has_template_payload(component) {
             continue;
         }
-        if !component.css.is_empty() {
-            // No nonce here — the per-request CSP nonce is attached
-            // client-side by the router when it materializes each
-            // importmap script tag into the DOM.
-            let tag_html = crate::css_module::build_importmap_tag(tag, &component.css, None);
-            style_array.push(Value::String(tag_html));
-        }
         if !component.template_json.is_empty() {
             let template_value = cached_template_metadata(
                 &mut index.template_metadata_cache,
@@ -2324,7 +2755,7 @@ fn collect_component_assets(
     }
 
     Ok(ComponentAssets {
-        styles: style_array,
+        component_styles,
         templates: tmpl_map,
         functions: function_map,
     })
@@ -2417,6 +2848,11 @@ pub struct RouteChainEntry {
     pub error_component: String,
 }
 
+pub(crate) struct RouteChainPlan {
+    pub(crate) entries: Vec<RouteChainEntry>,
+    pub(crate) document_style_targets: Vec<bool>,
+}
+
 impl RouteChainEntry {
     /// Serialize this entry to a JSON value ready for inclusion in a partial response.
     #[must_use]
@@ -2475,22 +2911,41 @@ impl RouteChainEntry {
 ///
 /// Walks the fragment graph from `entry_id`, follows the matched route at
 /// each nesting level, and returns a chain entry per matched level.
+#[cfg(test)]
 pub(crate) fn collect_route_chain(
     protocol: &WebUIProtocol,
     entry_id: &str,
     request_path: &str,
     route_index: &CompiledRouteIndex,
 ) -> Vec<RouteChainEntry> {
+    collect_route_chain_plan(protocol, entry_id, request_path, route_index).entries
+}
+
+struct RouteChainWork {
+    id: String,
+    route_base: String,
+    targets_document: bool,
+}
+
+pub(crate) fn collect_route_chain_plan(
+    protocol: &WebUIProtocol,
+    entry_id: &str,
+    request_path: &str,
+    route_index: &CompiledRouteIndex,
+) -> RouteChainPlan {
     let mut chain = Vec::new();
+    let mut document_style_targets = Vec::new();
     let mut visited_fragments = HashSet::new();
-    let mut stack = vec![QueuedFragment {
+    let mut stack = vec![RouteChainWork {
         id: entry_id.to_string(),
-        inventoryable: false,
         route_base: "/".to_string(),
+        targets_document: !protocol.component_uses_shadow_dom(entry_id),
     }];
 
     while let Some(queued) = stack.pop() {
-        if queued.id.is_empty() || !mark_fragment_visited(&mut visited_fragments, &queued, true) {
+        if queued.id.is_empty()
+            || !visited_fragments.insert((queued.id.clone(), queued.route_base.clone()))
+        {
             continue;
         }
 
@@ -2508,24 +2963,25 @@ pub(crate) fn collect_route_chain(
         for frag in &frag_list.fragments {
             match frag.fragment.as_ref() {
                 Some(Fragment::Component(component)) => {
-                    stack.push(QueuedFragment {
+                    stack.push(RouteChainWork {
                         id: component.fragment_id.clone(),
-                        inventoryable: false,
                         route_base: queued.route_base.clone(),
+                        targets_document: queued.targets_document
+                            && !protocol.component_uses_shadow_dom(&component.fragment_id),
                     });
                 }
                 Some(Fragment::ForLoop(for_loop)) => {
-                    stack.push(QueuedFragment {
+                    stack.push(RouteChainWork {
                         id: for_loop.fragment_id.clone(),
-                        inventoryable: false,
                         route_base: queued.route_base.clone(),
+                        targets_document: queued.targets_document,
                     });
                 }
                 Some(Fragment::IfCond(if_cond)) => {
-                    stack.push(QueuedFragment {
+                    stack.push(RouteChainWork {
                         id: if_cond.fragment_id.clone(),
-                        inventoryable: false,
                         route_base: queued.route_base.clone(),
+                        targets_document: queued.targets_document,
                     });
                 }
 
@@ -2535,6 +2991,8 @@ pub(crate) fn collect_route_chain(
                         .is_some_and(|(best_key, _)| best_key == route_frag.fragment_id.as_str());
                     if is_selected && !route_frag.fragment_id.is_empty() {
                         if let Some((_, ref rm)) = matched_route {
+                            let targets_document = queued.targets_document
+                                && !protocol.component_uses_shadow_dom(&route_frag.fragment_id);
                             chain.push(RouteChainEntry {
                                 component: route_frag.fragment_id.clone(),
                                 path: route_frag.path.clone(),
@@ -2547,23 +3005,29 @@ pub(crate) fn collect_route_chain(
                                 pending_component: route_frag.pending_component.clone(),
                                 error_component: route_frag.error_component.clone(),
                             });
+                            document_style_targets.push(targets_document);
 
                             let child_route_base = route_matcher::compute_route_base(
                                 request_path,
                                 rm.consumed_segments,
                             );
 
-                            stack.push(QueuedFragment {
+                            stack.push(RouteChainWork {
                                 id: route_frag.fragment_id.clone(),
-                                inventoryable: false,
                                 route_base: child_route_base.clone(),
+                                targets_document,
                             });
 
                             // Walk nested children iteratively
+                            let mut output = RouteChainOutput {
+                                entries: &mut chain,
+                                document_style_targets: &mut document_style_targets,
+                            };
                             collect_chain_from_children(
                                 &route_frag.children,
                                 &child_route_base,
-                                &mut chain,
+                                targets_document,
+                                &mut output,
                                 &mut ChildWalkCtx {
                                     request_path,
                                     protocol,
@@ -2578,25 +3042,36 @@ pub(crate) fn collect_route_chain(
         }
     }
 
-    chain
+    RouteChainPlan {
+        entries: chain,
+        document_style_targets,
+    }
+}
+
+struct RouteChainOutput<'a> {
+    entries: &'a mut Vec<RouteChainEntry>,
+    document_style_targets: &'a mut Vec<bool>,
 }
 
 /// Iteratively collect chain entries from nested route children.
 fn collect_chain_from_children(
     children: &[WebUIFragmentRoute],
     route_base: &str,
-    chain: &mut Vec<RouteChainEntry>,
+    targets_document: bool,
+    output: &mut RouteChainOutput<'_>,
     ctx: &mut ChildWalkCtx<'_>,
 ) {
-    let mut pending: Vec<(&[WebUIFragmentRoute], String)> =
-        vec![(children, route_base.to_string())];
+    let mut pending: Vec<(&[WebUIFragmentRoute], String, bool)> =
+        vec![(children, route_base.to_string(), targets_document)];
 
-    while let Some((current, base)) = pending.pop() {
+    while let Some((current, base, current_targets_document)) = pending.pop() {
         if let Some((idx, rm)) =
             select_best_child_route(current, ctx.request_path, &base, ctx.route_index)
         {
             let matched = &current[idx];
-            chain.push(RouteChainEntry {
+            let matched_targets_document = current_targets_document
+                && !ctx.protocol.component_uses_shadow_dom(&matched.fragment_id);
+            output.entries.push(RouteChainEntry {
                 component: matched.fragment_id.clone(),
                 path: matched.path.clone(),
                 params: rm.params,
@@ -2608,10 +3083,11 @@ fn collect_chain_from_children(
                 pending_component: matched.pending_component.clone(),
                 error_component: matched.error_component.clone(),
             });
+            output.document_style_targets.push(matched_targets_document);
             if !matched.children.is_empty() {
                 let child_base =
                     route_matcher::compute_route_base(ctx.request_path, rm.consumed_segments);
-                pending.push((&matched.children, child_base));
+                pending.push((&matched.children, child_base, matched_targets_document));
             }
         }
     }
@@ -2802,7 +3278,16 @@ mod tests {
     #[test]
     fn protocol_precomputes_deduplicated_light_component_asset_styles() {
         let mut protocol = WebUIProtocol::default();
-        protocol.dom_strategy = DomStrategy::Light as i32;
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
+        for root in ["lazy-panel", "secondary-panel"] {
+            protocol.components.insert(
+                root.to_string(),
+                webui_protocol::ComponentData {
+                    uses_shadow_dom: false,
+                    ..Default::default()
+                },
+            );
+        }
         protocol.component_asset_style_preloads = vec![
             webui_protocol::ComponentAssetStylePreload {
                 root: "lazy-panel".to_string(),
@@ -3781,18 +4266,18 @@ mod tests {
         }
 
         // Request the root path: neither "slow" nor "failing" is in the matched chain.
-        let reachable = collect_reachable_components_for_request(
+        let reachable = collect_reachable_component_order_for_request(
             &protocol,
             "index.html",
             "/",
             &CompiledRouteIndex::new(&protocol),
         );
         assert!(
-            reachable.contains("loading-skeleton"),
+            reachable.iter().any(|name| name == "loading-skeleton"),
             "pending component of an unmatched sibling route must be inventoried: {reachable:?}"
         );
         assert!(
-            reachable.contains("error-display"),
+            reachable.iter().any(|name| name == "error-display"),
             "error component of an unmatched sibling route must be inventoried: {reachable:?}"
         );
     }
@@ -3908,7 +4393,7 @@ mod tests {
     }
 
     #[test]
-    fn test_render_partial_separates_module_styles_from_templates() {
+    fn test_render_partial_carries_module_css_in_component_styles() {
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
@@ -3926,29 +4411,31 @@ mod tests {
         );
 
         let mut protocol = WebUIProtocol::with_tokens(fragments, Vec::new());
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
         let component = protocol
             .components
             .entry("my-page".to_string())
             .or_default();
         component.template_json = r#"{"h":"<p>page</p>"}"#.to_string();
         component.css = ".page{color:red}".to_string();
+        protocol.populate_style_closures(&["index.html"]);
 
         let mut index = ProtocolIndex::new(&protocol);
         let partial =
             render_partial_metadata(&protocol, "index.html", "/", "", &mut index).unwrap();
-        let styles = partial["templateStyles"]
-            .as_array()
-            .expect("templateStyles should be an array");
-        assert_eq!(styles.len(), 1);
-        let style_html = styles[0].as_str().unwrap_or_default();
-        assert!(
-            style_html.starts_with(r#"<script type="importmap""#)
-                && style_html.contains(r#""my-page":"data:text/css,"#),
-            "module style entry should be an importmap registering the component specifier: {style_html}"
+        assert_eq!(partial["componentStyles"]["version"], 1);
+        assert_eq!(partial["componentStyles"]["strategy"], "module");
+        assert_eq!(
+            partial["componentStyles"]["resources"]["my-page"],
+            serde_json::json!({
+                "kind": "module",
+                "specifier": "my-page",
+                "css": ".page{color:red}"
+            })
         );
-        assert!(
-            style_html.contains(".page{color:red}"),
-            "module style entry should contain the CSS content verbatim inside the data: URI: {style_html}"
+        assert_eq!(
+            partial["componentStyles"]["closures"]["my-page"],
+            serde_json::json!(["my-page"])
         );
 
         // templates should contain only JSON-safe metadata
@@ -3958,12 +4445,62 @@ mod tests {
         assert_eq!(templates.len(), 1);
         let template = templates.get("my-page").expect("my-page template");
         assert_eq!(template["h"], "<p>page</p>");
+
+        let inventory = partial["inventory"].as_str().expect("inventory");
+        let repeated =
+            render_partial_metadata(&protocol, "index.html", "/", inventory, &mut index).unwrap();
+        assert!(repeated["templates"].as_object().unwrap().is_empty());
+        assert_eq!(
+            repeated["componentStyles"]["resources"],
+            serde_json::json!({}),
+            "inventoried style definitions must not be retransmitted"
+        );
+        assert_eq!(
+            repeated["componentStyles"]["closures"],
+            serde_json::json!({}),
+            "inventoried style closures must not be retransmitted"
+        );
+    }
+
+    #[test]
+    fn styled_protocol_without_closures_is_rejected() {
+        let mut protocol = WebUIProtocol::default();
+        protocol.fragments = HashMap::from([
+            (
+                "index.html".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::component("legacy-page")],
+                    contains_boundary: false,
+                },
+            ),
+            (
+                "legacy-page".to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::raw("<p>Legacy</p>")],
+                    contains_boundary: false,
+                },
+            ),
+        ]);
+        protocol.components.insert(
+            "legacy-page".to_string(),
+            webui_protocol::ComponentData {
+                template_json: r#"{"h":"<p>Legacy</p>"}"#.to_string(),
+                css: ".legacy{display:block}".to_string(),
+                ..Default::default()
+            },
+        );
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
+
+        let mut index = ProtocolIndex::new(&protocol);
+        let error = render_partial_metadata(&protocol, "index.html", "/", "", &mut index)
+            .expect_err("styled protocols require closure metadata");
+        assert!(error
+            .to_string()
+            .contains("component style closure metadata is required"));
     }
 
     #[test]
-    fn test_render_partial_link_strategy_has_empty_template_styles() {
-        // Link-strategy components have css_href but no css content.
-        // templateStyles should be empty; templates should contain metadata.
+    fn test_render_partial_link_strategy_uses_component_styles() {
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
@@ -3981,6 +4518,7 @@ mod tests {
         );
 
         let mut protocol = WebUIProtocol::with_tokens(fragments, Vec::new());
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Link);
         let component = protocol
             .components
             .entry("my-page".to_string())
@@ -3988,29 +4526,24 @@ mod tests {
         component.template_json = r#"{"h":"<p>page</p>"}"#.to_string();
         component.css_href = "my-page.css".to_string();
         // css is empty — Link strategy stores href, not content
+        protocol.populate_style_closures(&["index.html"]);
 
         let mut index = ProtocolIndex::new(&protocol);
         let partial =
             render_partial_metadata(&protocol, "index.html", "/", "", &mut index).unwrap();
-        let styles = partial["templateStyles"]
-            .as_array()
-            .expect("templateStyles should be an array");
         let templates = partial["templates"]
             .as_object()
             .expect("templates should be an object");
 
-        assert!(
-            styles.is_empty(),
-            "Link strategy should produce empty templateStyles: {styles:?}"
-        );
         assert_eq!(templates.len(), 1, "should include template metadata");
+        assert_eq!(
+            partial["componentStyles"]["resources"]["my-page"],
+            serde_json::json!({"kind": "link", "href": "my-page.css"})
+        );
     }
 
     #[test]
-    fn test_render_partial_style_strategy_has_empty_template_styles() {
-        // Style-strategy components have CSS embedded in the template HTML
-        // (as <style>...</style>), not in component.css.
-        // templateStyles should be empty; templates should contain metadata.
+    fn test_render_partial_style_strategy_uses_component_styles() {
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
@@ -4028,41 +4561,31 @@ mod tests {
         );
 
         let mut protocol = WebUIProtocol::with_tokens(fragments, Vec::new());
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Style);
         let component = protocol
             .components
             .entry("my-page".to_string())
             .or_default();
-        // Style strategy: CSS is inside the template HTML, not in component.css
-        component.template_json = r#"{"h":"<style>.p{color:red}</style><p>page</p>"}"#.to_string();
-        // css is empty for Style strategy
+        component.template_json = r#"{"h":"<p>page</p>"}"#.to_string();
+        component.css = ".p{color:red}".to_string();
+        protocol.populate_style_closures(&["index.html"]);
 
         let mut index = ProtocolIndex::new(&protocol);
         let partial =
             render_partial_metadata(&protocol, "index.html", "/", "", &mut index).unwrap();
-        let styles = partial["templateStyles"]
-            .as_array()
-            .expect("templateStyles should be an array");
         let templates = partial["templates"]
             .as_object()
             .expect("templates should be an object");
 
-        assert!(
-            styles.is_empty(),
-            "Style strategy should produce empty templateStyles: {styles:?}"
-        );
         assert_eq!(templates.len(), 1, "should include template metadata");
-        assert!(
-            templates
-                .get("my-page")
-                .and_then(|template| template["h"].as_str())
-                .unwrap_or_default()
-                .contains("<style>"),
-            "Style strategy template should contain inline <style> tag"
+        assert_eq!(
+            partial["componentStyles"]["resources"]["my-page"],
+            serde_json::json!({"kind": "style", "css": ".p{color:red}"})
         );
     }
 
     #[test]
-    fn test_render_partial_empty_styles_for_no_css_components() {
+    fn test_render_partial_emits_empty_component_styles_for_no_css_components() {
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
@@ -4090,17 +4613,18 @@ mod tests {
         let mut index = ProtocolIndex::new(&protocol);
         let partial =
             render_partial_metadata(&protocol, "index.html", "/", "", &mut index).unwrap();
-        let styles = partial["templateStyles"]
-            .as_array()
-            .expect("templateStyles should be an array");
-        assert!(
-            styles.is_empty(),
-            "templateStyles should be empty when components have no CSS"
+        assert_eq!(
+            partial["componentStyles"]["resources"],
+            serde_json::json!({})
+        );
+        assert_eq!(
+            partial["componentStyles"]["closures"],
+            serde_json::json!({})
         );
     }
 
     #[test]
-    fn test_render_partial_sends_styles_even_when_templates_filtered_by_inventory() {
+    fn test_render_partial_filters_styles_with_template_inventory() {
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
@@ -4118,12 +4642,14 @@ mod tests {
         );
 
         let mut protocol = WebUIProtocol::with_tokens(fragments, Vec::new());
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
         let component = protocol
             .components
             .entry("my-page".to_string())
             .or_default();
         component.template_json = r#"{"h":"<p>page</p>"}"#.to_string();
         component.css = ".page{color:red}".to_string();
+        protocol.populate_style_closures(&["index.html"]);
 
         let mut index = ProtocolIndex::new(&protocol);
         // First call to establish inventory
@@ -4132,15 +4658,8 @@ mod tests {
         let inv = partial1["inventory"].as_str().unwrap_or_default();
         assert!(!inv.is_empty());
 
-        // Second call with the inventory — both templates and styles should be empty
-        // because the inventory covers this component.  The SSR handler emits all
-        // module style definitions in <head> for inventoried components, so the
-        // client already has the CSS definition.
         let partial2 =
             render_partial_metadata(&protocol, "index.html", "/", inv, &mut index).unwrap();
-        let styles = partial2["templateStyles"]
-            .as_array()
-            .expect("templateStyles should be an array");
         let templates = partial2["templates"]
             .as_object()
             .expect("templates should be an object");
@@ -4149,12 +4668,270 @@ mod tests {
             templates.is_empty(),
             "templates should be empty when inventory is full"
         );
+        assert_eq!(
+            partial2["componentStyles"]["resources"],
+            serde_json::json!({})
+        );
+        assert_eq!(
+            partial2["componentStyles"]["closures"],
+            serde_json::json!({})
+        );
+    }
+
+    #[test]
+    fn component_style_delta_sends_missing_and_reuses_registered_closure_resources() {
+        let mut protocol = WebUIProtocol::default();
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Style);
+        for tag in ["page-b", "shared-card"] {
+            protocol.fragments.insert(
+                tag.to_string(),
+                FragmentList {
+                    fragments: Vec::new(),
+                    contains_boundary: false,
+                },
+            );
+            protocol.components.insert(
+                tag.to_string(),
+                webui_protocol::ComponentData {
+                    css: format!(".{tag}{{display:block}}"),
+                    ..Default::default()
+                },
+            );
+        }
+        protocol.style_closures.insert(
+            "page-b".to_string(),
+            webui_protocol::ComponentStyleClosure {
+                component_tags: vec!["page-b".to_string(), "shared-card".to_string()],
+                style_chunks: Vec::new(),
+            },
+        );
+        protocol.style_closures.insert(
+            "shared-card".to_string(),
+            webui_protocol::ComponentStyleClosure {
+                component_tags: vec!["shared-card".to_string()],
+                style_chunks: Vec::new(),
+            },
+        );
+        let mut index = ProtocolIndex::new(&protocol);
+
+        let first_page =
+            render_component_templates(&protocol, &["page-b"], "", &mut index).unwrap();
+        assert!(first_page["componentStyles"]["resources"]["page-b"].is_object());
         assert!(
-            styles.is_empty(),
-            "module styles should be empty when inventory is full — SSR already placed them"
+            first_page["componentStyles"]["resources"]["shared-card"].is_object(),
+            "a missing closure dependency must be sent with its new root"
+        );
+
+        let shared =
+            render_component_templates(&protocol, &["shared-card"], "", &mut index).unwrap();
+        let shared_inventory = shared["inventory"].as_str().unwrap_or_default();
+        let page = render_component_templates(&protocol, &["page-b"], shared_inventory, &mut index)
+            .unwrap();
+        assert_eq!(
+            page["componentStyles"]["closures"]["page-b"],
+            serde_json::json!(["page-b", "shared-card"])
+        );
+        assert!(page["componentStyles"]["resources"]["page-b"].is_object());
+        assert!(
+            page["componentStyles"]["resources"]
+                .get("shared-card")
+                .is_none(),
+            "a resource already covered by inventory must not be retransmitted"
         );
     }
 
+    #[test]
+    fn bundled_style_metadata_tracks_chunks_independently_and_covers_members() {
+        let mut protocol = WebUIProtocol::default();
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Style);
+        for tag in ["a-card", "b-card"] {
+            protocol
+                .fragments
+                .insert(tag.to_string(), FragmentList::default());
+            protocol.components.insert(
+                tag.to_string(),
+                webui_protocol::ComponentData {
+                    css: format!(".{tag}{{display:block}}"),
+                    ..Default::default()
+                },
+            );
+            protocol.style_closures.insert(
+                tag.to_string(),
+                webui_protocol::ComponentStyleClosure {
+                    component_tags: vec![tag.to_string()],
+                    style_chunks: Vec::new(),
+                },
+            );
+        }
+        protocol
+            .fragments
+            .insert("index.html".to_string(), FragmentList::default());
+        protocol.style_closures.insert(
+            "index.html".to_string(),
+            webui_protocol::ComponentStyleClosure {
+                component_tags: vec!["a-card".to_string(), "b-card".to_string()],
+                style_chunks: vec![0],
+            },
+        );
+        protocol.style_chunks.push(webui_protocol::StyleChunk {
+            name: "_chunk-a-card-2".to_string(),
+            css: ".a-card{display:block}\n.b-card{display:block}".to_string(),
+            css_href: String::new(),
+            component_tags: vec!["a-card".to_string(), "b-card".to_string()],
+        });
+
+        let initial =
+            collect_component_styles(&protocol, ["index.html", "a-card", "b-card"]).unwrap();
+        assert_eq!(
+            initial["resources"]["_chunk-a-card-2"]["members"],
+            serde_json::json!(["a-card", "b-card"])
+        );
+        assert_eq!(
+            initial["closures"],
+            serde_json::json!({ "index.html": ["_chunk-a-card-2"] }),
+            "member closures already covered by the requested tree must not duplicate CSS"
+        );
+        assert_eq!(
+            initial["resources"].as_object().map(serde_json::Map::len),
+            Some(1)
+        );
+
+        let component_index = build_component_index(&protocol);
+        let mut component_inventory = vec![0u8; component_index.len().div_ceil(8)];
+        for index in component_index.values() {
+            set_component(&mut component_inventory, *index);
+        }
+        let from_component_inventory = collect_component_styles_for_inventory(
+            &protocol,
+            ["index.html"],
+            &component_inventory,
+            &component_index,
+        )
+        .unwrap();
+        assert!(
+            from_component_inventory["resources"]["_chunk-a-card-2"].is_object(),
+            "component-template bits do not prove that the client registered a chunk"
+        );
+
+        let style_index = build_style_resource_index(&protocol);
+        let mut style_inventory = vec![0u8; style_index.len().div_ceil(8)];
+        set_component(&mut style_inventory, style_index["_chunk-a-card-2"]);
+        let from_style_inventory = collect_component_style_delta(
+            &protocol,
+            ["index.html"],
+            &style_inventory,
+            &style_index,
+        )
+        .unwrap();
+        assert_eq!(
+            from_style_inventory["resources"],
+            serde_json::json!({}),
+            "the exact style-resource inventory should suppress a registered chunk"
+        );
+    }
+
+    /// A closure that lists members must still deliver the chunk that ships
+    /// them.
+    ///
+    /// Only closures the bundler treated as roots carry `style_chunks`; a plain
+    /// Light component keeps its member list. Delivering those members verbatim
+    /// re-ships bytes the covering chunk already contains, and leaves the
+    /// closure correct only if some other closure installs the chunk first.
+    /// Resolving each member through the chunk index removes both problems.
+    #[test]
+    fn member_closures_deliver_the_chunk_that_covers_them() {
+        let mut protocol = WebUIProtocol::default();
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Style);
+        for tag in ["a-card", "b-card"] {
+            protocol
+                .fragments
+                .insert(tag.to_string(), FragmentList::default());
+            protocol.components.insert(
+                tag.to_string(),
+                webui_protocol::ComponentData {
+                    css: format!(".{tag}{{display:block}}"),
+                    ..Default::default()
+                },
+            );
+        }
+        protocol
+            .fragments
+            .insert("lazy-panel".to_string(), FragmentList::default());
+        // Not a bundler root, so it keeps its member list.
+        protocol.style_closures.insert(
+            "lazy-panel".to_string(),
+            webui_protocol::ComponentStyleClosure {
+                component_tags: vec!["a-card".to_string(), "b-card".to_string()],
+                style_chunks: Vec::new(),
+            },
+        );
+        protocol.style_chunks.push(webui_protocol::StyleChunk {
+            name: "_chunk-a-card-2".to_string(),
+            css: ".a-card{display:block}\n.b-card{display:block}".to_string(),
+            css_href: String::new(),
+            component_tags: vec!["a-card".to_string(), "b-card".to_string()],
+        });
+
+        let styles = collect_component_styles(&protocol, ["lazy-panel"]).unwrap();
+        assert_eq!(
+            styles["closures"],
+            serde_json::json!({ "lazy-panel": ["_chunk-a-card-2"] }),
+            "both members resolve to one chunk, named once"
+        );
+        assert_eq!(
+            styles["resources"].as_object().map(serde_json::Map::len),
+            Some(1),
+            "the per-member stylesheets the chunk already contains are not re-shipped"
+        );
+        assert!(
+            styles["resources"]["_chunk-a-card-2"].is_object(),
+            "the closure carries the chunk itself, not a dependency on another closure"
+        );
+    }
+
+    /// A member with no covering chunk still delivers its own stylesheet.
+    #[test]
+    fn member_closures_fall_back_when_no_chunk_covers_them() {
+        let mut protocol = WebUIProtocol::default();
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Style);
+        for tag in ["a-card", "solo-card"] {
+            protocol
+                .fragments
+                .insert(tag.to_string(), FragmentList::default());
+            protocol.components.insert(
+                tag.to_string(),
+                webui_protocol::ComponentData {
+                    css: format!(".{tag}{{display:block}}"),
+                    ..Default::default()
+                },
+            );
+        }
+        protocol
+            .fragments
+            .insert("lazy-panel".to_string(), FragmentList::default());
+        protocol.style_closures.insert(
+            "lazy-panel".to_string(),
+            webui_protocol::ComponentStyleClosure {
+                component_tags: vec!["a-card".to_string(), "solo-card".to_string()],
+                style_chunks: Vec::new(),
+            },
+        );
+        protocol.style_chunks.push(webui_protocol::StyleChunk {
+            name: "_chunk-a-card-1".to_string(),
+            css: ".a-card{display:block}".to_string(),
+            css_href: String::new(),
+            component_tags: vec!["a-card".to_string()],
+        });
+
+        let styles = collect_component_styles(&protocol, ["lazy-panel"]).unwrap();
+        assert_eq!(
+            styles["closures"],
+            serde_json::json!({ "lazy-panel": ["_chunk-a-card-1", "solo-card"] }),
+            "cascade order is preserved across the chunked and unchunked members"
+        );
+        assert!(styles["resources"]["solo-card"].is_object());
+    }
+
     #[test]
     fn test_non_route_siblings_included_in_needed_components() {
         // Reproduces the commerce app layout: mp-app has both route children
@@ -4504,33 +5281,28 @@ mod tests {
             },
         );
         let mut protocol = WebUIProtocol::with_tokens(fragments, Vec::new());
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
         let comp = protocol
             .components
             .entry("settings-dialog".to_string())
             .or_default();
         comp.template_json = r#"{"h":"<div>Settings</div>"}"#.to_string();
         comp.css = ".dialog{position:fixed}".to_string();
+        protocol.populate_style_closures(&["settings-dialog"]);
 
         let mut index = ProtocolIndex::new(&protocol);
         let result =
             render_component_templates(&protocol, &["settings-dialog"], "", &mut index).unwrap();
         let templates = result["templates"].as_object().expect("templates object");
-        let styles = result["templateStyles"].as_array().expect("styles array");
-
         assert_eq!(templates.len(), 1);
         assert_eq!(templates["settings-dialog"]["h"], "<div>Settings</div>");
-        assert_eq!(styles.len(), 1);
-        let style_html = styles[0].as_str().unwrap();
-        assert!(
-            style_html.starts_with(r#"<script type="importmap""#)
-                && style_html.contains(r#""settings-dialog":"data:text/css,"#),
-            "templateStyles entry should be an importmap registering settings-dialog: {style_html}"
-        );
-        // CSS content is embedded inside the data: URI verbatim — `{`, `}`,
-        // `\` are not in the percent-encode set.
-        assert!(
-            style_html.contains(".dialog{position:fixed}"),
-            "templateStyles entry should contain the CSS content verbatim: {style_html}"
+        assert_eq!(
+            result["componentStyles"]["resources"]["settings-dialog"],
+            serde_json::json!({
+                "kind": "module",
+                "specifier": "settings-dialog",
+                "css": ".dialog{position:fixed}"
+            })
         );
         assert!(
             index
@@ -4551,12 +5323,14 @@ mod tests {
             },
         );
         let mut protocol = WebUIProtocol::with_tokens(fragments, Vec::new());
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
         let comp = protocol
             .components
             .entry("my-dialog".to_string())
             .or_default();
         comp.template_json = r#"{"h":"<div>Dialog</div>"}"#.to_string();
         comp.css = ".d{color:red}".to_string();
+        protocol.populate_style_closures(&["my-dialog"]);
 
         let mut index = ProtocolIndex::new(&protocol);
         // First call: no inventory → should return the component
@@ -4569,7 +5343,14 @@ mod tests {
         let result2 =
             render_component_templates(&protocol, &["my-dialog"], inv, &mut index).unwrap();
         assert_eq!(result2["templates"].as_object().unwrap().len(), 0);
-        assert_eq!(result2["templateStyles"].as_array().unwrap().len(), 0);
+        assert_eq!(
+            result2["componentStyles"]["closures"],
+            serde_json::json!({})
+        );
+        assert_eq!(
+            result2["componentStyles"]["resources"],
+            serde_json::json!({})
+        );
     }
 
     #[test]
@@ -4581,7 +5362,10 @@ mod tests {
         let result =
             render_component_templates(&protocol, &["nonexistent-widget"], "", &mut index).unwrap();
         assert_eq!(result["templates"].as_object().unwrap().len(), 0);
-        assert_eq!(result["templateStyles"].as_array().unwrap().len(), 0);
+        assert_eq!(
+            result["componentStyles"]["resources"],
+            serde_json::json!({})
+        );
     }
 
     #[test]
diff --git a/crates/webui-handler/src/streaming/checkpoint.rs b/crates/webui-handler/src/streaming/checkpoint.rs
index 71233e1b2..54c6091bb 100644
--- a/crates/webui-handler/src/streaming/checkpoint.rs
+++ b/crates/webui-handler/src/streaming/checkpoint.rs
@@ -3,9 +3,11 @@
 
 //! Version-2 checkpoint, update, span-completion, and terminal serialization.
 
+use super::error::component_style_payload_resources_missing_error;
 use super::inventory::{
     commit_checkpoint_inventory, expand_static_checkpoint_reachability,
-    mark_streaming_template_sent, replace_checkpoint_reachability,
+    mark_streaming_style_resource_sent, mark_streaming_template_sent,
+    replace_checkpoint_reachability,
 };
 use super::state::StateUpdatePlan;
 use super::{flush_streaming_transport, streaming_state, MarkerBuffer};
@@ -119,6 +121,25 @@ impl WebUIHandler {
             }
         }
 
+        // Rendered components emitted module importmaps inline before their
+        // declarative shadow roots. Emit the same metadata here only for
+        // reachable-but-unrendered descendants.
+        if context.css_strategy == webui_protocol::CssStrategy::Module {
+            for &name in &new_template_tags {
+                if !context.rendered_components.contains(name) {
+                    if let Some(css) = context
+                        .protocol
+                        .components
+                        .get(name)
+                        .map(|component| component.css.as_str())
+                        .filter(|css| !css.is_empty())
+                    {
+                        self.emit_css_module_importmap(name, css, context)?;
+                    }
+                }
+            }
+        }
+
         let template_payloads = context.plugin.as_ref().and_then(|plugin| {
             plugin.collect_template_payloads_slice(context.protocol, &new_template_tags)
         });
@@ -136,15 +157,14 @@ impl WebUIHandler {
             &mut state_key_ids,
         );
         let chain = if first_checkpoint {
-            crate::route_handler::collect_route_chain(
-                context.protocol,
-                context.entry_id,
-                context.request_path,
-                context.route_index,
-            )
-            .iter()
-            .map(crate::route_handler::RouteChainEntry::to_json)
-            .collect::<Vec<_>>()
+            crate::WebUIHandler::ensure_request_route_chain(context);
+            match context.route_chain.as_deref() {
+                Some(chain) => chain
+                    .iter()
+                    .map(crate::route_handler::RouteChainEntry::to_json)
+                    .collect::<Vec<_>>(),
+                None => Vec::new(),
+            }
         } else {
             Vec::new()
         };
@@ -157,13 +177,15 @@ impl WebUIHandler {
         };
         css_hrefs.clear();
         style_specs.clear();
-        let is_link = context.protocol.css_strategy() == webui_protocol::CssStrategy::Link;
+        let css_strategy = context.css_strategy;
+        let is_link = css_strategy == webui_protocol::CssStrategy::Link;
+        let is_module = css_strategy == webui_protocol::CssStrategy::Module;
         for &name in &new_template_tags {
             if let Some(component) = context.protocol.components.get(name) {
                 if is_link && !component.css_href.is_empty() {
                     css_hrefs.push(component.css_href.as_str());
                 }
-                if !component.css.is_empty() {
+                if is_module && !component.css.is_empty() {
                     style_specs.push(name);
                 }
             }
@@ -186,6 +208,31 @@ impl WebUIHandler {
 
         let empty_payloads: [WebUiTemplatePayload<'_>; 0] = [];
         let payloads = template_payloads.as_deref().unwrap_or(&empty_payloads);
+        let entry_style_root = first_checkpoint.then_some(context.entry_id);
+        let style_roots = entry_style_root
+            .into_iter()
+            .chain(new_template_tags.iter().copied());
+        let component_styles = {
+            let style_inventory = context.streaming.as_ref().map_or(&[][..], |streaming| {
+                streaming.style_resource_inventory.as_slice()
+            });
+            crate::route_handler::collect_component_style_delta(
+                context.protocol,
+                style_roots,
+                style_inventory,
+                context.style_resource_index,
+            )?
+        };
+        let resources = component_styles
+            .get("resources")
+            .and_then(serde_json::Value::as_object)
+            .ok_or_else(component_style_payload_resources_missing_error)?;
+        for resource in resources.keys() {
+            let Some(&index) = context.style_resource_index.get(resource) else {
+                continue;
+            };
+            mark_streaming_style_resource_sent(streaming_state(context)?, index)?;
+        }
         write_record_open(context, record.kind(), record.target())?;
         let (declaration_id, enclosing_span_instance_id) = match record {
             RangeRecord::Boundary {
@@ -220,6 +267,7 @@ impl WebUIHandler {
                 nonce: context.nonce,
                 css_hrefs: &css_hrefs,
                 style_specs: &style_specs,
+                component_styles: &component_styles,
                 templates: payloads,
             },
         )?;
diff --git a/crates/webui-handler/src/streaming/error.rs b/crates/webui-handler/src/streaming/error.rs
index 61e73be69..03cbe9639 100644
--- a/crates/webui-handler/src/streaming/error.rs
+++ b/crates/webui-handler/src/streaming/error.rs
@@ -14,6 +14,24 @@ pub(crate) fn streaming_boundary_error(signal: &str, reason: &str) -> HandlerErr
     }))
 }
 
+#[cold]
+#[inline(never)]
+pub(super) fn component_style_payload_resources_missing_error() -> HandlerError {
+    HandlerError::Invariant("component style payload resources are missing".to_string())
+}
+
+#[cold]
+#[inline(never)]
+pub(super) fn component_style_inventory_error(reason: &'static str) -> HandlerError {
+    HandlerError::Invariant(reason.to_string())
+}
+
+/// A streamed component host (`streaming_root:<tag>`) was authored outside any
+/// `<boundary>`. Such a host can never be progressively activated, so the
+/// streaming render fails with an actionable structured error instead of
+/// emitting dead markup. Cold and out-of-line: reuses the boxed
+/// [`HandlerError::StreamingBoundary`] variant so no error widens the small
+/// hot-path `Result`.
 #[cold]
 #[inline(never)]
 pub(super) fn streaming_root_outside_boundary_error(tag: &str) -> HandlerError {
diff --git a/crates/webui-handler/src/streaming/inventory.rs b/crates/webui-handler/src/streaming/inventory.rs
index c24cd06e4..8ab0a9737 100644
--- a/crates/webui-handler/src/streaming/inventory.rs
+++ b/crates/webui-handler/src/streaming/inventory.rs
@@ -9,6 +9,7 @@
 
 use std::collections::HashMap;
 
+use super::error::component_style_inventory_error;
 use super::StreamingRenderState;
 use crate::{HandlerError, Result, WebUIProcessContext};
 
@@ -265,11 +266,27 @@ pub(super) fn mark_streaming_template_sent(
     Ok(true)
 }
 
+/// Mark one indexed style resource definition as delivered.
+pub(super) fn mark_streaming_style_resource_sent(
+    streaming: &mut StreamingRenderState<'_>,
+    index: u32,
+) -> Result<()> {
+    let byte_index = usize::try_from(index / 8)
+        .map_err(|_| component_style_inventory_error("component style index does not fit usize"))?;
+    if byte_index >= streaming.style_resource_inventory.len() {
+        return Err(component_style_inventory_error(
+            "component style index exceeds the request-local bitset",
+        ));
+    }
+    streaming.style_resource_inventory[byte_index] |= 1u8 << (index % 8);
+    Ok(())
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
     use crate::route_handler::Protocol;
-    use std::collections::HashMap;
+    use std::collections::{HashMap, HashSet};
     use webui_protocol::{FragmentList, WebUIProtocol};
 
     #[test]
@@ -285,7 +302,7 @@ mod tests {
             Vec::new(),
         ));
         let mut streaming = StreamingRenderState::from_progress(
-            super::super::state::StreamingProgress::new(2),
+            super::super::state::StreamingProgress::new(2, 2),
             protocol.component_reachability(),
         );
         streaming.head_marker_emitted = true;
@@ -380,7 +397,7 @@ mod tests {
         );
 
         let mut streaming = StreamingRenderState::from_progress(
-            super::super::state::StreamingProgress::new(component_index.len()),
+            super::super::state::StreamingProgress::new(component_index.len(), 0),
             protocol.component_reachability(),
         );
         let state = serde_json::Value::Object(serde_json::Map::new());
@@ -401,6 +418,9 @@ mod tests {
             entry_id: "index.html",
             nonce: None,
             component_index,
+            style_resource_index: protocol.style_resource_index(),
+            style_chunk_index: protocol.protocol().style_chunk_index(),
+            css_strategy: protocol.css_strategy(),
             head_inject: None,
             body_inject: None,
             state_inject: crate::StateInject::resolve(&state),
@@ -410,9 +430,14 @@ mod tests {
             body_end_emitted: false,
             route_index: protocol.route_index(),
             route_chain_index: 0,
+            route_chain: None,
+            route_document_style_targets: Vec::new(),
+            reachable_components: None,
             streaming: Some(&mut streaming),
             json_scratch: Vec::new(),
             scope_pool: Vec::new(),
+            document_style_resources: HashSet::new(),
+            shadow_style_roots: Vec::new(),
         };
 
         record_checkpoint_tag(&mut context, "route-shell");
diff --git a/crates/webui-handler/src/streaming/session.rs b/crates/webui-handler/src/streaming/session.rs
index 4db90fc4c..cb80074fb 100644
--- a/crates/webui-handler/src/streaming/session.rs
+++ b/crates/webui-handler/src/streaming/session.rs
@@ -180,6 +180,7 @@ impl WebUIHandler {
         options: &RenderOptions<'a>,
         writer: &'a mut W,
     ) -> Result<StreamingResponse<'a, W>> {
+        protocol.ensure_style_metadata()?;
         let core = SessionCore::new(self, protocol, options.entry_id)?;
         Ok(StreamingResponse {
             handler: self,
@@ -305,6 +306,8 @@ pub(crate) struct SessionCore {
     component_attrs: HashMap<String, Value>,
     route_base: Option<String>,
     rendered_components: HashSet<String>,
+    document_style_resources: HashSet<String>,
+    shadow_style_roots: Vec<crate::ShadowStyleRoot>,
     plugin: Option<Box<dyn HandlerPlugin>>,
     route_children: Vec<webui_protocol::WebUiFragmentRoute>,
     head_end_emitted: bool,
@@ -312,6 +315,9 @@ pub(crate) struct SessionCore {
     component_asset_styles_emitted: bool,
     body_end_emitted: bool,
     route_chain_index: usize,
+    route_chain: Option<Vec<crate::route_handler::RouteChainEntry>>,
+    route_document_style_targets: Vec<bool>,
+    reachable_components: Option<Vec<String>>,
     streaming: Option<StreamingProgress>,
     json_scratch: Vec<u8>,
     scope_pool: Vec<HashMap<String, Value>>,
@@ -343,6 +349,8 @@ impl SessionCore {
             component_attrs: HashMap::new(),
             route_base: None,
             rendered_components: HashSet::new(),
+            document_style_resources: HashSet::new(),
+            shadow_style_roots: Vec::new(),
             plugin: handler.plugin_factory.map(|factory| factory()),
             route_children: Vec::new(),
             head_end_emitted: false,
@@ -350,7 +358,13 @@ impl SessionCore {
             component_asset_styles_emitted: false,
             body_end_emitted: false,
             route_chain_index: 0,
-            streaming: Some(StreamingProgress::new(protocol.component_index().len())),
+            route_chain: None,
+            route_document_style_targets: Vec::new(),
+            reachable_components: None,
+            streaming: Some(StreamingProgress::new(
+                protocol.component_index().len(),
+                protocol.style_resource_index().len(),
+            )),
             json_scratch: Vec::new(),
             scope_pool: Vec::new(),
         })
@@ -481,6 +495,12 @@ impl SessionCore {
         self.frozen_state = state;
         match result {
             Ok(status) => {
+                if status.done && !self.shadow_style_roots.is_empty() {
+                    self.failed = true;
+                    return Err(HandlerError::Invariant(
+                        "a Shadow CSS tree escaped its component instance".to_string(),
+                    ));
+                }
                 self.done = status.done;
                 self.awaiting_advance = goal == StepGoal::CommitBoundary && !status.done;
                 Ok(status)
@@ -530,6 +550,9 @@ impl SessionCore {
             entry_id: options.entry_id,
             nonce: options.nonce.filter(|nonce| !nonce.is_empty()),
             component_index: protocol.component_index(),
+            style_resource_index: protocol.style_resource_index(),
+            style_chunk_index: protocol.protocol().style_chunk_index(),
+            css_strategy: protocol.css_strategy(),
             head_inject: options.head_inject.filter(|html| !html.is_empty()),
             body_inject: options.body_inject.filter(|html| !html.is_empty()),
             state_inject: crate::StateInject::resolve(state),
@@ -539,9 +562,14 @@ impl SessionCore {
             body_end_emitted: self.body_end_emitted,
             route_index: protocol.route_index(),
             route_chain_index: self.route_chain_index,
+            route_chain: std::mem::take(&mut self.route_chain),
+            route_document_style_targets: std::mem::take(&mut self.route_document_style_targets),
+            reachable_components: std::mem::take(&mut self.reachable_components),
             streaming: Some(&mut streaming),
             json_scratch: std::mem::take(&mut self.json_scratch),
             scope_pool: std::mem::take(&mut self.scope_pool),
+            document_style_resources: std::mem::take(&mut self.document_style_resources),
+            shadow_style_roots: std::mem::take(&mut self.shadow_style_roots),
         };
         let result = operation(&mut self.vm, &mut context);
         self.local_vars = std::mem::take(&mut context.local_vars);
@@ -558,8 +586,14 @@ impl SessionCore {
         self.component_asset_styles_emitted = context.component_asset_styles_emitted;
         self.body_end_emitted = context.body_end_emitted;
         self.route_chain_index = context.route_chain_index;
+        self.route_chain = std::mem::take(&mut context.route_chain);
+        self.route_document_style_targets =
+            std::mem::take(&mut context.route_document_style_targets);
+        self.reachable_components = std::mem::take(&mut context.reachable_components);
         self.json_scratch = std::mem::take(&mut context.json_scratch);
         self.scope_pool = std::mem::take(&mut context.scope_pool);
+        self.shadow_style_roots = std::mem::take(&mut context.shadow_style_roots);
+        self.document_style_resources = std::mem::take(&mut context.document_style_resources);
         self.streaming = Some(streaming.into_progress());
         result
     }
@@ -724,6 +758,7 @@ mod tests {
             ISLAND_TAG.to_string(),
             ComponentData {
                 template_json: r#"{"h":"<button></button>","th":1}"#.to_string(),
+                uses_shadow_dom: true,
                 hydration_mode: hydration_mode as i32,
                 hydration_keys: if matches!(hydration_mode, StateProjectionMode::Keys) {
                     vec!["count".to_string(), "title".to_string()]
@@ -733,6 +768,7 @@ mod tests {
                 ..Default::default()
             },
         );
+        document.populate_style_closures(&["index.html"]);
         Protocol::new(document)
     }
 
diff --git a/crates/webui-handler/src/streaming/state.rs b/crates/webui-handler/src/streaming/state.rs
index 52fe818a3..0fc7faedf 100644
--- a/crates/webui-handler/src/streaming/state.rs
+++ b/crates/webui-handler/src/streaming/state.rs
@@ -54,7 +54,21 @@ pub(crate) struct StreamingRenderState<'data> {
     pub(super) inventory: Vec<u8>,
     pub(super) inventory_delta: Vec<u8>,
     pub(super) inventory_hex: String,
+    /// Dedup bitset for template metadata and style closures already delivered.
+    /// Kept separate from `inventory`: reachable-but-unrendered descendants
+    /// receive metadata but must not be reported as rendered DOM.
     pub(super) template_inventory: Vec<u8>,
+    /// Dedup bitset for style resource definitions already delivered. A resource
+    /// can arrive transitively through an earlier root's closure before its own
+    /// template or closure is emitted.
+    pub(super) style_resource_inventory: Vec<u8>,
+    /// Unique component indexes rendered since the previous checkpoint, in
+    /// render order. Storing the startup-built index rather than the tag string
+    /// keeps capture allocation-free, lets every consumer skip the
+    /// `component_index` hash lookup it would otherwise repeat, and leaves this
+    /// vector free of any borrow so a host-owned session can retain it across
+    /// calls. The vector is cleared after commit while retaining capacity for
+    /// the next checkpoint.
     pub(super) checkpoint_tags: Vec<u32>,
     pub(super) checkpoint_walk_roots: Vec<(u32, Option<Box<str>>)>,
     pub(super) checkpoint_seen: Vec<u8>,
@@ -91,6 +105,7 @@ pub(crate) struct StreamingProgress {
     pub(super) inventory_delta: Vec<u8>,
     pub(super) inventory_hex: String,
     pub(super) template_inventory: Vec<u8>,
+    pub(super) style_resource_inventory: Vec<u8>,
     pub(super) checkpoint_tags: Vec<u32>,
     pub(super) checkpoint_walk_roots: Vec<(u32, Option<Box<str>>)>,
     pub(super) checkpoint_seen: Vec<u8>,
@@ -101,8 +116,10 @@ pub(crate) struct StreamingProgress {
 }
 
 impl StreamingProgress {
-    pub(crate) fn new(component_count: usize) -> Self {
+    /// Allocate request-local bitsets for indexed components and style resources.
+    pub(crate) fn new(component_count: usize, style_resource_count: usize) -> Self {
         let inventory_bytes = component_count.div_ceil(8);
+        let style_inventory_bytes = style_resource_count.div_ceil(8);
         Self {
             head_marker_emitted: false,
             active_boundary: None,
@@ -116,6 +133,7 @@ impl StreamingProgress {
             inventory_delta: vec![0; inventory_bytes],
             inventory_hex: String::with_capacity(inventory_bytes * 2),
             template_inventory: vec![0; inventory_bytes],
+            style_resource_inventory: vec![0; style_inventory_bytes],
             checkpoint_tags: Vec::new(),
             checkpoint_walk_roots: Vec::new(),
             checkpoint_seen: vec![0; inventory_bytes],
@@ -153,6 +171,7 @@ impl<'data> StreamingRenderState<'data> {
             inventory_delta: progress.inventory_delta,
             inventory_hex: progress.inventory_hex,
             template_inventory: progress.template_inventory,
+            style_resource_inventory: progress.style_resource_inventory,
             checkpoint_tags: progress.checkpoint_tags,
             checkpoint_walk_roots: progress.checkpoint_walk_roots,
             checkpoint_seen: progress.checkpoint_seen,
@@ -177,6 +196,7 @@ impl<'data> StreamingRenderState<'data> {
             inventory_delta: self.inventory_delta,
             inventory_hex: self.inventory_hex,
             template_inventory: self.template_inventory,
+            style_resource_inventory: self.style_resource_inventory,
             checkpoint_tags: self.checkpoint_tags,
             checkpoint_walk_roots: self.checkpoint_walk_roots,
             checkpoint_seen: self.checkpoint_seen,
diff --git a/crates/webui-handler/src/streaming/vm.rs b/crates/webui-handler/src/streaming/vm.rs
index d82b21d33..7f9a76db3 100644
--- a/crates/webui-handler/src/streaming/vm.rs
+++ b/crates/webui-handler/src/streaming/vm.rs
@@ -223,9 +223,7 @@ struct OpenSpan {
 enum Frame {
     EnterFragment(u32),
     Fragment(FragmentFrame),
-    ComponentEnd {
-        saved_local_vars: HashMap<String, Value>,
-    },
+    ComponentEnd(ComponentEndFrame),
     IfEnd {
         slot: u32,
     },
@@ -244,6 +242,12 @@ enum Frame {
     Outlet(OutletFrame),
 }
 
+struct ComponentEndFrame {
+    saved_local_vars: HashMap<String, Value>,
+    component_slot: u32,
+    owns_css_tree: bool,
+}
+
 struct FragmentFrame {
     slot: u32,
     index: usize,
@@ -421,9 +425,7 @@ impl ContinuationVm {
                         return Ok(status);
                     }
                 }
-                Frame::ComponentEnd { saved_local_vars } => {
-                    self.end_component(saved_local_vars, context)?;
-                }
+                Frame::ComponentEnd(frame) => self.end_component(frame, protocol, context)?,
                 Frame::IfEnd { slot } => {
                     if let Some(plugin) = context.plugin.as_mut() {
                         let fragment_id = protocol
@@ -711,6 +713,12 @@ impl ContinuationVm {
                 .rendered_components
                 .insert(component.fragment_id.clone());
         }
+        let slot = fragment_slot(protocol, &component.fragment_id)?;
+        let owns_css_tree =
+            WebUIHandler::component_owns_css_tree(&component.fragment_id, protocol.protocol());
+        if owns_css_tree {
+            WebUIHandler::push_shadow_style_root(&component.fragment_id, context)?;
+        }
         let saved_local_vars = std::mem::take(&mut context.local_vars);
         let saved_component_attrs = std::mem::replace(
             &mut context.component_attrs,
@@ -720,23 +728,33 @@ impl ContinuationVm {
         if let Some(plugin) = context.plugin.as_mut() {
             plugin.push_scope();
         }
-        self.push(Frame::ComponentEnd { saved_local_vars })?;
-        let slot = fragment_slot(protocol, &component.fragment_id)?;
+        self.push(Frame::ComponentEnd(ComponentEndFrame {
+            saved_local_vars,
+            component_slot: slot,
+            owns_css_tree,
+        }))?;
         self.push(Frame::EnterFragment(slot))?;
         Ok(())
     }
 
     fn end_component(
         &mut self,
-        saved_local_vars: HashMap<String, Value>,
+        frame: ComponentEndFrame,
+        protocol: &crate::Protocol,
         context: &mut WebUIProcessContext<'_, '_, '_>,
     ) -> Result<()> {
         if let Some(plugin) = context.plugin.as_mut() {
             plugin.pop_scope();
         }
-        let used_locals = std::mem::replace(&mut context.local_vars, saved_local_vars);
+        let used_locals = std::mem::replace(&mut context.local_vars, frame.saved_local_vars);
         crate::recycle_scope_map(&mut context.scope_pool, used_locals);
         context.component_attrs.clear();
+        if frame.owns_css_tree {
+            let component = protocol
+                .fragment_id(frame.component_slot)
+                .ok_or_else(|| unknown_fragment_slot_error(frame.component_slot))?;
+            WebUIHandler::pop_shadow_style_root(component, context)?;
+        }
         Ok(())
     }
 
diff --git a/crates/webui-handler/tests/streaming_v2.rs b/crates/webui-handler/tests/streaming_v2.rs
index 4669b4b5b..f876fffd9 100644
--- a/crates/webui-handler/tests/streaming_v2.rs
+++ b/crates/webui-handler/tests/streaming_v2.rs
@@ -26,7 +26,18 @@ fn parsed_protocol_data(entry: &str, components: &[(&str, &str)]) -> WebUIProtoc
             .unwrap();
     }
     parser.parse("index.html", entry).unwrap();
-    WebUIProtocol::new(parser.into_fragment_records())
+    let mut protocol = WebUIProtocol::new(parser.into_fragment_records());
+    for (tag, _) in components {
+        protocol.components.insert(
+            (*tag).to_string(),
+            ComponentData {
+                uses_shadow_dom: true,
+                ..Default::default()
+            },
+        );
+    }
+    protocol.populate_style_closures(&["index.html"]);
+    protocol
 }
 
 fn new_session(protocol: Arc<Protocol>, path: &str) -> StreamingSession {
@@ -516,6 +527,7 @@ fn selected_route_component_hydration_keys_survive_frozen_state() {
         ComponentData {
             hydration_mode: StateProjectionMode::Keys as i32,
             hydration_keys: vec!["selectedHydration".to_string()],
+            uses_shadow_dom: true,
             ..Default::default()
         },
     );
@@ -524,6 +536,7 @@ fn selected_route_component_hydration_keys_survive_frozen_state() {
         ComponentData {
             hydration_mode: StateProjectionMode::Keys as i32,
             hydration_keys: vec!["inactiveHydration".to_string()],
+            uses_shadow_dom: true,
             ..Default::default()
         },
     );
@@ -562,6 +575,7 @@ fn route_component_all_projection_keeps_full_state_for_resume() {
         "route-page".to_string(),
         ComponentData {
             hydration_mode: StateProjectionMode::All as i32,
+            uses_shadow_dom: true,
             ..Default::default()
         },
     );
diff --git a/crates/webui-node/src/lib.rs b/crates/webui-node/src/lib.rs
index 434cc78df..acf039152 100644
--- a/crates/webui-node/src/lib.rs
+++ b/crates/webui-node/src/lib.rs
@@ -97,10 +97,15 @@ pub struct JsBuildOptions {
     pub app_dir: String,
     /// Entry HTML file name (defaults to "index.html").
     pub entry: Option<String>,
-    /// CSS mode: "link" (default) or "style".
+    /// CSS mode: "link" (default), "style", or "module".
     pub css: Option<String>,
-    /// DOM strategy for component rendering: "shadow" (default) or "light".
+    /// Fallback DOM strategy: "shadow" (default) or "light".
     pub dom: Option<String>,
+    /// Merge component stylesheets into shared bundled chunks.
+    ///
+    /// Composes with `css`: bundling decides how stylesheets are grouped, `css`
+    /// decides how they reach the page.
+    pub css_bundle: Option<bool>,
     /// Plugin identifier (see crate documentation for available identifiers).
     pub plugin: Option<String>,
     /// Additional component sources (npm packages or local paths).
@@ -135,10 +140,9 @@ pub fn build(options: JsBuildOptions) -> napi::Result<JsBuildResult> {
         .transpose()
         .map_err(NapiError::from_reason)?
         .unwrap_or_default();
-
     let dom = options
         .dom
-        .map(|s| s.parse::<webui::DomStrategy>())
+        .map(|value| value.parse::<webui::DomStrategy>())
         .transpose()
         .map_err(NapiError::from_reason)?
         .unwrap_or_default();
@@ -185,6 +189,7 @@ pub fn build(options: JsBuildOptions) -> napi::Result<JsBuildResult> {
         entry: options.entry.unwrap_or_else(|| "index.html".to_string()),
         css,
         dom,
+        css_bundle: options.css_bundle.unwrap_or(false),
         plugin,
         components: options.components.unwrap_or_default(),
         component_asset_roots: options.component_asset_roots.unwrap_or_default(),
@@ -1140,6 +1145,7 @@ mod tests {
             entry: None,
             css: None,
             dom: None,
+            css_bundle: None,
             plugin: Some("webui".to_string()),
             components: None,
             component_asset_roots: None,
@@ -1197,6 +1203,7 @@ mod tests {
             entry: None,
             css: None,
             dom: None,
+            css_bundle: None,
             plugin: None,
             components: None,
             component_asset_roots: None,
@@ -1226,6 +1233,7 @@ mod tests {
             entry: Some("page.html".to_string()),
             css: None,
             dom: None,
+            css_bundle: None,
             plugin: None,
             components: None,
             component_asset_roots: None,
@@ -1249,6 +1257,7 @@ mod tests {
             entry: None,
             css: None,
             dom: None,
+            css_bundle: None,
             plugin: None,
             components: None,
             component_asset_roots: None,
@@ -1275,6 +1284,7 @@ mod tests {
             entry: None,
             css: Some("bogus".to_string()),
             dom: None,
+            css_bundle: None,
             plugin: None,
             components: None,
             component_asset_roots: None,
@@ -1291,11 +1301,37 @@ mod tests {
         assert!(result.is_err());
     }
 
+    #[test]
+    fn test_build_invalid_dom_strategy() {
+        let dir = tempfile::TempDir::new().unwrap();
+        std::fs::write(dir.path().join("index.html"), "<h1>Hello</h1>").unwrap();
+
+        let options = JsBuildOptions {
+            app_dir: dir.path().to_string_lossy().to_string(),
+            entry: None,
+            css: None,
+            dom: Some("closed".to_string()),
+            css_bundle: None,
+            plugin: None,
+            components: None,
+            component_asset_roots: None,
+            metafile: None,
+            css_file_name_template: None,
+            css_public_base: None,
+            legal_comments: None,
+            theme: None,
+            projection_manifests: None,
+            projection_manifest_objects: None,
+        };
+
+        assert!(build(options).is_err());
+    }
+
     #[test]
     fn test_build_with_components_css() {
         let dir = tempfile::TempDir::new().unwrap();
         std::fs::write(dir.path().join("index.html"), "<my-card>Hello</my-card>").unwrap();
-        std::fs::write(dir.path().join("my-card.html"), "<div><slot></slot></div>").unwrap();
+        std::fs::write(dir.path().join("my-card.html"), "<div>content</div>").unwrap();
         std::fs::write(dir.path().join("my-card.css"), ".card { color: red; }").unwrap();
 
         let options = JsBuildOptions {
@@ -1303,6 +1339,7 @@ mod tests {
             entry: None,
             css: Some("link".to_string()),
             dom: None,
+            css_bundle: None,
             plugin: None,
             components: None,
             component_asset_roots: None,
@@ -1341,6 +1378,7 @@ mod tests {
             entry: None,
             css: Some("link".to_string()),
             dom: None,
+            css_bundle: None,
             plugin: None,
             components: None,
             component_asset_roots: None,
@@ -1374,6 +1412,7 @@ mod tests {
             entry: None,
             css: Some("link".to_string()),
             dom: None,
+            css_bundle: None,
             plugin: Some("webui".to_string()),
             components: None,
             component_asset_roots: Some(vec!["lazy-panel".to_string()]),
@@ -1405,7 +1444,11 @@ mod tests {
     fn test_build_legal_comments_none_strips_legal_css() {
         let dir = tempfile::TempDir::new().unwrap();
         std::fs::write(dir.path().join("index.html"), "<my-card>Hello</my-card>").unwrap();
-        std::fs::write(dir.path().join("my-card.html"), "<div><slot></slot></div>").unwrap();
+        std::fs::write(
+            dir.path().join("my-card.html"),
+            r#"<template shadowrootmode="open"><div>content</div></template>"#,
+        )
+        .unwrap();
         std::fs::write(
             dir.path().join("my-card.css"),
             "/*! @license MIT */ .card { color: red; }",
@@ -1417,6 +1460,7 @@ mod tests {
             entry: None,
             css: Some("link".to_string()),
             dom: None,
+            css_bundle: None,
             plugin: None,
             components: None,
             component_asset_roots: None,
@@ -1443,6 +1487,7 @@ mod tests {
             entry: None,
             css: None,
             dom: None,
+            css_bundle: None,
             plugin: None,
             components: None,
             component_asset_roots: None,
@@ -1460,16 +1505,46 @@ mod tests {
     }
 
     #[test]
-    fn test_build_with_light_dom_omits_shadow_root_template() {
+    fn test_build_with_unwrapped_component_defaults_to_shadow() {
+        let dir = tempfile::TempDir::new().unwrap();
+        std::fs::write(dir.path().join("index.html"), "<my-card>Hi</my-card>").unwrap();
+        std::fs::write(dir.path().join("my-card.html"), "<div>content</div>").unwrap();
+
+        let options = JsBuildOptions {
+            app_dir: dir.path().to_string_lossy().to_string(),
+            entry: None,
+            css: None,
+            dom: None,
+            css_bundle: None,
+            plugin: None,
+            components: None,
+            component_asset_roots: None,
+            metafile: None,
+            css_file_name_template: None,
+            css_public_base: None,
+            legal_comments: None,
+            theme: None,
+            projection_manifests: None,
+            projection_manifest_objects: None,
+        };
+
+        let result = build(options).unwrap();
+        let json = inspect(result.protocol).unwrap();
+        assert!(json.contains("shadowrootmode"));
+    }
+
+    #[test]
+    fn test_build_with_light_dom_omits_generated_shadow_root() {
         let dir = tempfile::TempDir::new().unwrap();
         std::fs::write(dir.path().join("index.html"), "<my-card>Hi</my-card>").unwrap();
-        std::fs::write(dir.path().join("my-card.html"), "<div><slot></slot></div>").unwrap();
+        std::fs::write(dir.path().join("my-card.html"), "<div>content</div>").unwrap();
 
         let options = JsBuildOptions {
             app_dir: dir.path().to_string_lossy().to_string(),
             entry: None,
             css: None,
             dom: Some("light".to_string()),
+            css_bundle: None,
             plugin: None,
             components: None,
             component_asset_roots: None,
@@ -1484,23 +1559,25 @@ mod tests {
 
         let result = build(options).unwrap();
         let json = inspect(result.protocol).unwrap();
-        assert!(
-            !json.contains("shadowrootmode"),
-            "light DOM build should not emit shadowrootmode wrappers, got: {json}"
-        );
+        assert!(!json.contains("shadowrootmode"));
     }
 
     #[test]
-    fn test_build_with_shadow_dom_emits_shadow_root_template() {
+    fn test_build_with_authored_shadow_dom_preserves_shadow_root_template() {
         let dir = tempfile::TempDir::new().unwrap();
         std::fs::write(dir.path().join("index.html"), "<my-card>Hi</my-card>").unwrap();
-        std::fs::write(dir.path().join("my-card.html"), "<div><slot></slot></div>").unwrap();
+        std::fs::write(
+            dir.path().join("my-card.html"),
+            r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+        )
+        .unwrap();
 
         let options = JsBuildOptions {
             app_dir: dir.path().to_string_lossy().to_string(),
             entry: None,
             css: None,
-            dom: Some("shadow".to_string()),
+            dom: None,
+            css_bundle: None,
             plugin: None,
             components: None,
             component_asset_roots: None,
@@ -1517,20 +1594,26 @@ mod tests {
         let json = inspect(result.protocol).unwrap();
         assert!(
             json.contains("shadowrootmode"),
-            "shadow DOM build should emit shadowrootmode wrappers, got: {json}"
+            "authored Shadow DOM wrapper should be preserved, got: {json}"
         );
     }
 
     #[test]
-    fn test_build_invalid_dom() {
+    fn test_build_rejects_invalid_shadow_wrapper() {
         let dir = tempfile::TempDir::new().unwrap();
-        std::fs::write(dir.path().join("index.html"), "<h1>Hello</h1>").unwrap();
+        std::fs::write(dir.path().join("index.html"), "<my-card></my-card>").unwrap();
+        std::fs::write(
+            dir.path().join("my-card.html"),
+            r#"<template shadowrootmode="closed"><p>invalid</p></template>"#,
+        )
+        .unwrap();
 
         let options = JsBuildOptions {
             app_dir: dir.path().to_string_lossy().to_string(),
             entry: None,
             css: None,
-            dom: Some("bogus".to_string()),
+            dom: None,
+            css_bundle: None,
             plugin: None,
             components: None,
             component_asset_roots: None,
diff --git a/crates/webui-parser/benches/parser_bench.rs b/crates/webui-parser/benches/parser_bench.rs
index 7d7897bdc..85bfd7599 100644
--- a/crates/webui-parser/benches/parser_bench.rs
+++ b/crates/webui-parser/benches/parser_bench.rs
@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 use criterion::{criterion_group, criterion_main, BenchmarkId, Criterion, Throughput};
 use std::hint::black_box;
-use webui_parser::{plugin::fast_v2::FastV2ParserPlugin, CssStrategy, HtmlParser};
+use webui_parser::{plugin::fast_v2::FastV2ParserPlugin, CssStrategy, HtmlParser, ParserOptions};
 
 fn build_simple_template() -> String {
     let mut html = String::with_capacity(256);
@@ -102,6 +102,18 @@ fn build_style_heavy_template(blocks: usize) -> String {
     html
 }
 
+fn build_component_stylesheet(rules: usize) -> String {
+    let mut css = String::with_capacity(rules * 140 + 160);
+    css.push_str(":host { display: block; }");
+    css.push_str("@keyframes pulse { from { opacity: .6; } to { opacity: 1; } }");
+    for idx in 0..rules {
+        css.push_str(".item-");
+        css.push_str(&idx.to_string());
+        css.push_str(":hover { color: var(--webui-color); animation: pulse 1s ease; }");
+    }
+    css
+}
+
 fn build_todo_app_template() -> String {
     let mut html = String::with_capacity(900);
     html.push_str("<!DOCTYPE html>\n");
@@ -322,9 +334,7 @@ fn parser_with_bench_components() -> HtmlParser {
     parser
 }
 
-fn parser_with_bench_components_and_options(
-    options: impl Into<webui_parser::ParserOptions>,
-) -> HtmlParser {
+fn parser_with_bench_components_and_options(options: impl Into<ParserOptions>) -> HtmlParser {
     let mut parser = HtmlParser::with_options(options);
     register_bench_components(&mut parser);
     parser
@@ -341,7 +351,7 @@ fn register_bench_components(parser: &mut HtmlParser) {
     registry
         .register_component(webui_parser::ComponentRegistration::new(
             "x-bench-button",
-            "<slot></slot>",
+            r#"<template shadowrootmode="open"><slot></slot></template>"#,
             None,
             true,
         ))
@@ -349,7 +359,7 @@ fn register_bench_components(parser: &mut HtmlParser) {
     registry
         .register_component(webui_parser::ComponentRegistration::new(
             "x-card",
-            "<slot></slot>",
+            r#"<template shadowrootmode="open"><slot></slot></template>"#,
             None,
             true,
         ))
@@ -357,7 +367,7 @@ fn register_bench_components(parser: &mut HtmlParser) {
     registry
         .register_component(webui_parser::ComponentRegistration::new(
             "x-panel",
-            "<slot></slot>",
+            r#"<template shadowrootmode="open"><slot></slot></template>"#,
             None,
             true,
         ))
@@ -365,7 +375,7 @@ fn register_bench_components(parser: &mut HtmlParser) {
     registry
         .register_component(webui_parser::ComponentRegistration::new(
             "x-banner",
-            "<slot></slot>",
+            r#"<template shadowrootmode="open"><slot></slot></template>"#,
             None,
             true,
         ))
@@ -373,7 +383,7 @@ fn register_bench_components(parser: &mut HtmlParser) {
     registry
         .register_component(webui_parser::ComponentRegistration::new(
             "x-dialog",
-            "<slot></slot>",
+            r#"<template shadowrootmode="open"><slot></slot></template>"#,
             None,
             true,
         ))
@@ -381,7 +391,7 @@ fn register_bench_components(parser: &mut HtmlParser) {
     registry
         .register_component(webui_parser::ComponentRegistration::new(
             "x-item",
-            "<slot></slot>",
+            r#"<template shadowrootmode="open"><slot></slot></template>"#,
             None,
             true,
         ))
@@ -389,7 +399,7 @@ fn register_bench_components(parser: &mut HtmlParser) {
     registry
         .register_component(webui_parser::ComponentRegistration::new(
             "x-stats-card",
-            "<slot></slot>",
+            r#"<template shadowrootmode="open"><slot></slot></template>"#,
             None,
             true,
         ))
@@ -499,6 +509,41 @@ fn parser_css_strategy_bench(c: &mut Criterion) {
     group.finish();
 }
 
+fn parser_light_css_global_bench(c: &mut Criterion) {
+    let mut group = c.benchmark_group("parser_light_css_global");
+    let input = "<x-styled-card></x-styled-card>";
+    let css = build_component_stylesheet(40);
+    group.throughput(Throughput::Bytes((input.len() + css.len()) as u64));
+
+    for (name, component_html) in [
+        (
+            "authored_shadow",
+            r#"<template shadowrootmode="open"><div class="item-0">Styled</div></template>"#,
+        ),
+        ("light", r#"<div class="item-0">Styled</div>"#),
+    ] {
+        group.bench_function(name, |b| {
+            b.iter(|| {
+                let mut parser = HtmlParser::new();
+                parser
+                    .component_registry_mut()
+                    .register_component(webui_parser::ComponentRegistration::new(
+                        "x-styled-card",
+                        component_html,
+                        Some(black_box(css.as_str())),
+                        true,
+                    ))
+                    .unwrap_or_else(|error| panic!("failed to register styled component: {error}"));
+                parser
+                    .parse("index.html", black_box(input))
+                    .unwrap_or_else(|error| panic!("{name} global CSS parse failed: {error}"));
+            });
+        });
+    }
+
+    group.finish();
+}
+
 fn parser_size_sweep_bench(c: &mut Criterion) {
     let mut group = c.benchmark_group("parser_size_sweep");
 
@@ -605,6 +650,7 @@ criterion_group!(
     parser_parse_fresh_vs_reuse,
     parser_plugin_bench,
     parser_css_strategy_bench,
+    parser_light_css_global_bench,
     parser_size_sweep_bench,
     parser_realistic_bench,
     parser_text_vs_directive_bench,
diff --git a/crates/webui-parser/src/component_policy.rs b/crates/webui-parser/src/component_policy.rs
index ab322cbd6..c9419bfba 100644
--- a/crates/webui-parser/src/component_policy.rs
+++ b/crates/webui-parser/src/component_policy.rs
@@ -79,7 +79,7 @@ impl ComponentRenderPolicy {
         output.push(';');
     }
 
-    pub(crate) fn append_scoped_css(&self, output: &mut String, tag_name: &str) {
+    pub(crate) fn append_shadow_css(&self, output: &mut String, tag_name: &str) {
         if !matches!(self, Self::LazyRender { .. }) {
             return;
         }
@@ -91,6 +91,16 @@ impl ComponentRenderPolicy {
         self.append_declarations(output);
         output.push('}');
     }
+
+    pub(crate) fn append_light_css(&self, output: &mut String, tag_name: &str) {
+        if !matches!(self, Self::LazyRender { .. }) {
+            return;
+        }
+        output.push_str(tag_name);
+        output.push_str(r#":not([w-render="eager"]){"#);
+        self.append_declarations(output);
+        output.push('}');
+    }
 }
 
 /// Parse policy attributes from an authored root `<template>`.
diff --git a/crates/webui-parser/src/component_registry.rs b/crates/webui-parser/src/component_registry.rs
index 1006b34ec..d44e62872 100644
--- a/crates/webui-parser/src/component_registry.rs
+++ b/crates/webui-parser/src/component_registry.rs
@@ -7,7 +7,7 @@
 
 use crate::component_policy::{parse_component_render_policy, ComponentRenderPolicy};
 use crate::{CssFallbackChain, CssParser, LegalComments, ParserError, Result};
-use std::collections::HashMap;
+use std::collections::{HashMap, HashSet};
 #[cfg(feature = "fs")]
 use std::fs;
 #[cfg(feature = "fs")]
@@ -94,6 +94,8 @@ pub struct ComponentRegistry {
     components: HashMap<String, Component>,
     /// Compiler-owned rendering policies kept outside the public component API.
     render_policies: HashMap<String, ComponentRenderPolicy>,
+    /// Components whose render policy CSS has been appended.
+    policy_css: HashSet<String>,
     /// Reusable CSS parser for token extraction during registration.
     css_parser: CssParser,
     /// Legal comment preservation policy for component CSS.
@@ -138,6 +140,7 @@ impl ComponentRegistry {
         Self {
             components: HashMap::new(),
             render_policies: HashMap::new(),
+            policy_css: HashSet::new(),
             css_parser: CssParser::new(),
             legal_comments,
         }
@@ -217,9 +220,7 @@ impl ComponentRegistry {
         })?;
 
         // Read CSS content and extract definitions/fallback requirements if available
-        let (mut css_content, css_definitions, css_fallback_chains) = if let Some(css_path) =
-            css_path
-        {
+        let (css_content, css_definitions, css_fallback_chains) = if let Some(css_path) = css_path {
             let css_path = css_path.as_ref();
             if css_path.exists() {
                 let content = fs::read_to_string(css_path).map_err(|source| ParserError::IO {
@@ -238,7 +239,6 @@ impl ComponentRegistry {
         let is_client_owned = has_component_script(html_path)?;
 
         let render_policy = parse_component_render_policy(tag_name, &html_content)?;
-        Self::append_scoped_policy_css(&mut css_content, &render_policy, tag_name);
 
         // Create and register the component
         let component = Component {
@@ -285,16 +285,14 @@ impl ComponentRegistry {
         }
 
         // Extract CSS definitions/fallback requirements if CSS content is provided
-        let (mut css_content, css_definitions, css_fallback_chains) = match css_content {
+        let (css_content, css_definitions, css_fallback_chains) = match css_content {
             Some(css) => {
                 let (content, definitions, requirements) = self.process_css_content(css)?;
                 (Some(content), definitions, requirements)
             }
             None => (None, Vec::new(), Vec::new()),
         };
-
         let render_policy = parse_component_render_policy(tag_name, html_content)?;
-        Self::append_scoped_policy_css(&mut css_content, &render_policy, tag_name);
         let component: Component = Component {
             tag_name: tag_name.to_string(),
             html_content: html_content.to_string(),
@@ -324,19 +322,41 @@ impl ComponentRegistry {
         Ok((stripped.into_owned(), sorted_definitions, requirements))
     }
 
-    fn append_scoped_policy_css(
-        css_content: &mut Option<String>,
-        policy: &ComponentRenderPolicy,
-        raw_tag_name: &str,
-    ) {
-        if policy.reserve_block_size().is_none() {
-            return;
+    /// Append the render policy CSS appropriate for the component's CSS tree.
+    pub(crate) fn prepare_policy_css(
+        &mut self,
+        tag_name: &str,
+        uses_shadow_dom: bool,
+    ) -> Result<()> {
+        let Some(policy) = self.render_policies.get(tag_name) else {
+            return Err(ParserError::NotFound(format!(
+                "component <{tag_name}> disappeared before render policy preparation"
+            )));
+        };
+        if policy.reserve_block_size().is_none() || self.policy_css.contains(tag_name) {
+            return Ok(());
         }
-        let css = css_content.get_or_insert_with(|| String::with_capacity(112));
-        css.reserve(144);
-        let mut tag_name = String::with_capacity(32);
-        Self::push_css_identifier(&mut tag_name, raw_tag_name);
-        policy.append_scoped_css(css, &tag_name);
+        let component_tag = {
+            let component = self.components.get_mut(tag_name).ok_or_else(|| {
+                ParserError::NotFound(format!(
+                    "component <{tag_name}> disappeared before render policy preparation"
+                ))
+            })?;
+            let css = component
+                .css_content
+                .get_or_insert_with(|| String::with_capacity(112));
+            css.reserve(144);
+            let mut escaped_tag = String::with_capacity(32);
+            crate::css_light::push_css_identifier(&mut escaped_tag, component.tag_name.as_str());
+            if uses_shadow_dom {
+                policy.append_shadow_css(css, &escaped_tag);
+            } else {
+                policy.append_light_css(css, &escaped_tag);
+            }
+            component.tag_name.clone()
+        };
+        self.policy_css.insert(component_tag);
+        Ok(())
     }
 
     /// Check if a tag name is registered as a component.
@@ -349,6 +369,13 @@ impl ComponentRegistry {
         self.components.get(tag_name)
     }
 
+    /// Return component CSS for source diagnostics.
+    pub(crate) fn diagnostic_css_content(&self, tag_name: &str) -> Option<&str> {
+        self.components
+            .get(tag_name)
+            .and_then(|component| component.css_content.as_deref())
+    }
+
     /// Get all registered components.
     pub fn get_all(&self) -> impl Iterator<Item = &Component> {
         self.components.values()
@@ -372,7 +399,7 @@ impl ComponentRegistry {
 
         let mut css = String::with_capacity(policies.len() * 112);
         for (tag_name, policy) in policies {
-            Self::push_css_identifier(&mut css, tag_name);
+            crate::css_light::push_css_identifier(&mut css, tag_name);
             css.push_str(r#":not([w-render="eager"]){"#);
             policy.append_declarations(&mut css);
             css.push('}');
@@ -388,39 +415,6 @@ impl ComponentRegistry {
         self.components.keys().map(String::as_str)
     }
 
-    fn push_css_identifier(output: &mut String, value: &str) {
-        for (index, ch) in value.chars().enumerate() {
-            if ch.is_ascii_alphabetic()
-                || ch == '-'
-                || ch == '_'
-                || (index > 0 && ch.is_ascii_digit())
-            {
-                output.push(ch);
-            } else {
-                Self::push_css_escape(output, ch as u32);
-            }
-        }
-    }
-
-    fn push_css_escape(output: &mut String, mut value: u32) {
-        const HEX: &[u8; 16] = b"0123456789abcdef";
-        let mut digits = [0u8; 8];
-        let mut index = digits.len();
-        loop {
-            index -= 1;
-            digits[index] = HEX[(value & 0x0f) as usize];
-            value >>= 4;
-            if value == 0 {
-                break;
-            }
-        }
-        output.push('\\');
-        for digit in &digits[index..] {
-            output.push(char::from(*digit));
-        }
-        output.push(' ');
-    }
-
     /// Get the number of registered components.
     pub fn len(&self) -> usize {
         self.components.len()
@@ -616,6 +610,15 @@ mod tests {
                 r#"z-card:not([w-render="eager"]){content-visibility:auto;contain-intrinsic-block-size:auto 18rem;}"#,
             )
         );
+        assert_eq!(
+            registry
+                .get("a-row")
+                .and_then(|component| component.css_content.as_deref()),
+            None
+        );
+        registry
+            .prepare_policy_css("a-row", true)
+            .expect("prepare Shadow policy CSS");
         assert_eq!(
             registry
                 .get("a-row")
@@ -626,6 +629,31 @@ mod tests {
         );
     }
 
+    #[test]
+    fn lazy_render_policy_uses_a_normal_selector_for_light_css() {
+        let mut registry = ComponentRegistry::new();
+        registry
+            .register_component(ComponentRegistration::new(
+                "light-row",
+                r#"<template w-render="lazy" w-reserve-block-size="72px"><p>x</p></template>"#,
+                None,
+                false,
+            ))
+            .expect("valid lazy render policy");
+
+        registry
+            .prepare_policy_css("light-row", false)
+            .expect("prepare Light policy CSS");
+        assert_eq!(
+            registry
+                .get("light-row")
+                .and_then(|component| component.css_content.as_deref()),
+            Some(
+                r#"light-row:not([w-render="eager"]){content-visibility:auto;contain-intrinsic-block-size:auto 72px;}"#,
+            )
+        );
+    }
+
     #[test]
     fn lazy_hydration_policy_emits_no_rendering_css() {
         let mut registry = ComponentRegistry::new();
diff --git a/crates/webui-parser/src/css_light.rs b/crates/webui-parser/src/css_light.rs
new file mode 100644
index 000000000..8559c5b0c
--- /dev/null
+++ b/crates/webui-parser/src/css_light.rs
@@ -0,0 +1,217 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+//! CSS validation and identifier helpers for unscoped Light DOM.
+//!
+//! Effective Light components use ordinary authored CSS in their owning CSS
+//! tree. Shadow-only selectors are rejected instead of being rewritten into a
+//! selector that has different semantics outside a ShadowRoot.
+
+use crate::comment_policy;
+use crate::css_scan::{
+    block_comment_end, css_escape_end, css_identifier_eq, next_char_boundary, pseudo_name,
+    quoted_end,
+};
+use crate::diagnostic::{codes, Diagnostic};
+use crate::{ParserError, Result};
+
+/// Reject selectors whose meaning is limited to a ShadowRoot.
+pub(crate) fn validate_global_css(tag_name: &str, source: &str) -> Result<()> {
+    let bytes = source.as_bytes();
+    let mut index = 0;
+    let mut segment_start = 0;
+    let mut paren_depth = 0usize;
+    let mut bracket_depth = 0usize;
+    while index < bytes.len() {
+        match bytes[index] {
+            b'"' | b'\'' => index = quoted_end(source, index),
+            b'/' if bytes.get(index + 1) == Some(&b'*') => {
+                index = block_comment_end(source, index);
+            }
+            b'/' if comment_policy::is_css_line_comment_start(source, index) => {
+                index = comment_policy::find_css_line_comment_end(source, index + 2);
+            }
+            b'\\' => index = css_escape_end(bytes, index, bytes.len()),
+            b'(' => {
+                paren_depth += 1;
+                index += 1;
+            }
+            b')' => {
+                paren_depth = paren_depth.saturating_sub(1);
+                index += 1;
+            }
+            b'[' => {
+                bracket_depth += 1;
+                index += 1;
+            }
+            b']' => {
+                bracket_depth = bracket_depth.saturating_sub(1);
+                index += 1;
+            }
+            b'{' if paren_depth == 0 && bracket_depth == 0 => {
+                validate_selector_prelude(tag_name, source, segment_start, index)?;
+                segment_start = index + 1;
+                index += 1;
+            }
+            b';' | b'}' if paren_depth == 0 && bracket_depth == 0 => {
+                segment_start = index + 1;
+                index += 1;
+            }
+            _ => index = next_char_boundary(source, index),
+        }
+    }
+    Ok(())
+}
+
+fn validate_selector_prelude(tag_name: &str, source: &str, start: usize, end: usize) -> Result<()> {
+    let bytes = source.as_bytes();
+    let mut index = start;
+    while index < end {
+        match bytes[index] {
+            b'"' | b'\'' => index = quoted_end(source, index).min(end),
+            b'/' if bytes.get(index + 1) == Some(&b'*') => {
+                index = block_comment_end(source, index).min(end);
+            }
+            b'/' if comment_policy::is_css_line_comment_start(source, index) => {
+                index = comment_policy::find_css_line_comment_end(source, index + 2).min(end);
+            }
+            b'\\' => index = css_escape_end(bytes, index, end),
+            b':' => {
+                let Some(pseudo) = pseudo_name(source, index) else {
+                    index += 1;
+                    continue;
+                };
+                let name = &source[pseudo.name.clone()];
+                if css_identifier_eq(name, "host")
+                    || css_identifier_eq(name, "host-context")
+                    || (pseudo.is_element && css_identifier_eq(name, "slotted"))
+                {
+                    let selector = if pseudo.is_element {
+                        format!("::{name}")
+                    } else {
+                        format!(":{name}")
+                    };
+                    return Err(shadow_only_selector_error(
+                        tag_name, source, index, &selector,
+                    ));
+                }
+                index = pseudo.name.end.min(end);
+            }
+            _ => index = next_char_boundary(source, index).min(end),
+        }
+    }
+    Ok(())
+}
+
+#[cold]
+#[inline(never)]
+fn shadow_only_selector_error(
+    tag_name: &str,
+    source: &str,
+    offset: usize,
+    selector: &str,
+) -> ParserError {
+    Diagnostic::error(format!("`{selector}` is only valid in Shadow DOM CSS"))
+        .code(codes::UNSUPPORTED_LIGHT_CSS)
+        .component(tag_name)
+        .at_offset(source, offset)
+        .snippet(super::source_line_snippet(source, offset))
+        .help(
+            "use a normal selector such as the component tag, or wrap the complete component in `<template shadowrootmode=\"open\">`",
+        )
+        .into()
+}
+
+/// Append `value` as one CSS identifier without changing its semantic value.
+pub(crate) fn push_css_identifier(output: &mut String, value: &str) {
+    for (index, ch) in value.chars().enumerate() {
+        if ch.is_ascii_alphabetic() || ch == '-' || ch == '_' || (index > 0 && ch.is_ascii_digit())
+        {
+            output.push(ch);
+        } else {
+            push_css_escape(output, ch as u32);
+        }
+    }
+}
+
+fn push_css_escape(output: &mut String, mut value: u32) {
+    const HEX: &[u8; 16] = b"0123456789abcdef";
+    let mut digits = [0u8; 8];
+    let mut index = digits.len();
+    loop {
+        index -= 1;
+        digits[index] = HEX[(value & 0x0f) as usize];
+        value >>= 4;
+        if value == 0 {
+            break;
+        }
+    }
+    output.push('\\');
+    for digit in &digits[index..] {
+        output.push(char::from(*digit));
+    }
+    output.push(' ');
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn accepts_ordinary_global_css() {
+        assert!(validate_global_css("my-card", ".card, button:hover { color: red }").is_ok());
+    }
+
+    #[test]
+    fn rejects_shadow_only_selectors() {
+        for selector in [
+            ":host",
+            ":host(.active)",
+            ":host-context(body.dark)",
+            "::slotted(*)",
+        ] {
+            let error = validate_global_css("my-card", &format!("{selector} {{ color: red }}"))
+                .expect_err("Shadow-only selector must fail in Light DOM");
+            let ParserError::Template(diagnostic) = error else {
+                panic!("expected structured CSS diagnostic");
+            };
+            assert_eq!(diagnostic.error_code(), Some(codes::UNSUPPORTED_LIGHT_CSS));
+        }
+    }
+
+    #[test]
+    fn ignores_shadow_selector_text_in_comments_and_strings() {
+        assert!(validate_global_css(
+            "my-card",
+            r#"/* :host */ // :host
+.card::before { content: ":host"; }"#
+        )
+        .is_ok());
+    }
+
+    #[test]
+    fn ignores_shadow_selector_text_in_declaration_values() {
+        assert!(validate_global_css(
+            "my-card",
+            ".card { --state:host; background:url(:host); content:var(--x, :host); }"
+        )
+        .is_ok());
+    }
+
+    #[test]
+    fn rejects_escaped_shadow_only_selector_names() {
+        let error = validate_global_css("my-card", r":ho\73 t { color: red }")
+            .expect_err("Escaped :host must fail in Light DOM");
+        let ParserError::Template(diagnostic) = error else {
+            panic!("expected structured CSS diagnostic");
+        };
+        assert_eq!(diagnostic.error_code(), Some(codes::UNSUPPORTED_LIGHT_CSS));
+    }
+
+    #[test]
+    fn escapes_non_identifier_tag_characters() {
+        let mut output = String::new();
+        push_css_identifier(&mut output, "x-foo.bar");
+        assert_eq!(output, r"x-foo\2e bar");
+    }
+}
diff --git a/crates/webui-parser/src/css_link.rs b/crates/webui-parser/src/css_link.rs
index 5b1c35782..0a7ced5a1 100644
--- a/crates/webui-parser/src/css_link.rs
+++ b/crates/webui-parser/src/css_link.rs
@@ -84,6 +84,24 @@ impl CssLinkOptions {
             .clone()
     }
 
+    /// Resolve the local filename and public href for a bundled CSS chunk.
+    ///
+    /// Chunk names live in a build-owned namespace rather than the component
+    /// registry, so this deliberately bypasses the per-tag cache: a chunk and a
+    /// component that happen to share a name must never resolve to each other's
+    /// content hash.
+    #[must_use]
+    pub fn resolve_chunk(&self, chunk_name: &str, css_content: &str) -> CssLinkHref {
+        let filename = self
+            .file_name_template
+            .resolve(chunk_name, "css", css_content.as_bytes());
+        let href = match self.public_base.as_deref() {
+            Some(base) => join_css_public_base(base, &filename),
+            None => filename.clone(),
+        };
+        CssLinkHref { filename, href }
+    }
+
     /// File name template used for Link-mode CSS files.
     #[must_use]
     pub fn file_name_template(&self) -> &str {
diff --git a/crates/webui-parser/src/css_scan.rs b/crates/webui-parser/src/css_scan.rs
new file mode 100644
index 000000000..9204fc0be
--- /dev/null
+++ b/crates/webui-parser/src/css_scan.rs
@@ -0,0 +1,253 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+//! Byte-level CSS token primitives shared by every compiler-owned CSS pass.
+//!
+//! This is the bottom layer of the CSS toolkit:
+//!
+//! 1. `css_scan` (this module) — advance past one token: a string, a comment,
+//!    an escape, an identifier, a balanced paren group.
+//! 2. [`crate::css_light`] — validate Shadow-only selectors and emit identifiers.
+//!
+//! Every function here takes a byte offset and returns the offset just past the
+//! token, so callers stay iterative and allocation-free. Nothing here allocates
+//! except [`identifier_value`], which only does so for escaped or quoted input.
+
+use std::ops::Range;
+
+/// Advance past a quoted string starting at `start`.
+///
+/// Unterminated strings consume the remaining input rather than failing: the
+/// caller is a build-time rewriter, and a malformed stylesheet must still make
+/// forward progress so the browser (not the compiler) reports it.
+pub(crate) fn quoted_end(source: &str, start: usize) -> usize {
+    let bytes = source.as_bytes();
+    let quote = bytes[start];
+    let mut index = start + 1;
+    while index < bytes.len() {
+        if bytes[index] == b'\\' {
+            index = (index + 2).min(bytes.len());
+        } else if bytes[index] == quote {
+            return index + 1;
+        } else {
+            index += 1;
+        }
+    }
+    bytes.len()
+}
+
+/// Advance past a `/* … */` comment starting at `start`.
+pub(crate) fn block_comment_end(source: &str, start: usize) -> usize {
+    source[start + 2..]
+        .find("*/")
+        .map_or(source.len(), |offset| start + offset + 4)
+}
+
+/// Advance one UTF-8 character from `index`.
+pub(crate) fn next_char_boundary(source: &str, index: usize) -> usize {
+    next_char_boundary_from_bytes(source.as_bytes(), index, source.len())
+}
+
+/// Advance one UTF-8 character within a byte slice, clamped to `limit`.
+pub(crate) fn next_char_boundary_from_bytes(bytes: &[u8], index: usize, limit: usize) -> usize {
+    if index >= limit || bytes[index].is_ascii() {
+        return (index + 1).min(limit);
+    }
+    let width = if bytes[index] & 0b1111_1000 == 0b1111_0000 {
+        4
+    } else if bytes[index] & 0b1111_0000 == 0b1110_0000 {
+        3
+    } else {
+        2
+    };
+    (index + width).min(limit)
+}
+
+/// Advance past an identifier, following CSS escape sequences.
+pub(crate) fn ident_end(bytes: &[u8], mut index: usize, limit: usize) -> usize {
+    while index < limit {
+        if is_ident_byte(bytes[index]) {
+            index += 1;
+        } else if bytes[index] == b'\\' {
+            index = css_escape_end(bytes, index, limit);
+        } else {
+            break;
+        }
+    }
+    index
+}
+
+/// Whether `byte` can begin a CSS identifier.
+pub(crate) fn is_ident_start_byte(byte: u8) -> bool {
+    byte.is_ascii_alphabetic() || matches!(byte, b'-' | b'_' | b'\\') || byte >= 0x80
+}
+
+/// Whether `byte` can continue a CSS identifier.
+pub(crate) fn is_ident_byte(byte: u8) -> bool {
+    byte.is_ascii_alphanumeric() || matches!(byte, b'-' | b'_') || byte >= 0x80
+}
+
+/// Advance past a CSS escape sequence (`\26`, `\@`, …) starting at `start`.
+pub(crate) fn css_escape_end(bytes: &[u8], start: usize, limit: usize) -> usize {
+    let mut index = start + 1;
+    if index >= limit {
+        return index;
+    }
+    if bytes[index].is_ascii_hexdigit() {
+        let mut digits = 0usize;
+        while index < limit && digits < 6 && bytes[index].is_ascii_hexdigit() {
+            index += 1;
+            digits += 1;
+        }
+        if index < limit && bytes[index].is_ascii_whitespace() {
+            if bytes[index] == b'\r' && index + 1 < limit && bytes.get(index + 1) == Some(&b'\n') {
+                index += 1;
+            }
+            index += 1;
+        }
+        index
+    } else {
+        next_char_boundary_from_bytes(bytes, index, limit)
+    }
+}
+
+/// Decode a CSS identifier or string token to its value.
+///
+/// Returns the token unchanged when it is neither quoted nor escaped, so the
+/// common case never allocates beyond the copy the caller asked for.
+pub(crate) fn identifier_value(token: &str) -> String {
+    let quoted = matches!(token.as_bytes().first(), Some(b'"' | b'\''));
+    if !quoted && !token.contains('\\') {
+        return token.to_string();
+    }
+    let bytes = token.as_bytes();
+    let mut value = String::with_capacity(token.len().saturating_sub(2 * usize::from(quoted)));
+    let mut index = usize::from(quoted);
+    let end = token.len().saturating_sub(usize::from(quoted));
+    while index < end {
+        if bytes[index] != b'\\' {
+            let next = next_char_boundary(token, index).min(end);
+            value.push_str(&token[index..next]);
+            index = next;
+            continue;
+        }
+        index += 1;
+        if index >= end {
+            break;
+        }
+        if bytes[index].is_ascii_hexdigit() {
+            let mut codepoint = 0u32;
+            let mut digits = 0usize;
+            while index < end && digits < 6 && bytes[index].is_ascii_hexdigit() {
+                codepoint = codepoint * 16 + u32::from(hex_value(bytes[index]));
+                index += 1;
+                digits += 1;
+            }
+            if index < end && bytes[index].is_ascii_whitespace() {
+                if bytes[index] == b'\r' && index + 1 < end && bytes.get(index + 1) == Some(&b'\n')
+                {
+                    index += 1;
+                }
+                index += 1;
+            }
+            value.push(if codepoint == 0 {
+                char::REPLACEMENT_CHARACTER
+            } else {
+                char::from_u32(codepoint).unwrap_or(char::REPLACEMENT_CHARACTER)
+            });
+        } else if matches!(bytes[index], b'\n' | b'\r' | b'\x0c') {
+            if bytes[index] == b'\r' && index + 1 < end && bytes.get(index + 1) == Some(&b'\n') {
+                index += 1;
+            }
+            index += 1;
+        } else {
+            let next = next_char_boundary(token, index).min(end);
+            value.push_str(&token[index..next]);
+            index = next;
+        }
+    }
+    value
+}
+
+/// Compare a possibly-escaped CSS identifier against a plain ASCII name.
+pub(crate) fn css_identifier_eq(identifier: &str, expected: &str) -> bool {
+    if identifier.contains('\\') {
+        identifier_value(identifier).eq_ignore_ascii_case(expected)
+    } else {
+        identifier.eq_ignore_ascii_case(expected)
+    }
+}
+
+fn hex_value(byte: u8) -> u8 {
+    match byte {
+        b'0'..=b'9' => byte - b'0',
+        b'a'..=b'f' => byte - b'a' + 10,
+        b'A'..=b'F' => byte - b'A' + 10,
+        _ => 0,
+    }
+}
+
+/// A `:pseudo` or `::pseudo` token.
+pub(crate) struct PseudoName {
+    /// Range of the name, excluding the leading colon(s).
+    pub(crate) name: Range<usize>,
+    /// True for `::name`, the pseudo-element form.
+    pub(crate) is_element: bool,
+}
+
+/// Read the pseudo-class or pseudo-element token starting at a `:`.
+pub(crate) fn pseudo_name(source: &str, start: usize) -> Option<PseudoName> {
+    let bytes = source.as_bytes();
+    let is_element = bytes.get(start + 1) == Some(&b':');
+    let name_start = start + 1 + usize::from(is_element);
+    if !bytes
+        .get(name_start)
+        .is_some_and(|byte| is_ident_start_byte(*byte))
+    {
+        return None;
+    }
+
+    let name_end = ident_end(bytes, name_start, bytes.len());
+    Some(PseudoName {
+        name: name_start..name_end,
+        is_element,
+    })
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn advances_past_strings_comments_and_escapes() {
+        assert_eq!(quoted_end("\"a\\\"b\" tail", 0), 6);
+        assert_eq!(quoted_end("'unterminated", 0), 13);
+        assert_eq!(block_comment_end("/* c */x", 0), 7);
+        assert_eq!(block_comment_end("/* unterminated", 0), 15);
+        assert_eq!(css_escape_end(b"\\26 x", 0, 5), 4);
+        assert_eq!(css_escape_end(b"\\@rest", 0, 6), 2);
+    }
+
+    #[test]
+    fn decodes_escaped_and_quoted_identifiers() {
+        assert_eq!(identifier_value("plain"), "plain");
+        assert_eq!(identifier_value("\"quoted\""), "quoted");
+        assert_eq!(identifier_value("\\68 ost"), "host");
+        assert!(css_identifier_eq("\\68 ost", "host"));
+        assert!(css_identifier_eq("HOST", "host"));
+        assert!(!css_identifier_eq("hosted", "host"));
+    }
+
+    #[test]
+    fn reads_pseudo_tokens_and_paren_groups() {
+        let pseudo = pseudo_name(":hover", 0).expect("pseudo-class");
+        assert!(!pseudo.is_element);
+        assert_eq!(&":hover"[pseudo.name], "hover");
+
+        let element = pseudo_name("::before", 0).expect("pseudo-element");
+        assert!(element.is_element);
+        assert_eq!(&"::before"[element.name], "before");
+
+        assert!(pseudo_name(":", 0).is_none());
+    }
+}
diff --git a/crates/webui-parser/src/diagnostic.rs b/crates/webui-parser/src/diagnostic.rs
index 386ec32e9..8689f10ed 100644
--- a/crates/webui-parser/src/diagnostic.rs
+++ b/crates/webui-parser/src/diagnostic.rs
@@ -87,6 +87,23 @@ pub mod codes {
     pub const MALFORMED_HTML_TAG: &str = "malformed-html-tag";
     /// A closing tag has no matching opening tag.
     pub const UNEXPECTED_CLOSING_TAG: &str = "unexpected-closing-tag";
+    /// An unwrapped Light DOM component contains a native `<slot>`.
+    pub const LIGHT_DOM_SLOT: &str = "light-dom-slot";
+    /// A declarative Shadow DOM wrapper has an unsupported mode or placement.
+    pub const INVALID_SHADOW_ROOT_MODE: &str = "invalid-shadow-root-mode";
+    /// Legacy code for the removed compiler-owned Light DOM marker diagnostic.
+    #[deprecated(note = "Light DOM no longer generates compiler-owned markers")]
+    pub const RESERVED_LIGHT_DOM_MARKER: &str = "reserved-light-dom-marker";
+    /// Legacy code for the removed Light DOM scope-collision diagnostic.
+    #[deprecated(note = "Light DOM no longer generates compiler-owned markers")]
+    pub const LIGHT_SCOPE_COLLISION: &str = "light-scope-collision";
+    /// Light component CSS contains a Shadow-only selector.
+    pub const UNSUPPORTED_LIGHT_CSS: &str = "unsupported-light-css";
+    /// A FAST plugin was asked to compile a Light DOM component it cannot mount faithfully.
+    pub const FAST_LIGHT_DOM_UNSUPPORTED: &str = "fast-light-dom-unsupported";
+    /// Legacy code for removed Light-local keyframe namespacing.
+    #[deprecated(note = "Light DOM no longer namespaces component-local keyframes")]
+    pub const DYNAMIC_LIGHT_KEYFRAME: &str = "dynamic-light-keyframe";
     /// An HTML comment was opened but never closed with `-->`.
     pub const UNTERMINATED_HTML_COMMENT: &str = "unterminated-html-comment";
     /// An HTML declaration was opened but never closed with `>`.
diff --git a/crates/webui-parser/src/html_parser.rs b/crates/webui-parser/src/html_parser.rs
index f6a55e9d5..d3ca12c48 100644
--- a/crates/webui-parser/src/html_parser.rs
+++ b/crates/webui-parser/src/html_parser.rs
@@ -347,6 +347,13 @@ pub(crate) fn opening_tag_name(input: &str) -> Option<&str> {
     (!tag.closing).then_some(tag.name)
 }
 
+/// Check whether `input` starts with an opening `<name` tag, matched with the
+/// ASCII case-insensitivity HTML tag names use.
+#[inline]
+pub(crate) fn starts_with_html_tag_name(input: &str, name: &str) -> bool {
+    opening_tag_name(input).is_some_and(|tag_name| tag_name.eq_ignore_ascii_case(name))
+}
+
 /// Return the content and closing-tag byte ranges for a `<style>` element that
 /// starts at the beginning of `input`.
 #[inline]
diff --git a/crates/webui-parser/src/lib.rs b/crates/webui-parser/src/lib.rs
index 7d8c32d50..aad91abf8 100644
--- a/crates/webui-parser/src/lib.rs
+++ b/crates/webui-parser/src/lib.rs
@@ -9,8 +9,10 @@ mod comment_policy;
 mod component_policy;
 mod component_registry;
 mod condition_parser;
+mod css_light;
 mod css_link;
 mod css_parser;
+mod css_scan;
 mod diagnostic;
 mod error;
 mod handlebars_parser;
@@ -224,22 +226,22 @@ impl std::str::FromStr for CssStrategy {
     }
 }
 
-/// Strategy for how component DOM is structured.
+/// Default DOM strategy for components without an authored declarative Shadow root.
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
 #[cfg_attr(feature = "cli", derive(clap::ValueEnum))]
 pub enum DomStrategy {
-    /// Use shadow DOM with declarative shadow roots for SSR (default).
+    /// Wrap unwrapped component content in an open declarative Shadow root.
     #[default]
     Shadow,
-    /// Use light DOM — component content is rendered as direct children.
+    /// Render unwrapped component content directly in Light DOM.
     Light,
 }
 
 impl std::fmt::Display for DomStrategy {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         match self {
-            DomStrategy::Shadow => write!(f, "shadow"),
-            DomStrategy::Light => write!(f, "light"),
+            Self::Shadow => write!(f, "shadow"),
+            Self::Light => write!(f, "light"),
         }
     }
 }
@@ -247,10 +249,10 @@ impl std::fmt::Display for DomStrategy {
 impl std::str::FromStr for DomStrategy {
     type Err = String;
 
-    fn from_str(s: &str) -> std::result::Result<Self, Self::Err> {
-        match s {
-            "shadow" => Ok(DomStrategy::Shadow),
-            "light" => Ok(DomStrategy::Light),
+    fn from_str(value: &str) -> std::result::Result<Self, Self::Err> {
+        match value {
+            "shadow" => Ok(Self::Shadow),
+            "light" => Ok(Self::Light),
             other => Err(format!(
                 "Unknown DOM strategy: {other}. Use \"shadow\" or \"light\"."
             )),
@@ -297,7 +299,7 @@ impl std::str::FromStr for LegalComments {
 pub struct ParserOptions {
     /// Strategy for how component CSS is delivered.
     pub css_strategy: CssStrategy,
-    /// Strategy for how component DOM is rendered.
+    /// Fallback DOM strategy for components without an authored Shadow root.
     pub dom_strategy: DomStrategy,
     /// Link-mode CSS filename/href options.
     pub css_link_options: CssLinkOptions,
@@ -336,19 +338,19 @@ impl ParserOptions {
     }
 }
 
-impl From<CssStrategy> for ParserOptions {
-    fn from(css_strategy: CssStrategy) -> Self {
+impl From<DomStrategy> for ParserOptions {
+    fn from(dom_strategy: DomStrategy) -> Self {
         Self {
-            css_strategy,
+            dom_strategy,
             ..Self::default()
         }
     }
 }
 
-impl From<DomStrategy> for ParserOptions {
-    fn from(dom_strategy: DomStrategy) -> Self {
+impl From<CssStrategy> for ParserOptions {
+    fn from(css_strategy: CssStrategy) -> Self {
         Self {
-            dom_strategy,
+            css_strategy,
             ..Self::default()
         }
     }
@@ -594,6 +596,9 @@ pub struct HtmlParser {
     /// Optional parser plugin for framework-specific behavior.
     plugin: Option<Box<dyn ParserPlugin>>,
 
+    /// Declarative Shadow DOM analysis resolved once per component tag.
+    component_dom_analyses: HashMap<String, ComponentDomAnalysis>,
+
     /// Top-level fragments parsed by callers. Token graph traversal starts
     /// from these roots after parsing completes.
     token_roots: Vec<String>,
@@ -671,6 +676,22 @@ pub struct HtmlParser {
 struct BuiltComponentTemplate {
     ssr: String,
     artifact: Option<String>,
+    uses_shadow_dom: bool,
+    style: Option<OwnedComponentStyle>,
+}
+
+/// Owned form of [`plugin::ComponentStyleDelivery`], held for the lifetime of a
+/// built component template so plugin context can borrow from it.
+enum OwnedComponentStyle {
+    Link(String),
+    Inline(String),
+    Adopted(String),
+}
+
+#[derive(Clone, Copy)]
+struct ComponentStyleInjection<'a> {
+    css_snippet: Option<&'a str>,
+    adopted_specifier: Option<&'a str>,
 }
 
 #[derive(Clone, Copy)]
@@ -683,6 +704,222 @@ impl BuiltComponentTemplate {
     fn artifact(&self) -> &str {
         self.artifact.as_deref().unwrap_or(&self.ssr)
     }
+
+    fn context(&self) -> plugin::ComponentTemplateContext<'_> {
+        plugin::ComponentTemplateContext {
+            uses_shadow_dom: self.uses_shadow_dom,
+            style: self.style.as_ref().map(|style| match style {
+                OwnedComponentStyle::Link(href) => plugin::ComponentStyleDelivery::Link { href },
+                OwnedComponentStyle::Inline(css) => plugin::ComponentStyleDelivery::Inline { css },
+                OwnedComponentStyle::Adopted(specifier) => {
+                    plugin::ComponentStyleDelivery::Adopted { specifier }
+                }
+            }),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy)]
+struct ComponentDomAnalysis {
+    uses_shadow_dom: bool,
+    /// Byte range of the authored declarative Shadow DOM root, when present.
+    authored_shadow_root: Option<(usize, usize)>,
+    /// Content range of a sole bare `<template>` that explicitly selects Light
+    /// DOM.
+    authored_light_root: Option<(usize, usize)>,
+}
+
+struct ShadowRootModeOccurrence<'a> {
+    element_start: usize,
+    element_end: usize,
+    element_name: &'a str,
+    has_closing_tag: bool,
+    dynamically_bound: bool,
+    attr_offset: usize,
+    value: Option<&'a str>,
+}
+
+fn analyze_component_dom(
+    tag_name: &str,
+    source: &str,
+    fallback: DomStrategy,
+) -> Result<ComponentDomAnalysis> {
+    let mut ranges = Vec::with_capacity(8);
+    ranges.push((0..source.len(), true));
+    let mut top_level_element_count = 0usize;
+    let mut top_level_root_start = 0usize;
+    let mut has_top_level_content = false;
+    let mut bare_template_root = None;
+    let mut shadow_mode = None;
+    let mut slot_offset = None;
+
+    while let Some((range, top_level)) = ranges.pop() {
+        for event in Walker::new_range(source, range.start, range.end) {
+            match event {
+                Event::Text(text) if top_level && !text.trim().is_empty() => {
+                    has_top_level_content = true;
+                }
+                Event::Declaration(_) if top_level => {
+                    has_top_level_content = true;
+                }
+                Event::Element(element) => {
+                    if top_level {
+                        top_level_element_count += 1;
+                        top_level_root_start = element.start;
+                        bare_template_root = (element.name().eq_ignore_ascii_case("template")
+                            && !element.self_closing()
+                            && element.attrs().next().is_none())
+                        .then_some((element.content_start, element.content_end));
+                    }
+
+                    for attr in element.attrs() {
+                        let attr_name = attr.name.strip_prefix([':', '?']).unwrap_or(attr.name);
+                        if attr_name.eq_ignore_ascii_case("shadowrootmode") {
+                            if shadow_mode.is_some() {
+                                return Err(invalid_shadow_root_mode_error(
+                                    tag_name,
+                                    source,
+                                    element.start + attr.raw_range.start,
+                                    "a component may declare only one `shadowrootmode`",
+                                    "keep one `shadowrootmode=\"open\"` attribute on the sole top-level `<template>`",
+                                ));
+                            }
+                            shadow_mode = Some(ShadowRootModeOccurrence {
+                                element_start: element.start,
+                                element_end: element.close_end(),
+                                element_name: element.name(),
+                                has_closing_tag: !element.self_closing()
+                                    && element.close_end() > element.content_end(),
+                                dynamically_bound: attr.name != attr_name,
+                                attr_offset: element.start + attr.raw_range.start,
+                                value: attr.value,
+                            });
+                        }
+                    }
+
+                    if slot_offset.is_none() && element.name().eq_ignore_ascii_case("slot") {
+                        slot_offset = Some(element.start);
+                    }
+
+                    let name = element.name();
+                    let raw_text = name.eq_ignore_ascii_case("script")
+                        || name.eq_ignore_ascii_case("style")
+                        || name.eq_ignore_ascii_case("textarea")
+                        || name.eq_ignore_ascii_case("title");
+                    if element.content_end() > element.inner().start && !raw_text {
+                        ranges.push((element.inner(), false));
+                    }
+                }
+                Event::Text(_)
+                | Event::Comment(_)
+                | Event::Declaration(_)
+                | Event::ClosingTag(_) => {}
+            }
+        }
+    }
+
+    let authored_shadow_root = match shadow_mode {
+        Some(mode) => {
+            let value = mode.value;
+            if mode.dynamically_bound {
+                return Err(invalid_shadow_root_mode_error(
+                    tag_name,
+                    source,
+                    mode.attr_offset,
+                    "`shadowrootmode` must be a static attribute",
+                    "replace the binding with `shadowrootmode=\"open\"` on the sole top-level `<template>`",
+                ));
+            }
+            if value.is_some_and(|value| value.eq_ignore_ascii_case("closed")) {
+                return Err(invalid_shadow_root_mode_error(
+                    tag_name,
+                    source,
+                    mode.attr_offset,
+                    "`shadowrootmode=\"closed\"` is not supported",
+                    "use `shadowrootmode=\"open\"`; WebUI requires an open root for hydration and style delivery",
+                ));
+            }
+            if !value.is_some_and(|value| value.eq_ignore_ascii_case("open")) {
+                return Err(invalid_shadow_root_mode_error(
+                    tag_name,
+                    source,
+                    mode.attr_offset,
+                    "`shadowrootmode` must be `open`",
+                    "set the attribute to `shadowrootmode=\"open\"`",
+                ));
+            }
+            if top_level_element_count != 1
+                || has_top_level_content
+                || mode.element_start != top_level_root_start
+                || !mode.element_name.eq_ignore_ascii_case("template")
+                || !mode.has_closing_tag
+            {
+                return Err(invalid_shadow_root_mode_error(
+                    tag_name,
+                    source,
+                    mode.attr_offset,
+                    "the declarative Shadow DOM wrapper must be the sole top-level element",
+                    "wrap the complete component in one top-level `<template shadowrootmode=\"open\">`",
+                ));
+            }
+            Some((mode.element_start, mode.element_end))
+        }
+        None => None,
+    };
+
+    let authored_light_root =
+        if authored_shadow_root.is_none() && top_level_element_count == 1 && !has_top_level_content
+        {
+            bare_template_root
+        } else {
+            None
+        };
+    let uses_shadow_dom = authored_shadow_root.is_some()
+        || (authored_light_root.is_none() && fallback == DomStrategy::Shadow);
+    if !uses_shadow_dom {
+        if let Some(offset) = slot_offset {
+            return Err(light_dom_slot_error(tag_name, source, offset));
+        }
+    }
+
+    Ok(ComponentDomAnalysis {
+        uses_shadow_dom,
+        authored_shadow_root,
+        authored_light_root,
+    })
+}
+
+#[cold]
+#[inline(never)]
+fn invalid_shadow_root_mode_error(
+    tag_name: &str,
+    source: &str,
+    offset: usize,
+    title: &str,
+    help: &str,
+) -> ParserError {
+    Diagnostic::error(title)
+        .code(codes::INVALID_SHADOW_ROOT_MODE)
+        .component(tag_name)
+        .at_offset(source, offset)
+        .snippet(source_line_snippet(source, offset))
+        .help(help)
+        .into()
+}
+
+#[cold]
+#[inline(never)]
+fn light_dom_slot_error(tag_name: &str, source: &str, offset: usize) -> ParserError {
+    Diagnostic::error("native `<slot>` projection requires Shadow DOM")
+        .code(codes::LIGHT_DOM_SLOT)
+        .component(tag_name)
+        .element("slot")
+        .at_offset(source, offset)
+        .snippet(source_line_snippet(source, offset))
+        .help(
+            "wrap the complete component template in `<template shadowrootmode=\"open\">` to use `<slot>`",
+        )
+        .into()
 }
 
 fn add_token_definitions(definitions: &[String], available_counts: &mut HashMap<String, usize>) {
@@ -784,7 +1021,7 @@ fn locate_css_token(css: &str, token: &str) -> Option<(usize, usize, String)> {
                 // `--token:` is a definition, not the usage we want to point at.
                 if bytes.get(cursor) != Some(&b':') {
                     let (line, column) = diagnostic::line_column(css, index);
-                    return Some((line, column, css_line_snippet(css, index)));
+                    return Some((line, column, source_line_snippet(css, index)));
                 }
             }
         }
@@ -793,13 +1030,15 @@ fn locate_css_token(css: &str, token: &str) -> Option<(usize, usize, String)> {
     None
 }
 
-/// Extract the trimmed line containing byte `offset`, capped so a minified
-/// stylesheet does not produce a wall-of-text snippet.
-fn css_line_snippet(css: &str, offset: usize) -> String {
+/// Extract the trimmed line containing byte `offset`, capped so minified input
+/// does not produce a wall-of-text snippet.
+fn source_line_snippet(source: &str, offset: usize) -> String {
     const MAX_SNIPPET: usize = 80;
-    let start = css[..offset].rfind('\n').map_or(0, |n| n + 1);
-    let end = css[offset..].find('\n').map_or(css.len(), |n| offset + n);
-    let line = css[start..end].trim();
+    let start = source[..offset].rfind('\n').map_or(0, |n| n + 1);
+    let end = source[offset..]
+        .find('\n')
+        .map_or(source.len(), |n| offset + n);
+    let line = source[start..end].trim();
     if line.chars().count() > MAX_SNIPPET {
         let truncated: String = line.chars().take(MAX_SNIPPET).collect();
         format!("{truncated}…")
@@ -972,6 +1211,7 @@ impl HtmlParser {
             fragment_records: WebUIFragmentRecords::new(),
             options,
             plugin: None,
+            component_dom_analyses: HashMap::new(),
             token_roots: Vec::new(),
             fragment_css_tokens: HashMap::new(),
             in_progress_fragments: HashSet::new(),
@@ -1614,6 +1854,16 @@ impl HtmlParser {
         &self.module_entry_srcs
     }
 
+    /// Iterate component tags and whether each effectively uses Shadow DOM.
+    ///
+    /// This remains available independently of parser plugins so protocol
+    /// builders can persist effective per-component ownership in plugin-free builds.
+    pub fn component_shadow_dom_usage(&self) -> impl Iterator<Item = (&str, bool)> {
+        self.component_dom_analyses
+            .iter()
+            .map(|(tag_name, analysis)| (tag_name.as_str(), analysis.uses_shadow_dom))
+    }
+
     /// Take any post-parse artifacts captured by the parser plugin.
     ///
     /// # Errors
@@ -1754,7 +2004,7 @@ impl HtmlParser {
             &component.css_fallback_chains,
             available_counts,
             &css_owner_label(tag_name),
-            component.css_content.as_deref(),
+            self.component_registry.diagnostic_css_content(tag_name),
             out,
         );
         ops.push(TokenGraphOp::ExitDefinitions(&component.css_definitions));
@@ -1781,7 +2031,8 @@ impl HtmlParser {
             &component.css_fallback_chains,
             available_counts,
             &css_owner_label(&route.fragment_id),
-            component.css_content.as_deref(),
+            self.component_registry
+                .diagnostic_css_content(&route.fragment_id),
             out,
         );
         ops.push(TokenGraphOp::ExitDefinitions(&component.css_definitions));
@@ -2095,7 +2346,6 @@ impl HtmlParser {
                                 content_end,
                                 close_end,
                             };
-
                             if close_end < end {
                                 ops.push(ParseOp::Parse {
                                     range: close_end..end,
@@ -2283,6 +2533,27 @@ impl HtmlParser {
         }
 
         self.add_raw_fragment(">");
+        if element.name().eq_ignore_ascii_case("template")
+            && element
+                .attrs()
+                .find(|attr| attr.name.eq_ignore_ascii_case("shadowrootmode"))
+                .and_then(|attr| attr.value)
+                .is_some_and(|mode| mode.eq_ignore_ascii_case("open"))
+            && self
+                .component_dom_analyses
+                .get(&self.current_fragment_id)
+                .is_some_and(|analysis| analysis.uses_shadow_dom)
+        {
+            // This compiler-owned no-DOM hook lets the server install the
+            // complete tree-local style closure before hydratable children.
+            // It is a protocol fragment rather than an HTML marker, so client
+            // ordinal paths are unchanged.
+            self.flush_raw_buffer(fragments);
+            fragments.push(structural_signal(format!(
+                "shadow_styles:{}",
+                self.current_fragment_id
+            )));
+        }
         if !element.is_void() {
             if element.close_end() > element.content_end() {
                 ops.push(ParseOp::EmitClose(element.name()));
@@ -3097,6 +3368,41 @@ impl HtmlParser {
         depth: usize,
         ops: &mut Vec<ParseOp<'a>>,
     ) -> Result<()> {
+        let needs_template_build = !self.fragment_records.contains_key(element.name());
+        let cached_dom_analysis = self.component_dom_analyses.get(element.name()).copied();
+        let (dom_analysis, template_source) = {
+            let component = self.component_registry.get(element.name()).ok_or_else(|| {
+                self.authoring_error_at(
+                    codes::UNKNOWN_COMPONENT,
+                    format!("unknown component <{}>", element.name()),
+                    element,
+                )
+                .help(self.unknown_component_help(element.name()))
+            })?;
+            (
+                cached_dom_analysis.map_or_else(
+                    || {
+                        analyze_component_dom(
+                            element.name(),
+                            &component.html_content,
+                            self.options.dom_strategy,
+                        )
+                    },
+                    Ok,
+                )?,
+                needs_template_build.then(|| {
+                    (
+                        component.html_content.clone(),
+                        component.css_content.clone(),
+                    )
+                }),
+            )
+        };
+        if cached_dom_analysis.is_none() {
+            self.component_dom_analyses
+                .insert(element.name().to_string(), dom_analysis);
+        }
+
         self.flush_raw_buffer(fragments);
         fragments.push(structural_signal(format!(
             "streaming_span_start:{}",
@@ -3132,28 +3438,32 @@ impl HtmlParser {
 
         self.flush_raw_buffer(fragments);
 
-        if !self.fragment_records.contains_key(element.name()) {
-            let component_data = self
-                .component_registry
-                .get(element.name())
-                .ok_or_else(|| {
-                    self.authoring_error_at(
-                        codes::UNKNOWN_COMPONENT,
-                        format!("unknown component <{}>", element.name()),
-                        element,
-                    )
-                    .help(self.unknown_component_help(element.name()))
-                })?
-                .clone();
+        if let Some((html_content, css_content)) = template_source {
             let built = self.build_component_templates(
                 element.name(),
-                &component_data.html_content,
-                component_data.css_content.as_deref(),
+                &html_content,
+                css_content.as_deref(),
                 self.plugin.is_some(),
             )?;
 
+            let context = built.context();
             if let Some(ref mut p) = self.plugin {
-                p.register_component_template(element.name(), &component_data, built.artifact())?;
+                let component_data = self
+                    .component_registry
+                    .get(element.name())
+                    .ok_or_else(|| {
+                        ParserError::NotFound(format!(
+                            "component <{}> disappeared during CSS compilation",
+                            element.name()
+                        ))
+                    })?
+                    .clone();
+                p.register_component_template(
+                    element.name(),
+                    &component_data,
+                    built.artifact(),
+                    context,
+                )?;
             }
 
             self.parse(element.name(), &built.ssr)?;
@@ -3178,6 +3488,20 @@ impl HtmlParser {
         Ok(())
     }
 
+    fn analyze_component_dom(
+        &mut self,
+        tag_name: &str,
+        source: &str,
+    ) -> Result<ComponentDomAnalysis> {
+        if let Some(analysis) = self.component_dom_analyses.get(tag_name) {
+            return Ok(*analysis);
+        }
+        let analysis = analyze_component_dom(tag_name, source, self.options.dom_strategy)?;
+        self.component_dom_analyses
+            .insert(tag_name.to_string(), analysis);
+        Ok(analysis)
+    }
+
     fn process_text(&mut self, content: &str, fragments: &mut Vec<WebUIFragment>) -> Result<()> {
         if !Self::should_emit_text_content(content) {
             return Ok(());
@@ -3975,7 +4299,7 @@ impl HtmlParser {
             return Ok(());
         }
 
-        let component_data = self
+        let (html_content, css_content) = self
             .component_registry
             .get(component)
             .ok_or_else(|| {
@@ -3984,18 +4308,33 @@ impl HtmlParser {
                     format!("unknown component <{component}>"),
                 )
                 .help(self.unknown_component_help(component))
-            })?
-            .clone();
+            })
+            .map(|component| {
+                (
+                    component.html_content.clone(),
+                    component.css_content.clone(),
+                )
+            })?;
 
         let built = self.build_component_templates(
             component,
-            &component_data.html_content,
-            component_data.css_content.as_deref(),
+            &html_content,
+            css_content.as_deref(),
             self.plugin.is_some(),
         )?;
 
+        let context = built.context();
         if let Some(ref mut p) = self.plugin {
-            p.register_component_template(component, &component_data, built.artifact())?;
+            let component_data = self
+                .component_registry
+                .get(component)
+                .ok_or_else(|| {
+                    ParserError::NotFound(format!(
+                        "component <{component}> disappeared during CSS compilation"
+                    ))
+                })?
+                .clone();
+            p.register_component_template(component, &component_data, built.artifact(), context)?;
         }
 
         let saved_buffer = std::mem::take(&mut self.raw_buffer);
@@ -4032,63 +4371,110 @@ impl HtmlParser {
         css_content: Option<&str>,
         artifact_needed: bool,
     ) -> Result<BuiltComponentTemplate> {
+        let dom_analysis = self.analyze_component_dom(tag_name, html)?;
+        let is_light = !dom_analysis.uses_shadow_dom;
+        let mut inline_style_ranges = Vec::new();
+        if is_light {
+            let mut comment_ranges = Vec::new();
+            Self::collect_html_comment_and_style_ranges(
+                html,
+                &mut comment_ranges,
+                &mut inline_style_ranges,
+            )?;
+            if let Some(css) = css_content {
+                css_light::validate_global_css(tag_name, css)?;
+            }
+            for (start, end) in &inline_style_ranges {
+                css_light::validate_global_css(tag_name, &html[*start..*end])?;
+            }
+        }
+        if self.component_registry.contains(tag_name) {
+            self.component_registry
+                .prepare_policy_css(tag_name, dom_analysis.uses_shadow_dom)?;
+        }
+        let css_content = self
+            .component_registry
+            .get(tag_name)
+            .and_then(|component| component.css_content.as_deref())
+            .or(css_content);
         let adopted_specifier = match self.options.css_strategy {
             CssStrategy::Module if css_content.is_some() => Some(tag_name),
             _ => None,
         };
-        let css_injection = match self.options.css_strategy {
-            CssStrategy::Link => {
-                // In light DOM mode, CSS links go in <head> (emitted by handler),
-                // not inside each component template.
-                if let (Some(css), DomStrategy::Shadow) = (css_content, self.options.dom_strategy) {
-                    let href = self.options.css_link_options.resolve(tag_name, css);
-                    let mut link = String::with_capacity(31 + href.href.len());
-                    link.push_str("<link rel=\"stylesheet\" href=\"");
-                    link.push_str(&href.href);
-                    link.push_str("\">");
-                    Some(link)
-                } else {
-                    None
-                }
-            }
-            CssStrategy::Style => css_content.map(|css| {
-                let trimmed = css.trim();
-                let mut style = String::with_capacity(15 + trimmed.len());
-                style.push_str("<style>");
-                style.push_str(trimmed);
-                style.push_str("</style>");
-                style
-            }),
-            CssStrategy::Module => None,
+        // CSS resources are installed by the handler from the precomputed
+        // tree-local closure. Keeping template serialization style-free avoids
+        // duplicating Light descendants and lets repeated Shadow instances each
+        // receive an exact, claimable resource set.
+        //
+        // The resolved delivery is reported to the plugin as build context; a
+        // plugin whose client runtime builds its own roots from the captured
+        // template decides for itself what to do with it. Light CSS is
+        // Document/tree-owned and is installed by the precomputed closure.
+        let style = if dom_analysis.uses_shadow_dom && self.plugin.is_some() {
+            self.component_style_delivery(tag_name, css_content)
+        } else {
+            None
         };
 
-        let artifact_differs = artifact_needed && Self::template_has_stripped_runtime_attrs(html);
+        let runtime_attr_source = match dom_analysis.authored_shadow_root {
+            Some((start, end)) => &html[start..end],
+            None => html,
+        };
+        let artifact_differs =
+            artifact_needed && Self::template_has_stripped_runtime_attrs(runtime_attr_source);
+        // A `w-render`/`w-hydrate` component authors its policy on a plain
+        // `<template>` wrapper. The policy lands on the host element as
+        // generated CSS, so the wrapper itself must not survive into a Light
+        // template, where its contents would never render.
         let policy_wrapper = parse_component_render_policy(tag_name, html)?.is_authored();
-        let ssr = self.process_component_policy_template(
+        let ssr = self.process_component_policy_template_for_dom(
             html,
-            css_injection.as_deref(),
             adopted_specifier,
+            dom_analysis,
             policy_wrapper,
         )?;
         let artifact = if artifact_differs {
-            Some(self.process_component_artifact_template(
+            Some(self.process_component_artifact_template_for_dom(
                 html,
-                css_injection.as_deref(),
                 adopted_specifier,
+                dom_analysis,
                 policy_wrapper,
             )?)
         } else {
             None
         };
+        Ok(BuiltComponentTemplate {
+            ssr,
+            artifact,
+            uses_shadow_dom: dom_analysis.uses_shadow_dom,
+            style,
+        })
+    }
 
-        Ok(BuiltComponentTemplate { ssr, artifact })
+    /// Resolve how a component's compiled CSS reaches the browser.
+    ///
+    /// Build-time only, once per component definition, and only when a plugin
+    /// can observe it.
+    fn component_style_delivery(
+        &self,
+        tag_name: &str,
+        css_content: Option<&str>,
+    ) -> Option<OwnedComponentStyle> {
+        let css = css_content?;
+        Some(match self.options.css_strategy {
+            CssStrategy::Link => {
+                OwnedComponentStyle::Link(self.options.css_link_options.resolve(tag_name, css).href)
+            }
+            CssStrategy::Style => OwnedComponentStyle::Inline(css.trim().to_string()),
+            CssStrategy::Module => OwnedComponentStyle::Adopted(tag_name.to_string()),
+        })
     }
 
     /// Process component template HTML for SSR output.
     ///
-    /// The developer's authored `<template>` wrapper is the source of truth.
+    /// An authored declarative Shadow DOM wrapper is the source of truth.
     ///
-    /// - **Dev supplied `<template ...>`:** preserved verbatim — including
+    /// - **Dev supplied `<template shadowrootmode="open">`:** preserved verbatim — including
     ///   `shadowrootmode`, `shadowrootadoptedstylesheets`, signal fragments,
     ///   and any other custom attributes. SSR strips runtime-only attributes
     ///   (`@event`, `:bind`, `?cond`) from the opening tag, since those are
@@ -4098,12 +4484,12 @@ impl HtmlParser {
     ///   styles still apply. For `CssStrategy::Module`, the parser appends
     ///   `shadowrootadoptedstylesheets="<tag>"` when it is missing.
     ///
-    /// - **Dev omitted `<template>`:**
-    ///   - `DomStrategy::Shadow` wraps the content in a framework-controlled
-    ///     `<template shadowrootmode="open">`, optionally adding
-    ///     `shadowrootadoptedstylesheets="<tag>"` for the CSS-module strategy.
-    ///   - `DomStrategy::Light` emits the content as-is (with the CSS snippet
-    ///     prepended, if any).
+    /// - **Sole bare `<template>` root:** unwraps the wrapper and emits its
+    ///   contents as explicit Light DOM.
+    ///
+    /// - **No authored root:** follows the configured fallback, generating an
+    ///   open Shadow wrapper for `DomStrategy::Shadow` or emitting direct Light
+    ///   DOM for `DomStrategy::Light`.
     ///
     /// Performance: zero recursion, zero regex. The dev-template path uses
     /// quote-aware scanners for opening-tag queries and pre-sizes the output
@@ -4115,20 +4501,37 @@ impl HtmlParser {
         css_snippet: Option<&str>,
         adopted_specifier: Option<&str>,
     ) -> Result<String> {
-        self.process_component_policy_template(html, css_snippet, adopted_specifier, false)
+        let dom_analysis = analyze_component_dom("component", html, self.options.dom_strategy)?;
+        self.process_component_template_with_mode(
+            html,
+            ComponentStyleInjection {
+                css_snippet,
+                adopted_specifier,
+            },
+            dom_analysis,
+            ComponentTemplateMode {
+                preserve_runtime_attrs: false,
+                policy_wrapper: false,
+            },
+        )
     }
 
-    fn process_component_policy_template(
+    /// Serializes the SSR template for a component that may author a
+    /// `w-render`/`w-hydrate` policy on its `<template>` wrapper.
+    fn process_component_policy_template_for_dom(
         &mut self,
         html: &str,
-        css_snippet: Option<&str>,
         adopted_specifier: Option<&str>,
+        dom_analysis: ComponentDomAnalysis,
         policy_wrapper: bool,
     ) -> Result<String> {
         self.process_component_template_with_mode(
             html,
-            css_snippet,
-            adopted_specifier,
+            ComponentStyleInjection {
+                css_snippet: None,
+                adopted_specifier,
+            },
+            dom_analysis,
             ComponentTemplateMode {
                 preserve_runtime_attrs: false,
                 policy_wrapper,
@@ -4136,17 +4539,20 @@ impl HtmlParser {
         )
     }
 
-    fn process_component_artifact_template(
+    fn process_component_artifact_template_for_dom(
         &mut self,
         html: &str,
-        css_snippet: Option<&str>,
         adopted_specifier: Option<&str>,
+        dom_analysis: ComponentDomAnalysis,
         policy_wrapper: bool,
     ) -> Result<String> {
         self.process_component_template_with_mode(
             html,
-            css_snippet,
-            adopted_specifier,
+            ComponentStyleInjection {
+                css_snippet: None,
+                adopted_specifier,
+            },
+            dom_analysis,
             ComponentTemplateMode {
                 preserve_runtime_attrs: true,
                 policy_wrapper,
@@ -4157,66 +4563,87 @@ impl HtmlParser {
     fn process_component_template_with_mode(
         &mut self,
         html: &str,
-        css_snippet: Option<&str>,
-        adopted_specifier: Option<&str>,
+        style: ComponentStyleInjection<'_>,
+        dom_analysis: ComponentDomAnalysis,
         mode: ComponentTemplateMode,
     ) -> Result<String> {
         let trimmed_end = html.trim_end();
-        let (trimmed, _) = html::leading_content(trimmed_end);
-        let snippet = css_snippet.unwrap_or_default();
-
-        let processed = if trimmed.starts_with("<template") {
-            let authored_shadow =
-                html::parse_tag(trimmed).is_some_and(|tag| tag.has_attr("shadowrootmode"));
-            let base = self.strip_template_build_attrs(trimmed, mode.preserve_runtime_attrs);
-            let with_shadow = if mode.policy_wrapper
-                && matches!(self.options.dom_strategy, DomStrategy::Shadow)
-            {
-                Self::append_shadow_mode_if_missing(base)
-            } else {
+        let (trimmed, content_start) = html::leading_content(trimmed_end);
+        let snippet = style.css_snippet.unwrap_or_default();
+
+        let processed = if let Some((root_start, root_end)) = dom_analysis.authored_shadow_root {
+            let trim_start = content_start;
+            let trim_end = html.trim_end().len();
+            if root_start < trim_start || root_end > trim_end || root_start >= root_end {
+                return Err(ParserError::Html(
+                    "invalid declarative Shadow DOM source range".to_string(),
+                ));
+            }
+            let root = &html[root_start..root_end];
+            // Compiler-owned policy attributes are stripped from both views;
+            // runtime attributes survive only in the captured client template.
+            let base = self.strip_template_build_attrs(root, mode.preserve_runtime_attrs);
+            let with_adopted = Self::append_adopted_attr_if_missing(base, style.adopted_specifier);
+            let root = Self::inject_css_snippet_into_template(with_adopted, snippet);
+            let mut result =
+                String::with_capacity(trimmed.len() + root.len() - (root_end - root_start));
+            result.push_str(&html[trim_start..root_start]);
+            result.push_str(&root);
+            result.push_str(&html[root_end..trim_end]);
+            result
+        } else if let Some((content_start, content_end)) = dom_analysis.authored_light_root {
+            let base = html[content_start..content_end].to_string();
+            if snippet.is_empty() {
                 base
-            };
-            let with_adopted = Self::append_adopted_attr_if_missing(with_shadow, adopted_specifier);
-            let injected = Self::inject_css_snippet_into_template(with_adopted, snippet);
-            if mode.policy_wrapper
-                && matches!(self.options.dom_strategy, DomStrategy::Light)
-                && !authored_shadow
-            {
-                Self::unwrap_component_policy_template(injected)
             } else {
-                injected
+                let mut result = String::with_capacity(snippet.len() + base.len());
+                result.push_str(snippet);
+                result.push_str(&base);
+                result
             }
-        } else {
-            match self.options.dom_strategy {
-                DomStrategy::Shadow => {
-                    let adopted = adopted_specifier.unwrap_or_default();
-                    let adopted_extra = if adopted.is_empty() {
-                        0
-                    } else {
-                        Self::adopted_attr_len(adopted)
-                    };
-                    let mut result =
-                        String::with_capacity(45 + adopted_extra + snippet.len() + trimmed.len());
-                    result.push_str("<template shadowrootmode=\"open\"");
-                    if !adopted.is_empty() {
-                        Self::push_adopted_attr(&mut result, adopted);
-                    }
-                    result.push('>');
-                    result.push_str(snippet);
-                    result.push_str(trimmed);
-                    result.push_str("</template>");
-                    result
-                }
-                DomStrategy::Light => {
-                    if snippet.is_empty() {
-                        trimmed.to_string()
-                    } else {
-                        let mut result = String::with_capacity(snippet.len() + trimmed.len());
-                        result.push_str(snippet);
-                        result.push_str(trimmed);
-                        result
-                    }
+        } else if dom_analysis.uses_shadow_dom {
+            if mode.policy_wrapper {
+                let base = self.strip_template_build_attrs(trimmed, mode.preserve_runtime_attrs);
+                let with_shadow = Self::append_shadow_mode_if_missing(base);
+                let with_adopted =
+                    Self::append_adopted_attr_if_missing(with_shadow, style.adopted_specifier);
+                Self::inject_css_snippet_into_template(with_adopted, snippet)
+            } else {
+                let adopted = style.adopted_specifier.unwrap_or_default();
+                let adopted_extra = if adopted.is_empty() {
+                    0
+                } else {
+                    Self::adopted_attr_len(adopted)
+                };
+                let mut result =
+                    String::with_capacity(45 + adopted_extra + snippet.len() + trimmed.len());
+                result.push_str("<template shadowrootmode=\"open\"");
+                if !adopted.is_empty() {
+                    Self::push_adopted_attr(&mut result, adopted);
                 }
+                result.push('>');
+                result.push_str(snippet);
+                result.push_str(trimmed);
+                result.push_str("</template>");
+                result
+            }
+        } else {
+            // A policy component authors its `w-render`/`w-hydrate` on a plain
+            // `<template>` wrapper. The policy is applied to the host element
+            // through generated CSS, so a Light template must drop the wrapper
+            // or its contents would never render.
+            let base = if mode.policy_wrapper {
+                Self::unwrap_component_template(trimmed)
+            } else {
+                trimmed.to_string()
+            };
+            if snippet.is_empty() {
+                base
+            } else {
+                let mut result = String::with_capacity(snippet.len() + base.len());
+                result.push_str(snippet);
+                result.push_str(&base);
+                result
             }
         };
 
@@ -4249,7 +4676,13 @@ impl HtmlParser {
         let Some(tag) = html::parse_tag(&html) else {
             return html;
         };
-        if tag.name != "template" || tag.closing || tag.has_attr(Self::ADOPTED_STYLESHEETS_ATTR) {
+        if !tag.name.eq_ignore_ascii_case("template")
+            || tag.closing
+            || tag.attrs().any(|attr| {
+                attr.name
+                    .eq_ignore_ascii_case(Self::ADOPTED_STYLESHEETS_ATTR)
+            })
+        {
             return html;
         }
 
@@ -4264,21 +4697,25 @@ impl HtmlParser {
         let Some(tag) = html::parse_tag(&html) else {
             return html;
         };
-        if tag.name != "template" || tag.closing || tag.has_attr("shadowrootmode") {
+        if !tag.name.eq_ignore_ascii_case("template")
+            || tag.closing
+            || tag
+                .attrs()
+                .any(|attr| attr.name.eq_ignore_ascii_case("shadowrootmode"))
+        {
             return html;
         }
 
-        const SHADOW_MODE: &str = " shadowrootmode=\"open\"";
-        let mut result = String::with_capacity(html.len() + SHADOW_MODE.len());
+        let mut result = String::with_capacity(html.len() + 22);
         result.push_str(&html[..tag.close]);
-        result.push_str(SHADOW_MODE);
+        result.push_str(" shadowrootmode=\"open\"");
         result.push_str(&html[tag.close..]);
         result
     }
 
-    fn unwrap_component_policy_template(html: String) -> String {
-        let Some(tag) = html::parse_tag(&html) else {
-            return html;
+    fn unwrap_component_template(html: &str) -> String {
+        let Some(tag) = html::parse_tag(html) else {
+            return html.to_string();
         };
         let inner_start = tag.close + 1;
         let inner_end = html.rfind("</template>").unwrap_or(html.len());
@@ -4305,7 +4742,7 @@ impl HtmlParser {
         let Some(tag) = html::parse_tag(trimmed) else {
             return false;
         };
-        if tag.name != "template" || tag.closing {
+        if !tag.name.eq_ignore_ascii_case("template") || tag.closing {
             return false;
         }
         tag.attrs().any(|attr| {
@@ -4441,6 +4878,41 @@ mod tests {
 
     use super::*;
 
+    #[derive(Default)]
+    struct ContextArtifactPlugin {
+        artifacts: Vec<crate::plugin::ComponentTemplateArtifact>,
+    }
+
+    impl ParserPlugin for ContextArtifactPlugin {
+        fn register_component_template(
+            &mut self,
+            tag_name: &str,
+            _component: &Component,
+            processed_template: &str,
+            context: crate::plugin::ComponentTemplateContext,
+        ) -> Result<()> {
+            self.artifacts
+                .push(crate::plugin::ComponentTemplateArtifact::template(
+                    tag_name.to_string(),
+                    processed_template.to_string(),
+                    context.uses_shadow_dom,
+                ));
+            Ok(())
+        }
+
+        fn classify_attribute(&mut self, _attr_name: &str) -> AttributeAction {
+            AttributeAction::Keep
+        }
+
+        fn finish_element(&mut self, _binding_attribute_count: u32) -> Option<Vec<u8>> {
+            None
+        }
+
+        fn into_artifacts(self: Box<Self>) -> Result<ParserPluginArtifacts> {
+            Ok(ParserPluginArtifacts::ComponentTemplates(self.artifacts))
+        }
+    }
+
     fn structural_matcher(value: &str) -> FragmentMatcher {
         signal_raw(&format!("{STRUCTURAL_SIGNAL_PREFIX}{value}"))
     }
@@ -4453,6 +4925,455 @@ mod tests {
         webui_test_utils::boundary_end(declaration)
     }
 
+    #[test]
+    fn unwrapped_component_uses_configured_dom_strategy() {
+        assert!(
+            analyze_component_dom("x-card", "<div>content</div>", DomStrategy::Shadow)
+                .expect("valid component")
+                .uses_shadow_dom
+        );
+        assert!(
+            !analyze_component_dom("x-card", "<div>content</div>", DomStrategy::Light)
+                .expect("valid component")
+                .uses_shadow_dom
+        );
+    }
+
+    #[test]
+    fn bare_template_explicitly_selects_light_dom_over_shadow_fallback() {
+        let analysis = analyze_component_dom(
+            "x-card",
+            "<template><div>content</div></template>",
+            DomStrategy::Shadow,
+        )
+        .expect("valid explicit Light wrapper");
+        assert!(!analysis.uses_shadow_dom);
+        assert!(analysis.authored_light_root.is_some());
+
+        let attributed = analyze_component_dom(
+            "x-card",
+            r#"<template data-purpose="content"><div>content</div></template>"#,
+            DomStrategy::Shadow,
+        )
+        .expect("ordinary template remains valid");
+        assert!(attributed.uses_shadow_dom);
+        assert!(attributed.authored_light_root.is_none());
+    }
+
+    #[test]
+    fn plugin_artifacts_preserve_resolved_shadow_mode() {
+        let component_html = r#"<template shadowrootmode="open"><p>shadow</p></template>"#;
+        {
+            let mut parser = HtmlParser::with_plugin_options(
+                Box::new(ContextArtifactPlugin::default()),
+                CssStrategy::Style,
+            );
+            parser
+                .component_registry_mut()
+                .register_component(ComponentRegistration::new(
+                    "x-card",
+                    component_html,
+                    None,
+                    false,
+                ))
+                .expect("register component");
+            parser
+                .parse("index.html", "<x-card></x-card>")
+                .expect("parse component");
+
+            let ParserPluginArtifacts::ComponentTemplates(artifacts) =
+                parser.take_plugin_artifacts().expect("consume artifacts")
+            else {
+                panic!("expected component artifacts");
+            };
+            assert!(artifacts[0].uses_shadow_dom);
+        }
+    }
+
+    #[test]
+    fn open_shadow_wrapper_marks_component_shadow() {
+        let html =
+            "<!-- lead --><template shadowrootmode='open'><slot></slot></template><!-- tail -->";
+        assert!(
+            analyze_component_dom("x-card", html, DomStrategy::Light)
+                .expect("valid Shadow wrapper")
+                .uses_shadow_dom
+        );
+    }
+
+    #[test]
+    fn closed_shadow_wrapper_is_rejected() {
+        let error = analyze_component_dom(
+            "x-card",
+            "<template shadowrootmode=\"closed\"><p>content</p></template>",
+            DomStrategy::Shadow,
+        )
+        .expect_err("closed mode must fail");
+        assert!(matches!(
+            error,
+            ParserError::Template(ref diagnostic)
+                if diagnostic.error_code() == Some(codes::INVALID_SHADOW_ROOT_MODE)
+                    && diagnostic.component_name() == Some("x-card")
+        ));
+    }
+
+    #[test]
+    fn shadow_wrapper_must_be_the_only_top_level_element() {
+        let error = analyze_component_dom(
+            "x-card",
+            "<template shadowrootmode=\"open\"><p>content</p></template><span>extra</span>",
+            DomStrategy::Light,
+        )
+        .expect_err("multiple roots must fail");
+        assert!(matches!(
+            error,
+            ParserError::Template(ref diagnostic)
+                if diagnostic.error_code() == Some(codes::INVALID_SHADOW_ROOT_MODE)
+        ));
+    }
+
+    #[test]
+    fn shadowrootmode_rejects_invalid_value_and_placement() {
+        for html in [
+            "<template shadowrootmode=\"invalid\"><p>content</p></template>",
+            "<template shadowrootmode=\" open \"><p>content</p></template>",
+            "<template :shadowrootmode=\"{{mode}}\"><p>content</p></template>",
+            "<template shadowrootmode=\"open\" />",
+            "<div><template shadowrootmode=\"open\"><p>content</p></template></div>",
+            "<div shadowrootmode=\"open\">content</div>",
+        ] {
+            let error = analyze_component_dom("x-card", html, DomStrategy::Shadow)
+                .expect_err("invalid shadowrootmode must fail");
+            assert!(matches!(
+                error,
+                ParserError::Template(ref diagnostic)
+                    if diagnostic.error_code() == Some(codes::INVALID_SHADOW_ROOT_MODE)
+                        && diagnostic.component_name() == Some("x-card")
+                        && diagnostic.help_text().is_some()
+                        && diagnostic.snippet_text().is_some()
+            ));
+        }
+    }
+
+    #[test]
+    fn light_component_slot_is_rejected() {
+        let source = "<div><slot name=\"label\"></slot></div>";
+        let error = analyze_component_dom("x-card", source, DomStrategy::Light)
+            .expect_err("Light slot must fail");
+        assert!(matches!(
+            error,
+            ParserError::Template(ref diagnostic)
+                if diagnostic.error_code() == Some(codes::LIGHT_DOM_SLOT)
+                    && diagnostic.help_text().is_some_and(|help| help.contains("shadowrootmode"))
+        ));
+        assert!(
+            analyze_component_dom("x-card", source, DomStrategy::Shadow)
+                .expect("implicit Shadow components support slots")
+                .uses_shadow_dom
+        );
+
+        let explicit_light = "<template><slot name=\"label\"></slot></template>";
+        let error = analyze_component_dom("x-card", explicit_light, DomStrategy::Shadow)
+            .expect_err("bare template explicitly selects Light");
+        assert!(matches!(
+            error,
+            ParserError::Template(ref diagnostic)
+                if diagnostic.error_code() == Some(codes::LIGHT_DOM_SLOT)
+        ));
+    }
+
+    #[test]
+    fn webui_plugin_records_authored_shadow_wrapper() {
+        let mut parser =
+            HtmlParser::with_plugin(Box::new(crate::plugin::webui::WebUIParserPlugin::new()));
+        parser
+            .component_registry_mut()
+            .register_component(ComponentRegistration::new(
+                "x-card",
+                "<!-- lead --><template shadowrootmode=\"open\" @click=\"{onClick()}\"><slot></slot></template><!-- tail -->",
+                None,
+                true,
+            ))
+            .expect("register component");
+        parser
+            .parse("index.html", "<x-card>projected</x-card>")
+            .expect("parse component");
+
+        let ParserPluginArtifacts::ComponentTemplates(templates) =
+            parser.take_plugin_artifacts().expect("plugin artifacts")
+        else {
+            panic!("expected component templates");
+        };
+        assert!(templates[0].uses_shadow_dom);
+        assert!(templates[0].template_json.contains("\"sd\":1"));
+        assert!(templates[0]
+            .template_json
+            .contains(r#""re":[["click","onClick",[]]]"#));
+    }
+
+    #[test]
+    fn fast_plugins_receive_authored_shadow_metadata() {
+        let plugins: Vec<Box<dyn ParserPlugin>> = vec![
+            Box::new(crate::plugin::fast_v2::FastV2ParserPlugin::new()),
+            Box::new(crate::plugin::fast_v3::FastV3ParserPlugin::new()),
+        ];
+        for plugin in plugins {
+            let mut parser = HtmlParser::with_plugin(plugin);
+            parser
+                .component_registry_mut()
+                .register_component(ComponentRegistration::new(
+                    "x-card",
+                    "<template shadowrootmode=\"open\"><slot></slot></template>",
+                    None,
+                    true,
+                ))
+                .expect("register component");
+            parser
+                .parse("index.html", "<x-card>projected</x-card>")
+                .expect("parse component");
+
+            let ParserPluginArtifacts::ComponentTemplates(templates) =
+                parser.take_plugin_artifacts().expect("plugin artifacts")
+            else {
+                panic!("expected component templates");
+            };
+            assert!(templates[0].uses_shadow_dom);
+        }
+    }
+
+    /// FAST's client runtime builds its own roots from the captured template,
+    /// so it opts into keeping Shadow CSS there using the delivery reported in
+    /// its build context.
+    #[test]
+    fn fast_plugin_keeps_shadow_css_in_captured_template() {
+        for (strategy, expected) in [
+            (
+                CssStrategy::Link,
+                "<link rel=\"stylesheet\" href=\"x-card.css\">",
+            ),
+            (CssStrategy::Style, "<style>.card{color:red}</style>"),
+        ] {
+            let plugins: Vec<Box<dyn ParserPlugin>> = vec![
+                Box::new(crate::plugin::fast_v2::FastV2ParserPlugin::new()),
+                Box::new(crate::plugin::fast_v3::FastV3ParserPlugin::new()),
+            ];
+            for plugin in plugins {
+                let mut parser = HtmlParser::with_plugin_options(
+                    plugin,
+                    ParserOptions {
+                        css_strategy: strategy,
+                        ..ParserOptions::default()
+                    },
+                );
+                parser
+                    .component_registry_mut()
+                    .register_component(ComponentRegistration::new(
+                        "x-card",
+                        "<template shadowrootmode=\"open\"><div class=\"card\"></div></template>",
+                        Some(".card{color:red}"),
+                        true,
+                    ))
+                    .expect("register component");
+                parser
+                    .parse("index.html", "<x-card></x-card>")
+                    .expect("parse component");
+
+                let ParserPluginArtifacts::ComponentTemplates(templates) =
+                    parser.take_plugin_artifacts().expect("plugin artifacts")
+                else {
+                    panic!("expected component templates");
+                };
+                assert!(
+                    templates[0].template.contains(expected),
+                    "{strategy:?} plugin template missing {expected}: {}",
+                    templates[0].template
+                );
+            }
+        }
+    }
+
+    /// FAST defaults client-created components to Shadow roots and has no
+    /// artifact-level Light registration contract. Rejecting the mismatch is
+    /// safer than letting hydration replace correct Light SSR with a Shadow tree.
+    #[test]
+    fn fast_plugin_rejects_effective_light_dom() {
+        let mut parser = HtmlParser::with_plugin_options(
+            Box::new(crate::plugin::fast_v3::FastV3ParserPlugin::new()),
+            ParserOptions {
+                css_strategy: CssStrategy::Style,
+                dom_strategy: DomStrategy::Light,
+                ..ParserOptions::default()
+            },
+        );
+        parser
+            .component_registry_mut()
+            .register_component(ComponentRegistration::new(
+                "x-light",
+                "<div class=\"card\"></div>",
+                Some(".card{color:red}"),
+                true,
+            ))
+            .expect("register component");
+        let error = parser
+            .parse("index.html", "<x-light></x-light>")
+            .expect_err("FAST must reject Light DOM");
+        assert!(matches!(
+            error,
+            ParserError::Template(ref diagnostic)
+                if diagnostic.error_code() == Some(codes::FAST_LIGHT_DOM_UNSUPPORTED)
+                    && diagnostic.component_name() == Some("x-light")
+                    && diagnostic.help_text().is_some()
+        ));
+    }
+
+    /// SSR output is style-free in every build: the handler installs the
+    /// precomputed closure into the owning CSS tree exactly once.
+    #[test]
+    fn plugin_build_leaves_ssr_output_style_free() {
+        let mut parser = HtmlParser::with_plugin_options(
+            Box::new(crate::plugin::fast_v3::FastV3ParserPlugin::new()),
+            ParserOptions {
+                css_strategy: CssStrategy::Style,
+                ..ParserOptions::default()
+            },
+        );
+        parser
+            .component_registry_mut()
+            .register_component(ComponentRegistration::new(
+                "x-card",
+                "<template shadowrootmode=\"open\"><div class=\"card\"></div></template>",
+                Some(".card{color:red}"),
+                true,
+            ))
+            .expect("register component");
+        parser
+            .parse("index.html", "<x-card></x-card>")
+            .expect("parse component");
+
+        let records = parser.into_fragment_records();
+        let mut ssr = String::new();
+        for fragment in &records["x-card"].fragments {
+            if let Some(web_ui_fragment::Fragment::Raw(ref value)) = fragment.fragment {
+                ssr.push_str(&value.value);
+            }
+        }
+        assert!(
+            !ssr.contains("<style>"),
+            "SSR component output must stay style-free: {ssr}"
+        );
+    }
+
+    /// Records the build context so tests can assert what the parser reports
+    /// without asserting how any particular plugin reacts to it.
+    struct StyleContextPlugin {
+        captured: std::rc::Rc<std::cell::RefCell<Vec<(bool, Option<String>, String)>>>,
+    }
+
+    impl crate::plugin::ParserPlugin for StyleContextPlugin {
+        fn register_component_template(
+            &mut self,
+            _tag_name: &str,
+            _component: &Component,
+            processed_template: &str,
+            context: crate::plugin::ComponentTemplateContext<'_>,
+        ) -> Result<()> {
+            self.captured.borrow_mut().push((
+                context.uses_shadow_dom,
+                context.style.map(|style| format!("{style:?}")),
+                processed_template.to_string(),
+            ));
+            Ok(())
+        }
+
+        fn classify_attribute(&mut self, _attr_name: &str) -> AttributeAction {
+            AttributeAction::Keep
+        }
+
+        fn finish_element(&mut self, _binding_attribute_count: u32) -> Option<Vec<u8>> {
+            None
+        }
+    }
+
+    fn capture_style_context(
+        strategy: CssStrategy,
+        dom_strategy: DomStrategy,
+        template: &str,
+        css: Option<&str>,
+    ) -> (bool, Option<String>, String) {
+        let captured = std::rc::Rc::new(std::cell::RefCell::new(Vec::new()));
+        let mut parser = HtmlParser::with_plugin_options(
+            Box::new(StyleContextPlugin {
+                captured: std::rc::Rc::clone(&captured),
+            }),
+            ParserOptions {
+                css_strategy: strategy,
+                dom_strategy,
+                ..ParserOptions::default()
+            },
+        );
+        parser
+            .component_registry_mut()
+            .register_component(ComponentRegistration::new("x-card", template, css, true))
+            .expect("register component");
+        parser
+            .parse("index.html", "<x-card></x-card>")
+            .expect("parse component");
+        let captured = captured.borrow();
+        captured.first().cloned().expect("component registered")
+    }
+
+    /// The parser reports the resolved delivery as data and injects nothing:
+    /// a plugin that ignores `context.style` gets a style-free template even
+    /// for an authored Shadow component.
+    #[test]
+    fn parser_reports_shadow_style_delivery_without_injecting_it() {
+        for (strategy, expected) in [
+            (CssStrategy::Link, "Link { href: \"x-card.css\" }"),
+            (CssStrategy::Style, "Inline { css: \".card{color:red}\" }"),
+            (CssStrategy::Module, "Adopted { specifier: \"x-card\" }"),
+        ] {
+            let (uses_shadow_dom, style, template) = capture_style_context(
+                strategy,
+                DomStrategy::Shadow,
+                "<template shadowrootmode=\"open\" shadowrootadoptedstylesheets=\"x-card\"><div class=\"card\"></div></template>",
+                Some(".card{color:red}"),
+            );
+            assert!(uses_shadow_dom, "{strategy:?} should be shadow");
+            assert_eq!(style.as_deref(), Some(expected), "{strategy:?} delivery");
+            assert!(
+                !template.contains("<style>") && !template.contains("<link"),
+                "{strategy:?} template must stay injection-free: {template}"
+            );
+        }
+    }
+
+    /// Light CSS belongs to the owning CSS tree, so there is nothing for a
+    /// plugin to place inside a runtime-created root.
+    #[test]
+    fn parser_reports_no_style_delivery_for_light_components() {
+        let (uses_shadow_dom, style, _) = capture_style_context(
+            CssStrategy::Style,
+            DomStrategy::Light,
+            "<div class=\"card\"></div>",
+            Some(".card{color:red}"),
+        );
+        assert!(!uses_shadow_dom);
+        assert_eq!(style, None);
+    }
+
+    /// A component without CSS reports no delivery at all.
+    #[test]
+    fn parser_reports_no_style_delivery_without_css() {
+        let (uses_shadow_dom, style, _) = capture_style_context(
+            CssStrategy::Style,
+            DomStrategy::Shadow,
+            "<template shadowrootmode=\"open\"><div></div></template>",
+            None,
+        );
+        assert!(uses_shadow_dom);
+        assert_eq!(style, None);
+    }
+
     #[test]
     fn test_plugin_display_names() {
         assert_eq!(Plugin::Fast.to_string(), "fast");
@@ -4612,54 +5533,123 @@ mod tests {
 
         assert_stream!(fragment_records, "test.html", [if_cond("if-1"),]);
 
-        // Verify the sub-fragment contains our content
+        // Verify the sub-fragment contains our content
+        assert_stream!(
+            fragment_records,
+            "if-1",
+            [
+                raw("<div>Welcome back, "),
+                signal("username"),
+                raw("!</div>"),
+            ]
+        );
+    }
+
+    #[test]
+    fn test_component_directive() {
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        parser
+            .component_registry
+            .register_component(ComponentRegistration::new(
+                "my-component",
+                "<div>My Component</div>",
+                Some("div { color: blue; }"),
+                true,
+            ))
+            .expect("Failed to register component");
+
+        let result = parser.parse("test.html", "<my-component></my-component>");
+        assert!(result.is_ok(), "Parse error: {:?}", result.err());
+        let records = parser.into_fragment_records();
+
+        assert_stream!(
+            records,
+            "test.html",
+            [
+                raw("<my-component"),
+                structural_matcher("streaming_root:my-component"),
+                raw(">"),
+                component("my-component"),
+                raw("</my-component>"),
+            ]
+        );
+
+        // Component template stream should contain the component content with
+        // no compiler-owned Light DOM markers.
+        let comp = &records["my-component"].fragments;
+        assert_eq!(comp.len(), 1);
+        assert!(
+            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                !raw.value.contains("<template shadowrootmode")
+                    && raw.value.contains("<div")
+                    && raw.value.contains(">My Component</div>"))
+        );
+    }
+
+    #[test]
+    fn shadow_component_emits_style_hook_inside_declarative_root() {
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component(ComponentRegistration::new(
+                "my-component",
+                r#"<template shadowrootmode="open"><div>My Component</div></template>"#,
+                Some("div { color: blue; }"),
+                true,
+            ))
+            .expect("register");
+
+        parser
+            .parse("test.html", "<my-component></my-component>")
+            .expect("parse");
+        let records = parser.into_fragment_records();
         assert_stream!(
-            fragment_records,
-            "if-1",
+            records,
+            "my-component",
             [
-                raw("<div>Welcome back, "),
-                signal("username"),
-                raw("!</div>"),
+                raw("<template shadowrootmode=\"open\">"),
+                structural_matcher("shadow_styles:my-component"),
+                raw("<div>My Component</div></template>"),
             ]
         );
+        assert!(
+            records["my-component"]
+                .fragments
+                .iter()
+                .all(|fragment| !matches!(
+                    fragment.fragment.as_ref(),
+                    Some(Fragment::Raw(raw)) if raw.value.contains("color: blue")
+                )),
+            "component CSS is delivered by the handler closure"
+        );
     }
 
     #[test]
-    fn test_component_directive() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+    fn authored_shadow_attribute_name_is_ascii_case_insensitive_for_style_hook() {
+        let mut parser = HtmlParser::new();
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
                 "my-component",
-                "<div>My Component</div>",
-                Some("div { color: blue; }"),
+                r#"<template shadowRootMode="open"><slot></slot></template>"#,
+                None,
                 true,
             ))
-            .expect("Failed to register component");
+            .expect("register");
 
-        let result = parser.parse("test.html", "<my-component></my-component>");
-        assert!(result.is_ok(), "Parse error: {:?}", result.err());
+        parser
+            .parse("test.html", "<my-component></my-component>")
+            .expect("parse");
         let records = parser.into_fragment_records();
-
         assert_stream!(
             records,
-            "test.html",
+            "my-component",
             [
-                raw("<my-component"),
-                structural_matcher("streaming_root:my-component"),
-                raw(">"),
-                component("my-component"),
-                raw("</my-component>"),
+                raw(r#"<template shadowRootMode="open">"#),
+                structural_matcher("shadow_styles:my-component"),
+                raw("<slot></slot></template>"),
             ]
         );
-
-        // Component template stream should contain the component content (no shadow DOM wrapper)
-        let comp = &records["my-component"].fragments;
-        assert_eq!(comp.len(), 1);
-        assert!(
-            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
-                !raw.value.contains("<template shadowrootmode") && raw.value.contains("<div>My Component</div>"))
-        );
     }
 
     #[test]
@@ -4701,13 +5691,13 @@ mod tests {
         // Each distinct component host emits its own streaming_root signal,
         // including nested hosts and hosts repeated across sibling positions.
         use webui_protocol::web_ui_fragment::Fragment;
-        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        let mut parser = HtmlParser::new();
         for name in ["outer-box", "inner-pill"] {
             parser
                 .component_registry
                 .register_component(ComponentRegistration::new(
                     name,
-                    "<slot></slot>",
+                    "<div>content</div>",
                     None,
                     true,
                 ))
@@ -4756,7 +5746,7 @@ mod tests {
 
     #[test]
     fn unknown_component_typo_in_same_namespace_errors_with_suggestion() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        let mut parser = HtmlParser::new();
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
@@ -4786,7 +5776,7 @@ mod tests {
 
     #[test]
     fn external_custom_element_in_other_namespace_passes_through() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        let mut parser = HtmlParser::new();
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
@@ -4809,7 +5799,7 @@ mod tests {
 
     #[test]
     fn for_missing_each_suggests_typoed_attribute() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        let mut parser = HtmlParser::new();
         // `eahc` is a transposition of the required `each` attribute.
         let err = parser
             .parse("test.html", "<for eahc=\"todo in todos\"></for>")
@@ -4833,7 +5823,7 @@ mod tests {
         // which used to leave `current_fragment_id` pointing at the child. A
         // later error in the PARENT template must still be attributed to the
         // parent (here `index.html`), not the nested component.
-        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        let mut parser = HtmlParser::new();
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
@@ -4906,7 +5896,7 @@ mod tests {
         // child components (mp-navbar, mp-cart-panel, mp-footer) plus an <outlet>.
         // The parser must emit Fragment::Component entries for ALL child components
         // so the inventory walk finds them.
-        let mut parser = HtmlParser::with_options(DomStrategy::Shadow);
+        let mut parser = HtmlParser::new();
 
         parser
             .component_registry
@@ -4984,14 +5974,14 @@ mod tests {
     #[test]
     fn test_component_no_double_wrap_template() {
         // Developer-authored <template foo="bar"> must be preserved verbatim
-        // in --dom=light. The framework only strips runtime-only attrs;
+        // in Light DOM. The framework only strips runtime-only attrs;
         // every other attribute is the developer's responsibility.
         let mut parser = HtmlParser::with_options(DomStrategy::Light);
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-element",
-                r#"<template foo="bar"><slot></slot></template>"#,
+                r#"<template foo="bar"><div>content</div></template>"#,
                 None,
                 true,
             ))
@@ -5014,22 +6004,21 @@ mod tests {
         assert_stream!(
             records,
             "custom-element",
-            [raw(r#"<template foo="bar"><slot></slot></template>"#),]
+            [raw(r#"<template foo="bar"><div>content</div></template>"#),]
         );
     }
 
     #[test]
     fn test_component_styled_no_double_wrap() {
-        // --dom=light with a developer-supplied <template> wrapper preserves
-        // the wrapper verbatim. CSS is the default `Link` strategy which
-        // injects only in shadow DOM, so in light mode there is no CSS
-        // snippet to splice into the wrapper.
+        // Light DOM with a developer-supplied ordinary <template> wrapper
+        // preserves the wrapper verbatim. CSS is delivered by the owning
+        // closure rather than spliced into the template.
         let mut parser = HtmlParser::with_options(DomStrategy::Light);
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-element",
-                r#"<template foo="bar"><slot></slot></template>"#,
+                r#"<template foo="bar"><div>content</div></template>"#,
                 Some("div { color: red; }"),
                 true,
             ))
@@ -5041,7 +6030,7 @@ mod tests {
         assert_stream!(
             records,
             "custom-element",
-            [raw(r#"<template foo="bar"><slot></slot></template>"#),]
+            [raw(r#"<template foo="bar"><div>content</div></template>"#),]
         );
     }
 
@@ -5049,14 +6038,13 @@ mod tests {
     fn test_component_strip_runtime_attrs() {
         // Runtime-only attributes (`@event`, `:bind`, `?cond`) are stripped
         // from the opening <template> tag, but the wrapper itself is
-        // preserved. After stripping in this case the wrapper becomes
-        // `<template>` with no attributes.
-        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        // preserved. The declarative Shadow DOM attribute remains.
+        let mut parser = HtmlParser::new();
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-element",
-                r#"<template @click={foo} :bar="baz" ?bool="true"><slot></slot></template>"#,
+                r#"<template shadowrootmode="open" @click={foo} :bar="baz" ?bool="true"><div>content</div></template>"#,
                 None,
                 true,
             ))
@@ -5068,18 +6056,22 @@ mod tests {
         assert_stream!(
             records,
             "custom-element",
-            [raw("<template><slot></slot></template>"),]
+            [
+                raw(r#"<template shadowrootmode="open">"#),
+                structural_matcher("shadow_styles:custom-element"),
+                raw("<div>content</div></template>"),
+            ]
         );
     }
 
     #[test]
     fn test_component_strip_runtime_attrs_does_not_match_attr_value_text() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        let mut parser = HtmlParser::new();
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-element",
-                r#"<template data-note="@click={foo}" @click={foo}><slot></slot></template>"#,
+                r#"<template shadowrootmode="open" data-note="@click={foo}" @click={foo}><div>content</div></template>"#,
                 None,
                 true,
             ))
@@ -5091,20 +6083,22 @@ mod tests {
         assert_stream!(
             records,
             "custom-element",
-            [raw(
-                r#"<template data-note="@click={foo}"><slot></slot></template>"#
-            ),]
+            [
+                raw(r#"<template shadowrootmode="open" data-note="@click={foo}">"#),
+                structural_matcher("shadow_styles:custom-element"),
+                raw("<div>content</div></template>"),
+            ]
         );
     }
 
     #[test]
     fn test_component_strip_runtime_attrs_handles_duplicate_runtime_attrs() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        let mut parser = HtmlParser::new();
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-element",
-                r#"<template @click={foo} @click={bar}><slot></slot></template>"#,
+                r#"<template shadowrootmode="open" @click={foo} @click={bar}><div>content</div></template>"#,
                 None,
                 true,
             ))
@@ -5116,7 +6110,11 @@ mod tests {
         assert_stream!(
             records,
             "custom-element",
-            [raw("<template><slot></slot></template>"),]
+            [
+                raw(r#"<template shadowrootmode="open">"#),
+                structural_matcher("shadow_styles:custom-element"),
+                raw("<div>content</div></template>"),
+            ]
         );
     }
 
@@ -5127,7 +6125,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-element",
-                "<slot></slot>",
+                r#"<template shadowrootmode="open"><slot></slot></template>"#,
                 None,
                 true,
             ))
@@ -5187,7 +6185,7 @@ mod tests {
 
     #[test]
     fn test_component_self_closing() {
-        let mut parser = HtmlParser::new();
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
@@ -5215,12 +6213,12 @@ mod tests {
 
     #[test]
     fn test_component_nested_self_closing_in_slot() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        let mut parser = HtmlParser::new();
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-icon",
-                "<svg><slot></slot></svg>",
+                "<template shadowrootmode=\"open\"><svg><slot></slot></svg></template>",
                 None,
                 true,
             ))
@@ -5245,7 +6243,15 @@ mod tests {
             ]
         );
 
-        assert_stream!(records, "custom-icon", [raw("<svg><slot></slot></svg>"),]);
+        assert_stream!(
+            records,
+            "custom-icon",
+            [
+                raw("<template shadowrootmode=\"open\">"),
+                structural_matcher("shadow_styles:custom-icon"),
+                raw("<svg><slot></slot></svg></template>"),
+            ]
+        );
     }
 
     #[test]
@@ -5255,7 +6261,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-element",
-                "<slot></slot>",
+                r#"<template shadowrootmode="open"><slot></slot></template>"#,
                 None,
                 true,
             ))
@@ -5290,7 +6296,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-element",
-                "<slot></slot>",
+                r#"<template shadowrootmode="open"><slot></slot></template>"#,
                 None,
                 true,
             ))
@@ -5468,7 +6474,7 @@ mod tests {
 
     /// Helper to parse HTML with a pre-registered component.
     fn parse_with_component(tag: &str, html: &str) -> (Vec<WebUIFragment>, WebUIFragmentRecords) {
-        let mut parser = HtmlParser::new();
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
         parser
             .component_registry
             .register_component(ComponentRegistration::new(tag, "<div></div>", None, true))
@@ -6164,7 +7170,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-element",
-                "<slot></slot>",
+                r#"<template shadowrootmode="open"><slot></slot></template>"#,
                 None,
                 true,
             ))
@@ -6205,7 +7211,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "item-group",
-                "<slot></slot>",
+                r#"<template shadowrootmode="open"><slot></slot></template>"#,
                 None,
                 true,
             ))
@@ -6245,7 +7251,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-element",
-                "<custom-child></custom-child><slot></slot>",
+                "<custom-child></custom-child><span></span>",
                 None,
                 true,
             ))
@@ -6254,7 +7260,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "custom-button",
-                "<slot></slot>",
+                "<span></span>",
                 None,
                 true,
             ))
@@ -6307,10 +7313,10 @@ mod tests {
             matches!(ce[3].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-child")
         );
         assert!(
-            matches!(ce[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value.contains("</custom-child><slot></slot>"))
+            matches!(ce[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value.contains("</custom-child><span></span>"))
         );
 
-        assert_stream!(records, "custom-button", [raw("<slot></slot>"),]);
+        assert_stream!(records, "custom-button", [raw("<span></span>"),]);
 
         assert_stream!(records, "custom-child", [raw("<h1>Hello World!</h1>"),]);
     }
@@ -6391,7 +7397,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "route-page",
-                "<slot></slot>",
+                r#"<template shadowrootmode="open"><slot></slot></template>"#,
                 None,
                 true,
             ))
@@ -6524,13 +7530,13 @@ mod tests {
     }
 
     #[test]
-    fn test_css_strategy_external_emits_link_tag() {
+    fn test_css_strategy_external_defers_link_to_server_closure() {
         let mut parser = HtmlParser::new();
         parser
             .component_registry_mut()
             .register_component(ComponentRegistration::new(
                 "my-card",
-                "<p><slot></slot></p>",
+                r#"<template shadowrootmode="open"><p>content</p></template>"#,
                 Some("p { color: red; }"),
                 true,
             ))
@@ -6546,10 +7552,15 @@ mod tests {
             })
             .collect();
         assert!(
-            raw_text.contains(r#"<link rel="stylesheet" href="my-card.css">"#),
-            "Expected external <link> tag in: {}",
+            !raw_text.contains(r#"<link rel="stylesheet""#),
+            "component templates must not own tree-local links: {}",
             raw_text
         );
+        assert!(my_card.iter().any(|fragment| matches!(
+            fragment.fragment.as_ref(),
+            Some(Fragment::Signal(signal))
+                if signal.value == "}}}webui:shadow_styles:my-card"
+        )));
     }
 
     #[test]
@@ -6582,18 +7593,20 @@ mod tests {
     }
 
     #[test]
-    fn test_css_strategy_inline_emits_style_tag() {
+    fn test_css_strategy_inline_defers_style_to_server_closure() {
         let mut parser = HtmlParser::with_options(CssStrategy::Style);
         parser
             .component_registry_mut()
             .register_component(ComponentRegistration::new(
                 "my-card",
-                "<p><slot></slot></p>",
+                "<p>content</p>",
                 Some("p { color: red; }"),
                 true,
             ))
-            .ok();
-        parser.parse("index.html", "<my-card>Hello</my-card>").ok();
+            .expect("register component");
+        parser
+            .parse("index.html", "<my-card>Hello</my-card>")
+            .expect("parse component");
         let records = parser.into_fragment_records();
         let my_card = &records["my-card"].fragments;
         let raw_text: String = my_card
@@ -6604,8 +7617,8 @@ mod tests {
             })
             .collect();
         assert!(
-            raw_text.contains("<style>p { color: red; }</style>"),
-            "Expected inline <style> tag in: {}",
+            !raw_text.contains("<style>"),
+            "component templates must not own tree-local styles: {}",
             raw_text
         );
         assert!(
@@ -6622,12 +7635,14 @@ mod tests {
             .component_registry_mut()
             .register_component(ComponentRegistration::new(
                 "my-card",
-                "<p><slot></slot></p>",
+                "<p>content</p>",
                 Some("p { color: red; }"),
                 true,
             ))
-            .ok();
-        parser.parse("index.html", "<my-card>Hello</my-card>").ok();
+            .expect("register component");
+        parser
+            .parse("index.html", "<my-card>Hello</my-card>")
+            .expect("parse component");
         let records = parser.into_fragment_records();
 
         // Component template should have shadowrootadoptedstylesheets, no CSS
@@ -6661,6 +7676,173 @@ mod tests {
         );
     }
 
+    #[test]
+    fn light_component_css_remains_authored_and_unscoped() {
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        parser
+            .component_registry_mut()
+            .register_component(ComponentRegistration::new(
+                "my-card",
+                "<p class=\"label\">content</p>",
+                Some(".label{color:red}"),
+                false,
+            ))
+            .expect("register component");
+        parser
+            .parse("index.html", "<my-card></my-card>")
+            .expect("parse component");
+
+        let css = parser
+            .component_registry()
+            .get("my-card")
+            .and_then(|component| component.css_content.as_deref())
+            .expect("authored CSS");
+        assert_eq!(css, ".label{color:red}");
+    }
+
+    #[test]
+    fn light_component_inline_styles_remain_unscoped_and_unmarked() {
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        let built = parser
+            .build_component_templates(
+                "my-card",
+                "<style>.label{color:red}</style><p class=\"label\">content</p>",
+                None,
+                false,
+            )
+            .expect("build Light component");
+
+        assert_eq!(
+            built.ssr,
+            "<style>.label{color:red}</style><p class=\"label\">content</p>"
+        );
+        assert!(!built.ssr.contains("data-wl"));
+    }
+
+    #[test]
+    fn light_component_rejects_shadow_only_selectors() {
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        for selector in [":host", ":host-context(body.dark)", "::slotted(*)"] {
+            let result = parser.build_component_templates(
+                "my-card",
+                &format!("<style>{selector}{{color:red}}</style><p>content</p>"),
+                None,
+                false,
+            );
+            let error = match result {
+                Ok(_) => panic!("Shadow-only selector must fail in Light DOM"),
+                Err(error) => error,
+            };
+            assert!(matches!(
+                error,
+                ParserError::Template(ref diagnostic)
+                    if diagnostic.error_code() == Some(codes::UNSUPPORTED_LIGHT_CSS)
+            ));
+        }
+    }
+
+    #[test]
+    fn light_component_external_css_rejects_host_selector() {
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        parser
+            .component_registry_mut()
+            .register_component(ComponentRegistration::new(
+                "my-card",
+                "<p>content</p>",
+                Some(":host{display:block}"),
+                false,
+            ))
+            .expect("register component");
+        let error = parser
+            .parse("index.html", "<my-card></my-card>")
+            .expect_err("external :host must fail in Light DOM");
+        assert!(matches!(
+            error,
+            ParserError::Template(ref diagnostic)
+                if diagnostic.error_code() == Some(codes::UNSUPPORTED_LIGHT_CSS)
+        ));
+    }
+
+    #[test]
+    fn shadow_component_inline_styles_remain_tree_local_and_unchanged() {
+        let mut parser = HtmlParser::with_options(DomStrategy::Shadow);
+        let built = parser
+            .build_component_templates(
+                "my-card",
+                "<style>:host{display:block}.label{color:red}</style><p class=\"label\">content</p>",
+                None,
+                false,
+            )
+            .expect("build Shadow component");
+
+        assert!(built.ssr.contains(
+            "<template shadowrootmode=\"open\"><style>:host{display:block}.label{color:red}</style>"
+        ));
+        assert!(!built.ssr.contains("data-wl"));
+    }
+
+    #[test]
+    fn nested_light_hosts_are_unmarked() {
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        parser
+            .component_registry_mut()
+            .register_component(ComponentRegistration::new(
+                "my-child",
+                "<p class=\"inner\">child</p>",
+                Some(".inner{color:green}"),
+                false,
+            ))
+            .expect("register child");
+        parser
+            .component_registry_mut()
+            .register_component(ComponentRegistration::new(
+                "my-card",
+                "<my-child></my-child>",
+                Some("my-child{display:block}"),
+                false,
+            ))
+            .expect("register parent");
+        parser
+            .parse("index.html", "<my-card></my-card>")
+            .expect("parse component");
+
+        let records = parser.into_fragment_records();
+        let raw: String = records["my-card"]
+            .fragments
+            .iter()
+            .filter_map(|fragment| match &fragment.fragment {
+                Some(web_ui_fragment::Fragment::Raw(raw)) => Some(raw.value.as_str()),
+                _ => None,
+            })
+            .collect();
+        assert!(raw.contains("<my-child>"), "nested host was changed: {raw}");
+        assert!(!raw.contains("data-wl"), "Light markers remain: {raw}");
+    }
+
+    #[test]
+    fn raw_html_binding_does_not_change_global_css() {
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        parser
+            .component_registry_mut()
+            .register_component(ComponentRegistration::new(
+                "my-card",
+                "<div class=\"body\">{{{descriptionHtml}}}</div>",
+                Some(".body p{margin:0}"),
+                false,
+            ))
+            .expect("register component");
+        parser
+            .parse("index.html", "<my-card></my-card>")
+            .expect("parse component");
+
+        let css = parser
+            .component_registry()
+            .get("my-card")
+            .and_then(|component| component.css_content.as_deref())
+            .expect("authored CSS");
+        assert_eq!(css, ".body p{margin:0}");
+    }
+
     #[test]
     fn test_css_strategy_module_no_css_no_adopted_attr() {
         let mut parser = HtmlParser::with_options(CssStrategy::Module);
@@ -6668,7 +7850,7 @@ mod tests {
             .component_registry_mut()
             .register_component(ComponentRegistration::new(
                 "my-card",
-                "<p><slot></slot></p>",
+                r#"<template shadowrootmode="open"><p><slot></slot></p></template>"#,
                 None,
                 true,
             ))
@@ -6692,17 +7874,11 @@ mod tests {
 
     // ── Dev-authored <template> wrapper handling ────────────────────
     //
-    // These tests verify that when a developer includes a `<template>`
-    // wrapper in their component HTML, the framework respects it instead
-    // of stripping/normalizing it:
+    // These tests distinguish an ordinary `<template>` element from a
+    // declarative Shadow DOM root:
     //
-    //   --dom=light  : dev `<template ...>` preserved verbatim (including
-    //                  signal-fragment attrs like `foo="{{foo}}"`); no
-    //                  wrapper added when dev omits one.
-    //   --dom=shadow : dev `<template ...>` preserved verbatim (framework
-    //                  does NOT inject `shadowrootmode="open"` or overwrite
-    //                  a dev-supplied `shadowrootmode="closed"`); wrapper
-    //                  added only when dev omits one.
+    // An ordinary `<template ...>` is Light DOM content and is preserved
+    // verbatim. Only a sole open declarative Shadow root selects Shadow DOM.
     //
     // Calls `process_component_template` directly so the assertions observe
     // the exact HTML string the framework emits for the component template
@@ -6720,11 +7896,11 @@ mod tests {
             .expect("process failed");
         assert!(
             processed.contains(r#"<template foo="bar">"#),
-            "[--dom=light] expected dev <template foo=\"bar\"> preserved verbatim, got: {processed}"
+            "expected dev <template foo=\"bar\"> preserved verbatim, got: {processed}"
         );
         assert!(
             processed.contains("</template>"),
-            "[--dom=light] expected closing </template> preserved, got: {processed}"
+            "expected closing </template> preserved, got: {processed}"
         );
     }
 
@@ -6740,7 +7916,7 @@ mod tests {
             .expect("process failed");
         assert!(
             processed.contains(r#"<template foo="{{foo}}">"#),
-            "[--dom=light] expected dev <template foo=\"{{{{foo}}}}\"> with signal preserved, got: {processed}"
+            "expected dev <template foo=\"{{{{foo}}}}\"> with signal preserved, got: {processed}"
         );
     }
 
@@ -6758,7 +7934,7 @@ mod tests {
                 && processed.contains(r#"tabindex="0""#)
                 && processed.contains(r#"role="region""#)
                 && processed.contains(r#"data-x="y""#),
-            "[--dom=light] expected ALL dev template attrs preserved, got: {processed}"
+            "expected all dev template attrs preserved, got: {processed}"
         );
     }
 
@@ -6770,17 +7946,17 @@ mod tests {
             .expect("process failed");
         assert!(
             !processed.contains("<template"),
-            "[--dom=light] framework must NOT add <template> wrapper when dev omits one, got: {processed}"
+            "framework must not add a <template> wrapper when dev omits one, got: {processed}"
         );
         assert!(
             processed.contains("<div>hi</div>"),
-            "[--dom=light] expected inner content emitted as-is, got: {processed}"
+            "expected inner content emitted as-is, got: {processed}"
         );
     }
 
     #[test]
-    fn shadow_preserves_dev_template_with_static_attrs() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Shadow);
+    fn ordinary_template_remains_light_dom_content() {
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
         let processed = parser
             .process_component_template(
                 r#"<template foo="bar"><div>hi</div></template>"#,
@@ -6790,37 +7966,67 @@ mod tests {
             .expect("process failed");
         assert!(
             processed.contains(r#"<template foo="bar">"#),
-            "[--dom=shadow] dev <template foo=\"bar\"> must be preserved verbatim, got: {processed}"
+            "ordinary template content must be preserved, got: {processed}"
         );
         assert!(
-            !processed.contains(r#"shadowrootmode="open""#),
-            "[--dom=shadow] framework must NOT inject shadowrootmode when dev already supplied a <template>, got: {processed}"
+            !processed.contains("shadowrootmode"),
+            "ordinary template must not gain a generated Shadow root, got: {processed}"
         );
     }
 
     #[test]
-    fn shadow_preserves_dev_template_with_shadowrootmode_closed() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Shadow);
-        let processed = parser
+    fn bare_template_is_unwrapped_as_explicit_light_dom() {
+        let mut parser = HtmlParser::new();
+        let built = parser
+            .build_component_templates(
+                "my-card",
+                "<template><div class=\"label\">hi</div></template>",
+                Some(".label{color:red}"),
+                false,
+            )
+            .expect("bare template should select Light DOM");
+        assert!(!built.uses_shadow_dom);
+        assert_eq!(built.ssr, r#"<div class="label">hi</div>"#);
+    }
+
+    #[test]
+    fn attributed_template_keeps_the_shadow_fallback() {
+        let mut parser = HtmlParser::new();
+        let built = parser
+            .build_component_templates(
+                "my-card",
+                r#"<template data-purpose="content"><div>hi</div></template>"#,
+                None,
+                false,
+            )
+            .expect("attributed template should remain ordinary content");
+        assert!(built.uses_shadow_dom);
+        assert_eq!(
+            built.ssr,
+            r#"<template shadowrootmode="open"><template data-purpose="content"><div>hi</div></template></template>"#
+        );
+    }
+
+    #[test]
+    fn closed_shadow_wrapper_is_rejected_during_template_processing() {
+        let mut parser = HtmlParser::new();
+        let error = parser
             .process_component_template(
                 r#"<template shadowrootmode="closed"><div>hi</div></template>"#,
                 None,
                 None,
             )
-            .expect("process failed");
-        assert!(
-            processed.contains(r#"shadowrootmode="closed""#),
-            "[--dom=shadow] framework must respect dev's shadowrootmode=\"closed\" (developer is managing), got: {processed}"
-        );
-        assert!(
-            !processed.contains(r#"shadowrootmode="open""#),
-            "[--dom=shadow] framework must not overwrite dev's shadowrootmode with \"open\", got: {processed}"
-        );
+            .expect_err("closed roots must fail");
+        assert!(matches!(
+            error,
+            ParserError::Template(ref diagnostic)
+                if diagnostic.error_code() == Some(codes::INVALID_SHADOW_ROOT_MODE)
+        ));
     }
 
     #[test]
-    fn shadow_preserves_dev_template_with_signal_fragment_attrs() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Shadow);
+    fn ordinary_template_preserves_signal_fragment_attrs() {
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
         let processed = parser
             .process_component_template(
                 r#"<template foo="{{foo}}"><div>hi</div></template>"#,
@@ -6829,28 +8035,36 @@ mod tests {
             )
             .expect("process failed");
         assert!(
-            processed.contains(r#"<template foo="{{foo}}">"#),
-            "[--dom=shadow] dev <template> with signal-fragment attr must be preserved, got: {processed}"
+            processed.starts_with(r#"<template foo="{{foo}}">"#),
+            "ordinary template must remain Light content, got: {processed}"
         );
     }
 
     #[test]
-    fn shadow_adds_template_wrapper_when_dev_omits_it() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Shadow);
+    fn unwrapped_component_never_gains_shadow_wrapper() {
+        let mut parser = HtmlParser::with_options(DomStrategy::Light);
         let processed = parser
             .process_component_template("<div>hi</div>", None, None)
             .expect("process failed");
         assert!(
-            processed.contains(r#"<template shadowrootmode="open""#),
-            "[--dom=shadow] framework MUST add <template shadowrootmode=\"open\"> when dev omits a wrapper, got: {processed}"
+            !processed.contains("shadowrootmode"),
+            "framework must not generate a Shadow root, got: {processed}"
         );
         assert!(
             processed.contains("<div>hi</div>"),
-            "[--dom=shadow] inner content must survive wrapping, got: {processed}"
+            "Light content must survive processing, got: {processed}"
         );
-        assert!(
-            processed.contains("</template>"),
-            "[--dom=shadow] framework-added wrapper must be closed, got: {processed}"
+    }
+
+    #[test]
+    fn default_unwrapped_component_gains_open_shadow_wrapper() {
+        let mut parser = HtmlParser::new();
+        let processed = parser
+            .process_component_template("<div>hi</div>", None, None)
+            .expect("process failed");
+        assert_eq!(
+            processed,
+            r#"<template shadowrootmode="open"><div>hi</div></template>"#
         );
     }
 
@@ -6864,18 +8078,12 @@ mod tests {
                 ),
                 "<template shadowrootmode=\"open\">\n  <h1>Hello</h1>\n</template>",
             ),
-            (
-                format!("{COMMENT}\n<h1>Hello</h1>"),
-                "<template shadowrootmode=\"open\"><h1>Hello</h1></template>",
-            ),
-            (
-                format!("{COMMENT}\nHello"),
-                "<template shadowrootmode=\"open\">Hello</template>",
-            ),
+            (format!("{COMMENT}\n<h1>Hello</h1>"), "<h1>Hello</h1>"),
+            (format!("{COMMENT}\nHello"), "Hello"),
         ];
 
         for (input, expected) in fixtures {
-            let mut parser = HtmlParser::with_options(DomStrategy::Shadow);
+            let mut parser = HtmlParser::with_options(DomStrategy::Light);
             let processed = parser
                 .process_component_template(&input, None, None)
                 .expect("leading-comment fixture should process");
@@ -6884,25 +8092,41 @@ mod tests {
     }
 
     #[test]
-    fn component_policy_wrapper_uses_selected_dom_strategy_and_is_build_only() {
+    fn component_policy_wrapper_is_build_only_and_unwrapped_for_light() {
+        // A policy wrapper is authored on a plain `<template>`; the policy is
+        // applied to the host through generated CSS, so the wrapper must not
+        // survive into a Light template.
         let html = r#"<template w-hydrate="lazy"><div>hi</div></template>"#;
+        let mut light = HtmlParser::with_options(DomStrategy::Light);
+        let light_built = light
+            .build_component_templates("my-comp", html, None, true)
+            .expect("light policy wrapper should compile");
+        assert_eq!(light_built.ssr, "<div>hi</div>");
+        assert_eq!(light_built.artifact(), "<div>hi</div>");
 
-        let mut shadow = HtmlParser::with_options(DomStrategy::Shadow);
-        let shadow_built = shadow
+        let mut implicit_shadow = HtmlParser::new();
+        let shadow_built = implicit_shadow
             .build_component_templates("my-comp", html, None, true)
-            .expect("shadow policy wrapper should compile");
+            .expect("default policy wrapper should compile as Shadow");
         assert_eq!(
             shadow_built.ssr,
             r#"<template shadowrootmode="open"><div>hi</div></template>"#
         );
         assert!(!shadow_built.artifact().contains("w-hydrate"));
 
-        let mut light = HtmlParser::with_options(DomStrategy::Light);
-        let light_built = light
-            .build_component_templates("my-comp", html, None, true)
-            .expect("light policy wrapper should compile");
-        assert_eq!(light_built.ssr, "<div>hi</div>");
-        assert_eq!(light_built.artifact(), "<div>hi</div>");
+        // An authored Shadow component keeps its wrapper; only the
+        // compiler-owned policy attributes are stripped.
+        let shadow_html =
+            r#"<template shadowrootmode="open" w-hydrate="lazy"><div>hi</div></template>"#;
+        let mut shadow = HtmlParser::new();
+        let authored_shadow_built = shadow
+            .build_component_templates("my-comp", shadow_html, None, true)
+            .expect("shadow policy wrapper should compile");
+        assert_eq!(
+            authored_shadow_built.ssr,
+            r#"<template shadowrootmode="open"><div>hi</div></template>"#
+        );
+        assert!(!authored_shadow_built.artifact().contains("w-hydrate"));
     }
 
     // ── CSS-module adoption on dev-authored <template> wrappers ────────
@@ -6916,7 +8140,7 @@ mod tests {
 
     #[test]
     fn dev_template_module_strategy_appends_adopted_attr_when_missing() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Shadow);
+        let mut parser = HtmlParser::new();
         let processed = parser
             .process_component_template(
                 r#"<template shadowrootmode="open"><div>hi</div></template>"#,
@@ -6936,7 +8160,7 @@ mod tests {
 
     #[test]
     fn dev_template_module_strategy_ok_when_dev_supplies_adopted_attr() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Shadow);
+        let mut parser = HtmlParser::new();
         let processed = parser
             .process_component_template(
                 r#"<template shadowrootmode="open" shadowrootadoptedstylesheets="my-comp"><div>hi</div></template>"#,
@@ -6957,44 +8181,22 @@ mod tests {
 
     #[test]
     fn dev_template_module_strategy_appends_adopted_attr_and_preserves_root_attrs() {
-        for dom_strategy in [DomStrategy::Shadow, DomStrategy::Light] {
-            let mut parser = HtmlParser::with_options((CssStrategy::Module, dom_strategy));
-            let built = match parser.build_component_templates(
+        let mut parser = HtmlParser::with_options(CssStrategy::Module);
+        let built = parser
+            .build_component_templates(
                 "my-comp",
                 r#"<template shadowrootmode="open" @click="{onClick()}">Hello</template>"#,
                 Some(":host { color: red; }"),
                 true,
-            ) {
-                Ok(built) => built,
-                Err(err) => panic!(
-                    "dev-authored <template> should be accepted under {dom_strategy:?} with module CSS, got: {err}"
-                ),
-            };
-            let artifact = built.artifact();
+            )
+            .expect("authored Shadow template should support module CSS");
+        let artifact = built.artifact();
 
-            assert!(
-                artifact.contains(r#"shadowrootmode="open""#),
-                "dev-authored shadowrootmode must be preserved under {dom_strategy:?}, got: {artifact}"
-            );
-            assert!(
-                artifact.contains(r#"@click="{onClick()}""#),
-                "dev-authored root event must be preserved under {dom_strategy:?}, got: {artifact}"
-            );
-            assert!(
-                artifact.contains(r#"shadowrootadoptedstylesheets="my-comp""#),
-                "module CSS should append adopted stylesheets under {dom_strategy:?}, got: {artifact}"
-            );
-            assert_eq!(
-                artifact.matches("shadowrootadoptedstylesheets").count(),
-                1,
-                "module CSS should append adopted stylesheets once under {dom_strategy:?}, got: {artifact}"
-            );
-            assert!(
-                !built.ssr.contains("@click"),
-                "SSR template must still strip runtime attrs, got: {}",
-                built.ssr
-            );
-        }
+        assert!(artifact.contains(r#"shadowrootmode="open""#));
+        assert!(artifact.contains(r#"@click="{onClick()}""#));
+        assert!(artifact.contains(r#"shadowrootadoptedstylesheets="my-comp""#));
+        assert_eq!(artifact.matches("shadowrootadoptedstylesheets").count(), 1);
+        assert!(!built.ssr.contains("@click"));
     }
 
     #[test]
@@ -7003,7 +8205,7 @@ mod tests {
         // alongside their own component's module. Honored verbatim — the
         // framework's only job is to validate that *some*
         // `shadowrootadoptedstylesheets` is present.
-        let mut parser = HtmlParser::with_options(DomStrategy::Shadow);
+        let mut parser = HtmlParser::new();
         let processed = parser
             .process_component_template(
                 r#"<template shadowrootmode="open" shadowrootadoptedstylesheets="my-comp other-sheet"><div>hi</div></template>"#,
@@ -7022,7 +8224,7 @@ mod tests {
         // CssStrategy::Link or CssStrategy::Style pass `adopted_specifier=None`.
         // Dev's <template> must be preserved verbatim and the validation
         // must not fire.
-        let mut parser = HtmlParser::with_options(DomStrategy::Shadow);
+        let mut parser = HtmlParser::new();
         let processed = parser
             .process_component_template(
                 r#"<template shadowrootmode="open"><div>hi</div></template>"#,
@@ -7884,12 +9086,12 @@ mod tests {
 
     #[test]
     fn boundary_inside_component_host_content_errors() {
-        let mut parser = HtmlParser::with_options(DomStrategy::Light);
+        let mut parser = HtmlParser::new();
         parser
             .component_registry
             .register_component(ComponentRegistration::new(
                 "my-widget",
-                "<slot></slot>",
+                "<div>content</div>",
                 None,
                 true,
             ))
@@ -8359,6 +9561,7 @@ mod tests {
             _tag_name: &str,
             _component: &Component,
             _processed_template: &str,
+            _context: crate::plugin::ComponentTemplateContext,
         ) -> Result<()> {
             Ok(())
         }
@@ -8383,11 +9586,15 @@ mod tests {
 
     struct TemplateCapturePlugin {
         template: Option<String>,
+        uses_shadow_dom: bool,
     }
 
     impl TemplateCapturePlugin {
         fn new() -> Self {
-            Self { template: None }
+            Self {
+                template: None,
+                uses_shadow_dom: false,
+            }
         }
     }
 
@@ -8397,8 +9604,10 @@ mod tests {
             _tag_name: &str,
             _component: &Component,
             processed_template: &str,
+            context: crate::plugin::ComponentTemplateContext,
         ) -> Result<()> {
             self.template = Some(processed_template.to_string());
+            self.uses_shadow_dom = context.uses_shadow_dom;
             Ok(())
         }
 
@@ -8420,6 +9629,7 @@ mod tests {
                     crate::plugin::ComponentTemplateArtifact::template(
                         "todo-app".to_string(),
                         template,
+                        self.uses_shadow_dom,
                     ),
                 ])),
                 None => Ok(ParserPluginArtifacts::None),
@@ -8481,7 +9691,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "my-btn",
-                "<button><slot></slot></button>",
+                r#"<template shadowrootmode="open"><button><slot></slot></button></template>"#,
                 None,
                 true,
             ))
@@ -8513,7 +9723,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "my-btn",
-                "<button><slot></slot></button>",
+                r#"<template shadowrootmode="open"><button><slot></slot></button></template>"#,
                 None,
                 true,
             ))
@@ -8552,7 +9762,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "my-btn",
-                "<button><slot></slot></button>",
+                r#"<template shadowrootmode="open"><button><slot></slot></button></template>"#,
                 None,
                 true,
             ))
@@ -8594,7 +9804,7 @@ mod tests {
             .component_registry
             .register_component(ComponentRegistration::new(
                 "my-btn",
-                "<button><slot></slot></button>",
+                r#"<template shadowrootmode="open"><button><slot></slot></button></template>"#,
                 None,
                 true,
             ))
@@ -9041,7 +10251,10 @@ mod tests {
         assert_eq!(diag.error_code(), Some(codes::MISSING_THEME_TOKEN));
         // File + line:column, like other authoring diagnostics.
         let location = diag.location().expect("a source location");
-        assert!(location.contains("my-card.css:2:"), "location: {location}");
+        assert!(
+            location.contains("my-card.css:2:14"),
+            "location: {location}"
+        );
         // Snippet shows the offending CSS line.
         assert!(
             diag.snippet_text()
diff --git a/crates/webui-parser/src/plugin/fast_v2.rs b/crates/webui-parser/src/plugin/fast_v2.rs
index 4e36ef1bb..314627d6c 100644
--- a/crates/webui-parser/src/plugin/fast_v2.rs
+++ b/crates/webui-parser/src/plugin/fast_v2.rs
@@ -7,9 +7,18 @@
 //! artifacts after parsing. Converts WebUI Framework template syntax (`<if>`, `<for>`, `{{}}`)
 //! into FAST-compatible syntax (`<f-when>`, `<f-repeat>`, `{}`).
 
-use super::{AttributeAction, ComponentTemplateArtifact, ParserPlugin, ParserPluginArtifacts};
+use super::fast_v3::{
+    build_f_template, f_template_style_injection, require_fast_shadow_dom, strip_shadowrootmode,
+    style_injection_snippet,
+};
+use super::{
+    AttributeAction, ComponentTemplateArtifact, ComponentTemplateContext, ParserPlugin,
+    ParserPluginArtifacts,
+};
 use crate::component_registry::Component;
-use crate::html_parser::{find_element_end, find_tag_close, leading_content, opening_tag_name};
+use crate::html_parser::{
+    find_element_end, find_tag_close, opening_tag_name, starts_with_html_tag_name,
+};
 use crate::{CssLinkOptions, CssStrategy, Result};
 use webui_protocol::FastElementData;
 
@@ -17,6 +26,13 @@ use webui_protocol::FastElementData;
 struct TrackedComponent {
     tag_name: String,
     template_html: String,
+    uses_shadow_dom: bool,
+    /// Prebuilt style snippet kept inside this component's shadow root.
+    ///
+    /// FAST's client runtime builds roots from `<f-template>` rather than from
+    /// WebUI's style registry, so a Shadow component's CSS has to travel with
+    /// the template that creates the root.
+    style_injection: Option<String>,
 }
 
 /// Deprecated FAST 2 parser plugin used by `fast` and `fast-v2`.
@@ -50,11 +66,56 @@ impl FastV2ParserPlugin {
         self.components
             .iter()
             .map(|comp| {
-                let tmpl = generate_f_template_from_processed(&comp.tag_name, &comp.template_html);
-                ComponentTemplateArtifact::template(comp.tag_name.clone(), tmpl)
+                let tmpl = build_f_template(
+                    &comp.tag_name,
+                    &convert_btr_to_fast(&comp.template_html),
+                    comp.style_injection.as_deref(),
+                    None,
+                );
+                ComponentTemplateArtifact::template(
+                    comp.tag_name.clone(),
+                    tmpl,
+                    comp.uses_shadow_dom,
+                )
             })
             .collect()
     }
+
+    fn track_component(
+        &mut self,
+        tag_name: &str,
+        processed_template: &str,
+        context: ComponentTemplateContext<'_>,
+    ) {
+        if self.components.iter().any(|c| c.tag_name == tag_name) {
+            return;
+        }
+        self.components.push(TrackedComponent {
+            tag_name: tag_name.to_string(),
+            template_html: processed_template.to_string(),
+            uses_shadow_dom: context.uses_shadow_dom,
+            style_injection: context.style.and_then(style_injection_snippet),
+        });
+    }
+
+    #[cfg(test)]
+    fn register_component_template(
+        &mut self,
+        tag_name: &str,
+        component: &Component,
+        processed_template: &str,
+    ) -> Result<()> {
+        <Self as ParserPlugin>::register_component_template(
+            self,
+            tag_name,
+            component,
+            processed_template,
+            ComponentTemplateContext {
+                uses_shadow_dom: true,
+                style: None,
+            },
+        )
+    }
 }
 
 impl Default for FastV2ParserPlugin {
@@ -69,16 +130,10 @@ impl ParserPlugin for FastV2ParserPlugin {
         tag_name: &str,
         component: &Component,
         processed_template: &str,
+        context: ComponentTemplateContext<'_>,
     ) -> Result<()> {
-        // Only track each component once (avoids duplicate <f-template> blocks
-        // when a component is used in multiple parent templates)
-        if self.components.iter().any(|c| c.tag_name == tag_name) {
-            return Ok(());
-        }
-        self.components.push(TrackedComponent {
-            tag_name: tag_name.to_string(),
-            template_html: processed_template.to_string(),
-        });
+        require_fast_shadow_dom(tag_name, context)?;
+        self.track_component(tag_name, processed_template, context);
         let _ = component;
         Ok(())
     }
@@ -139,28 +194,6 @@ pub fn generate_f_template(
     )
 }
 
-fn generate_f_template_from_processed(tag_name: &str, processed_template: &str) -> String {
-    let mut output = String::with_capacity(256);
-    output.push_str("<f-template name=\"");
-    output.push_str(tag_name);
-    output.push_str("\">\n");
-
-    let converted = convert_btr_to_fast(processed_template);
-    let trimmed = minify_inter_tag_whitespace(converted.trim());
-    let (trimmed, _) = leading_content(&trimmed);
-
-    if trimmed.starts_with("<template") {
-        output.push_str(trimmed);
-    } else {
-        output.push_str("<template>");
-        output.push_str(trimmed);
-        output.push_str("</template>");
-    }
-
-    output.push_str("\n</f-template>\n");
-    output
-}
-
 /// Generate a FAST 2 f-template with Link CSS filename/href options.
 pub fn generate_f_template_with_css_options(
     tag_name: &str,
@@ -169,67 +202,15 @@ pub fn generate_f_template_with_css_options(
     css_strategy: CssStrategy,
     css_link_options: &CssLinkOptions,
 ) -> String {
-    let mut output = String::with_capacity(256);
-    output.push_str("<f-template name=\"");
-    output.push_str(tag_name);
-    output.push_str("\">\n");
-
-    let converted = convert_btr_to_fast(html_content);
-    let trimmed = minify_inter_tag_whitespace(converted.trim());
-    let (trimmed, _) = leading_content(&trimmed);
-
-    // Build the CSS injection string based on the configured strategy
-    let css_injection = match css_strategy {
-        CssStrategy::Link => css_content.map(|css| {
-            let href = css_link_options.resolve(tag_name, css);
-            let mut s = String::with_capacity(40 + href.href.len());
-            s.push_str("<link rel=\"stylesheet\" href=\"");
-            s.push_str(&href.href);
-            s.push_str("\">");
-            s
-        }),
-        CssStrategy::Style => css_content.map(|css| {
-            let mut s = String::with_capacity(15 + css.len());
-            s.push_str("<style>");
-            s.push_str(css.trim());
-            s.push_str("</style>");
-            s
-        }),
-        CssStrategy::Module => None,
-    };
-
-    if trimmed.starts_with("<template") {
-        if let Some(close_pos) = find_tag_close(trimmed) {
-            // Dev owns the wrapper — preserve attributes verbatim.
-            // For `CssStrategy::Module` the parser pass enforces
-            // `shadowrootadoptedstylesheets`, so by the time we get here
-            // either the dev wrote it or the build already failed.
-            output.push_str(&trimmed[..close_pos]);
-            output.push('>');
-            if let Some(ref injection) = css_injection {
-                output.push_str(injection);
-            }
-            output.push_str(&trimmed[close_pos + 1..]);
-        } else {
-            output.push_str(trimmed);
-        }
-    } else {
-        output.push_str("<template");
-        if css_strategy == CssStrategy::Module && css_content.is_some() {
-            output.push_str(" shadowrootadoptedstylesheets=\"");
-            output.push_str(tag_name);
-            output.push('"');
-        }
-        output.push('>');
-        if let Some(ref injection) = css_injection {
-            output.push_str(injection);
-        }
-        output.push_str(trimmed);
-        output.push_str("</template>");
-    }
+    let (css_injection, module_specifier) =
+        f_template_style_injection(tag_name, css_content, css_strategy, css_link_options);
 
-    output.push_str("\n</f-template>\n");
-    output
+    build_f_template(
+        tag_name,
+        &convert_btr_to_fast(html_content),
+        css_injection.as_deref(),
+        module_specifier,
+    )
 }
 
 /// Convert WebUI Framework template syntax to FAST syntax in HTML content.
@@ -317,7 +298,7 @@ fn try_convert_tag(input: &str, pos: usize, result: &mut String) -> Option<usize
     // Check for tags with :attr="{{expr}}" complex attribute values
     if remaining.starts_with("<") {
         // Strip shadowrootmode from <template> tags
-        if starts_with_tag_name(remaining, "template") {
+        if starts_with_html_tag_name(remaining, "template") {
             if let Some(consumed) = strip_shadowrootmode(remaining, result) {
                 return Some(consumed);
             }
@@ -556,114 +537,6 @@ fn is_whitespace(b: u8) -> bool {
     b == b' ' || b == b'\t' || b == b'\n' || b == b'\r'
 }
 
-/// Collapse whitespace-only text between `>` and `<` to eliminate extra DOM
-/// text nodes that would shift element indices during hydration.
-/// This ensures the f-template DOM structure matches the minified DSD output.
-fn minify_inter_tag_whitespace(input: &str) -> String {
-    let mut result = String::with_capacity(input.len());
-    let bytes = input.as_bytes();
-    let len = bytes.len();
-    let mut i = 0;
-
-    while i < len {
-        if bytes[i] == b'>' && i + 1 < len {
-            result.push('>');
-            i += 1;
-            // Skip whitespace-only content between > and <
-            let ws_start = i;
-            while i < len && is_whitespace(bytes[i]) {
-                i += 1;
-            }
-            // If we hit '<', the whitespace was inter-tag — drop it
-            // If we hit non-'<', it's meaningful text — keep it
-            if i >= len || bytes[i] != b'<' {
-                // Keep the whitespace (it's before text content)
-                result.push_str(&input[ws_start..i]);
-            }
-        } else {
-            i = push_char_at(input, i, &mut result);
-        }
-    }
-
-    result
-}
-
-/// Strip `shadowrootmode` attribute from a `<template ...>` opening tag.
-/// Returns `Some(bytes_consumed)` if a `<template` tag was found and processed.
-fn strip_shadowrootmode(tag_str: &str, result: &mut String) -> Option<usize> {
-    // Find the closing '>' outside of quoted attribute values
-    let close = find_tag_close(tag_str)?;
-    let tag_content = &tag_str[..=close];
-
-    // Only process if this tag contains shadowrootmode
-    if !tag_content.contains("shadowrootmode") {
-        return None;
-    }
-
-    // Rebuild the tag without the shadowrootmode attribute
-    result.push_str("<template");
-    let attr_start = "<template".len();
-    let inner = &tag_content[attr_start..close];
-
-    // Scan through the attributes, skipping shadowrootmode
-    let inner_bytes = inner.as_bytes();
-    let inner_len = inner_bytes.len();
-    let mut j = 0;
-    while j < inner_len {
-        // Skip whitespace
-        if is_whitespace(inner_bytes[j]) {
-            j += 1;
-            continue;
-        }
-
-        // Find the end of this attribute (name="value" or just name)
-        let attr_begin = j;
-        // Find '=' or whitespace or end
-        while j < inner_len && inner_bytes[j] != b'=' && !is_whitespace(inner_bytes[j]) {
-            j += 1;
-        }
-        let attr_name = &inner[attr_begin..j];
-
-        // If there's a '=', consume the value
-        let mut attr_end = j;
-        if j < inner_len && inner_bytes[j] == b'=' {
-            j += 1; // skip '='
-            if j < inner_len && inner_bytes[j] == b'"' {
-                j += 1; // skip opening quote
-                while j < inner_len && inner_bytes[j] != b'"' {
-                    j += 1;
-                }
-                if j < inner_len {
-                    j += 1; // skip closing quote
-                }
-            } else {
-                // Unquoted value
-                while j < inner_len && !is_whitespace(inner_bytes[j]) {
-                    j += 1;
-                }
-            }
-            attr_end = j;
-        }
-
-        // Skip the shadowrootmode attribute entirely
-        if attr_name == "shadowrootmode" {
-            continue;
-        }
-
-        // Keep this attribute
-        result.push(' ');
-        result.push_str(&inner[attr_begin..attr_end]);
-    }
-
-    if tag_content.ends_with("/>") {
-        result.push_str("/>");
-    } else {
-        result.push('>');
-    }
-
-    Some(close + 1)
-}
-
 #[cfg(test)]
 mod tests {
     #![allow(clippy::disallowed_methods)]
@@ -1157,6 +1030,35 @@ mod tests {
         assert_eq!(output, "<template><div>Hello</div></template>");
     }
 
+    #[test]
+    fn strips_uppercase_native_shadow_wrapper() {
+        let input = r#"<TEMPLATE SHADOWROOTMODE="open"><div>Hello</div></TEMPLATE>"#;
+        let output = convert_btr_to_fast(input);
+        assert_eq!(output, "<TEMPLATE><div>Hello</div></TEMPLATE>");
+    }
+
+    #[test]
+    fn rejects_effective_light_dom() {
+        let mut plugin = FastV2ParserPlugin::new();
+        let component = make_component("my-card", "<p>content</p>", None);
+        let error = <FastV2ParserPlugin as ParserPlugin>::register_component_template(
+            &mut plugin,
+            "my-card",
+            &component,
+            component.html_content.as_str(),
+            ComponentTemplateContext {
+                uses_shadow_dom: false,
+                style: None,
+            },
+        )
+        .expect_err("FAST cannot mount Light DOM faithfully");
+        assert!(matches!(
+            error,
+            crate::ParserError::Template(ref diagnostic)
+                if diagnostic.error_code() == Some(crate::diagnostic::codes::FAST_LIGHT_DOM_UNSUPPORTED)
+        ));
+    }
+
     #[test]
     fn strip_shadowrootmode_preserves_other_attrs() {
         let input =
@@ -1387,20 +1289,6 @@ mod tests {
         assert_eq!(output, r#"<f-when value="{{x}}"><span>✓</span></f-when>"#);
     }
 
-    #[test]
-    fn minify_preserves_utf8_text_content() {
-        let input = "<span>✓</span><span>✗</span>";
-        let output = minify_inter_tag_whitespace(input);
-        assert_eq!(output, "<span>✓</span><span>✗</span>");
-    }
-
-    #[test]
-    fn minify_preserves_utf8_between_elements() {
-        let input = "<div> ✓ </div>";
-        let output = minify_inter_tag_whitespace(input);
-        assert_eq!(output, "<div> ✓ </div>");
-    }
-
     #[test]
     fn convert_complex_attrs_preserves_utf8() {
         let input = r#"<span :title="{{label}}" data-icon="⭐">text</span>"#;
diff --git a/crates/webui-parser/src/plugin/fast_v3.rs b/crates/webui-parser/src/plugin/fast_v3.rs
index 3a9f40093..7b17bd4a3 100644
--- a/crates/webui-parser/src/plugin/fast_v3.rs
+++ b/crates/webui-parser/src/plugin/fast_v3.rs
@@ -7,16 +7,30 @@
 //! artifacts after parsing. Converts WebUI Framework template syntax (`<if>`, `<for>`, `{{}}`)
 //! into FAST-compatible syntax (`<f-when>`, `<f-repeat>`, `{}`).
 
-use super::{AttributeAction, ComponentTemplateArtifact, ParserPlugin, ParserPluginArtifacts};
+use super::{
+    AttributeAction, ComponentStyleDelivery, ComponentTemplateArtifact, ComponentTemplateContext,
+    ParserPlugin, ParserPluginArtifacts,
+};
 use crate::component_registry::Component;
-use crate::html_parser::{find_element_end, find_tag_close, leading_content, opening_tag_name};
-use crate::{CssLinkOptions, CssStrategy, Result};
+use crate::diagnostic::{codes, Diagnostic};
+use crate::html_parser::{
+    find_element_end, find_tag_close, leading_content, opening_tag_name, parse_tag,
+    starts_with_html_tag_name,
+};
+use crate::{CssLinkOptions, CssStrategy, ParserError, Result};
 use webui_protocol::FastElementData;
 
 /// Information about a tracked component for `<f-template>` generation.
 struct TrackedComponent {
     tag_name: String,
     template_html: String,
+    uses_shadow_dom: bool,
+    /// Prebuilt style snippet kept inside this component's shadow root.
+    ///
+    /// FAST's client runtime builds roots from `<f-template>` rather than from
+    /// WebUI's style registry, so a Shadow component's CSS has to travel with
+    /// the template that creates the root.
+    style_injection: Option<String>,
 }
 
 /// FAST 3 parser plugin used by `fast-v3`.
@@ -50,11 +64,56 @@ impl FastV3ParserPlugin {
         self.components
             .iter()
             .map(|comp| {
-                let tmpl = generate_f_template_from_processed(&comp.tag_name, &comp.template_html);
-                ComponentTemplateArtifact::template(comp.tag_name.clone(), tmpl)
+                let tmpl = build_f_template(
+                    &comp.tag_name,
+                    &convert_btr_to_fast(&comp.template_html),
+                    comp.style_injection.as_deref(),
+                    None,
+                );
+                ComponentTemplateArtifact::template(
+                    comp.tag_name.clone(),
+                    tmpl,
+                    comp.uses_shadow_dom,
+                )
             })
             .collect()
     }
+
+    fn track_component(
+        &mut self,
+        tag_name: &str,
+        processed_template: &str,
+        context: ComponentTemplateContext<'_>,
+    ) {
+        if self.components.iter().any(|c| c.tag_name == tag_name) {
+            return;
+        }
+        self.components.push(TrackedComponent {
+            tag_name: tag_name.to_string(),
+            template_html: processed_template.to_string(),
+            uses_shadow_dom: context.uses_shadow_dom,
+            style_injection: context.style.and_then(style_injection_snippet),
+        });
+    }
+
+    #[cfg(test)]
+    fn register_component_template(
+        &mut self,
+        tag_name: &str,
+        component: &Component,
+        processed_template: &str,
+    ) -> Result<()> {
+        <Self as ParserPlugin>::register_component_template(
+            self,
+            tag_name,
+            component,
+            processed_template,
+            ComponentTemplateContext {
+                uses_shadow_dom: true,
+                style: None,
+            },
+        )
+    }
 }
 
 impl Default for FastV3ParserPlugin {
@@ -69,16 +128,10 @@ impl ParserPlugin for FastV3ParserPlugin {
         tag_name: &str,
         component: &Component,
         processed_template: &str,
+        context: ComponentTemplateContext<'_>,
     ) -> Result<()> {
-        // Only track each component once (avoids duplicate <f-template> blocks
-        // when a component is used in multiple parent templates)
-        if self.components.iter().any(|c| c.tag_name == tag_name) {
-            return Ok(());
-        }
-        self.components.push(TrackedComponent {
-            tag_name: tag_name.to_string(),
-            template_html: processed_template.to_string(),
-        });
+        require_fast_shadow_dom(tag_name, context)?;
+        self.track_component(tag_name, processed_template, context);
         let _ = component;
         Ok(())
     }
@@ -139,66 +192,81 @@ pub fn generate_f_template(
     )
 }
 
-fn generate_f_template_from_processed(tag_name: &str, processed_template: &str) -> String {
-    let mut output = String::with_capacity(256);
-    output.push_str("<f-template name=\"");
-    output.push_str(tag_name);
-    output.push_str("\">\n");
-
-    let converted = convert_btr_to_fast(processed_template);
-    let trimmed = minify_inter_tag_whitespace(converted.trim());
-    let (trimmed, _) = leading_content(&trimmed);
-
-    if trimmed.starts_with("<template") {
-        output.push_str(trimmed);
-    } else {
-        output.push_str("<template>");
-        output.push_str(trimmed);
-        output.push_str("</template>");
+/// Build the inline style snippet FAST keeps inside a component's shadow root.
+///
+/// `Adopted` needs no snippet: the parser already recorded the specifier on the
+/// template's `shadowrootadoptedstylesheets` attribute.
+pub(super) fn style_injection_snippet(style: ComponentStyleDelivery<'_>) -> Option<String> {
+    match style {
+        ComponentStyleDelivery::Link { href } => {
+            let mut link = String::with_capacity(30 + href.len());
+            link.push_str("<link rel=\"stylesheet\" href=\"");
+            link.push_str(href);
+            link.push_str("\">");
+            Some(link)
+        }
+        ComponentStyleDelivery::Inline { css } => {
+            let trimmed = css.trim();
+            let mut style = String::with_capacity(15 + trimmed.len());
+            style.push_str("<style>");
+            push_style_text(&mut style, trimmed);
+            style.push_str("</style>");
+            Some(style)
+        }
+        ComponentStyleDelivery::Adopted { .. } => None,
     }
+}
 
-    output.push_str("\n</f-template>\n");
-    output
+/// Append CSS inside an HTML raw-text element without permitting `</style`
+/// (ASCII case-insensitive) to terminate the element.
+fn push_style_text(output: &mut String, css: &str) {
+    let bytes = css.as_bytes();
+    let mut chunk_start = 0usize;
+    let mut index = 0usize;
+    while index + 7 <= bytes.len() {
+        if bytes[index] == b'<'
+            && bytes[index + 1] == b'/'
+            && bytes[index + 2].eq_ignore_ascii_case(&b's')
+            && bytes[index + 3].eq_ignore_ascii_case(&b't')
+            && bytes[index + 4].eq_ignore_ascii_case(&b'y')
+            && bytes[index + 5].eq_ignore_ascii_case(&b'l')
+            && bytes[index + 6].eq_ignore_ascii_case(&b'e')
+        {
+            output.push_str(&css[chunk_start..index + 1]);
+            output.push_str("\\/");
+            chunk_start = index + 2;
+            index += 7;
+        } else {
+            index += 1;
+        }
+    }
+    output.push_str(&css[chunk_start..]);
 }
 
-/// Generate a FAST 3 f-template with Link CSS filename/href options.
-pub fn generate_f_template_with_css_options(
+/// Serialize one `<f-template>`, injecting `css_injection` inside the root
+/// `<template>` when present.
+///
+/// `converted_html` is already in the caller's FAST dialect, which is what lets
+/// both FAST versions share this serializer.
+///
+/// `module_specifier` adds `shadowrootadoptedstylesheets` when this function
+/// synthesizes the wrapper; templates that already went through the parser
+/// carry it verbatim and pass `None`.
+pub(super) fn build_f_template(
     tag_name: &str,
-    html_content: &str,
-    css_content: Option<&str>,
-    css_strategy: CssStrategy,
-    css_link_options: &CssLinkOptions,
+    converted_html: &str,
+    css_injection: Option<&str>,
+    module_specifier: Option<&str>,
 ) -> String {
     let mut output = String::with_capacity(256);
     output.push_str("<f-template name=\"");
     output.push_str(tag_name);
     output.push_str("\">\n");
 
-    let converted = convert_btr_to_fast(html_content);
-    let trimmed = minify_inter_tag_whitespace(converted.trim());
+    let trimmed = minify_inter_tag_whitespace(converted_html.trim());
     let (trimmed, _) = leading_content(&trimmed);
 
-    // Build the CSS injection string based on the configured strategy
-    let css_injection = match css_strategy {
-        CssStrategy::Link => css_content.map(|css| {
-            let href = css_link_options.resolve(tag_name, css);
-            let mut s = String::with_capacity(40 + href.href.len());
-            s.push_str("<link rel=\"stylesheet\" href=\"");
-            s.push_str(&href.href);
-            s.push_str("\">");
-            s
-        }),
-        CssStrategy::Style => css_content.map(|css| {
-            let mut s = String::with_capacity(15 + css.len());
-            s.push_str("<style>");
-            s.push_str(css.trim());
-            s.push_str("</style>");
-            s
-        }),
-        CssStrategy::Module => None,
-    };
-
-    if trimmed.starts_with("<template") {
+    if starts_with_html_tag_name(trimmed, "template") {
         if let Some(close_pos) = find_tag_close(trimmed) {
             // Dev owns the wrapper — preserve attributes verbatim.
             // For `CssStrategy::Module` the parser pass enforces
@@ -206,7 +274,7 @@ pub fn generate_f_template_with_css_options(
             // either the dev wrote it or the build already failed.
             output.push_str(&trimmed[..close_pos]);
             output.push('>');
-            if let Some(ref injection) = css_injection {
+            if let Some(injection) = css_injection {
                 output.push_str(injection);
             }
             output.push_str(&trimmed[close_pos + 1..]);
@@ -215,13 +283,13 @@ pub fn generate_f_template_with_css_options(
         }
     } else {
         output.push_str("<template");
-        if css_strategy == CssStrategy::Module && css_content.is_some() {
+        if let Some(specifier) = module_specifier {
             output.push_str(" shadowrootadoptedstylesheets=\"");
-            output.push_str(tag_name);
+            output.push_str(specifier);
             output.push('"');
         }
         output.push('>');
-        if let Some(ref injection) = css_injection {
+        if let Some(injection) = css_injection {
             output.push_str(injection);
         }
         output.push_str(trimmed);
@@ -232,6 +300,47 @@ pub fn generate_f_template_with_css_options(
     output
 }
 
+/// Resolve the root-`<template>` style injection and adopted-stylesheet
+/// specifier a compiled component needs, shared by both FAST versions.
+pub(super) fn f_template_style_injection<'a>(
+    tag_name: &'a str,
+    css_content: Option<&str>,
+    css_strategy: CssStrategy,
+    css_link_options: &CssLinkOptions,
+) -> (Option<String>, Option<&'a str>) {
+    let css_injection = css_content.and_then(|css| match css_strategy {
+        CssStrategy::Link => style_injection_snippet(ComponentStyleDelivery::Link {
+            href: &css_link_options.resolve(tag_name, css).href,
+        }),
+        CssStrategy::Style => style_injection_snippet(ComponentStyleDelivery::Inline { css }),
+        CssStrategy::Module => None,
+    });
+    let module_specifier = match css_strategy {
+        CssStrategy::Module if css_content.is_some() => Some(tag_name),
+        _ => None,
+    };
+    (css_injection, module_specifier)
+}
+
+/// Generate a FAST 3 f-template with Link CSS filename/href options.
+pub fn generate_f_template_with_css_options(
+    tag_name: &str,
+    html_content: &str,
+    css_content: Option<&str>,
+    css_strategy: CssStrategy,
+    css_link_options: &CssLinkOptions,
+) -> String {
+    let (css_injection, module_specifier) =
+        f_template_style_injection(tag_name, css_content, css_strategy, css_link_options);
+
+    build_f_template(
+        tag_name,
+        &convert_btr_to_fast(html_content),
+        css_injection.as_deref(),
+        module_specifier,
+    )
+}
+
 /// Convert WebUI Framework template syntax to FAST syntax in HTML content.
 ///
 /// Performs the following transformations without regex:
@@ -317,7 +426,7 @@ fn try_convert_tag(input: &str, pos: usize, result: &mut String) -> Option<usize
     // Check for tags with :attr="{{expr}}" complex attribute values
     if remaining.starts_with("<") {
         // Strip shadowrootmode from <template> tags
-        if starts_with_tag_name(remaining, "template") {
+        if starts_with_html_tag_name(remaining, "template") {
             if let Some(consumed) = strip_shadowrootmode(remaining, result) {
                 return Some(consumed);
             }
@@ -590,78 +699,41 @@ fn minify_inter_tag_whitespace(input: &str) -> String {
 
 /// Strip `shadowrootmode` attribute from a `<template ...>` opening tag.
 /// Returns `Some(bytes_consumed)` if a `<template` tag was found and processed.
-fn strip_shadowrootmode(tag_str: &str, result: &mut String) -> Option<usize> {
-    // Find the closing '>' outside of quoted attribute values
-    let close = find_tag_close(tag_str)?;
-    let tag_content = &tag_str[..=close];
-
-    // Only process if this tag contains shadowrootmode
-    if !tag_content.contains("shadowrootmode") {
-        return None;
-    }
-
-    // Rebuild the tag without the shadowrootmode attribute
-    result.push_str("<template");
-    let attr_start = "<template".len();
-    let inner = &tag_content[attr_start..close];
-
-    // Scan through the attributes, skipping shadowrootmode
-    let inner_bytes = inner.as_bytes();
-    let inner_len = inner_bytes.len();
-    let mut j = 0;
-    while j < inner_len {
-        // Skip whitespace
-        if is_whitespace(inner_bytes[j]) {
-            j += 1;
-            continue;
-        }
-
-        // Find the end of this attribute (name="value" or just name)
-        let attr_begin = j;
-        // Find '=' or whitespace or end
-        while j < inner_len && inner_bytes[j] != b'=' && !is_whitespace(inner_bytes[j]) {
-            j += 1;
-        }
-        let attr_name = &inner[attr_begin..j];
-
-        // If there's a '=', consume the value
-        let mut attr_end = j;
-        if j < inner_len && inner_bytes[j] == b'=' {
-            j += 1; // skip '='
-            if j < inner_len && inner_bytes[j] == b'"' {
-                j += 1; // skip opening quote
-                while j < inner_len && inner_bytes[j] != b'"' {
-                    j += 1;
-                }
-                if j < inner_len {
-                    j += 1; // skip closing quote
-                }
-            } else {
-                // Unquoted value
-                while j < inner_len && !is_whitespace(inner_bytes[j]) {
-                    j += 1;
-                }
-            }
-            attr_end = j;
-        }
-
-        // Skip the shadowrootmode attribute entirely
-        if attr_name == "shadowrootmode" {
-            continue;
-        }
-
-        // Keep this attribute
-        result.push(' ');
-        result.push_str(&inner[attr_begin..attr_end]);
-    }
+pub(super) fn strip_shadowrootmode(tag_str: &str, result: &mut String) -> Option<usize> {
+    let tag = parse_tag(tag_str)?;
+    let shadow_mode = tag
+        .attrs()
+        .find(|attr| attr.name.eq_ignore_ascii_case("shadowrootmode"))?;
+    let bytes = tag_str.as_bytes();
+    let mut removal_start = shadow_mode.raw_range.start;
+    while removal_start > 0 && bytes[removal_start - 1].is_ascii_whitespace() {
+        removal_start -= 1;
+    }
+    result.push_str(&tag_str[..removal_start]);
+    result.push_str(&tag_str[shadow_mode.raw_range.end..=tag.close]);
+    Some(tag.close + 1)
+}
 
-    if tag_content.ends_with("/>") {
-        result.push_str("/>");
-    } else {
-        result.push('>');
+pub(super) fn require_fast_shadow_dom(
+    tag_name: &str,
+    context: ComponentTemplateContext<'_>,
+) -> Result<()> {
+    if context.uses_shadow_dom {
+        return Ok(());
     }
+    Err(fast_light_dom_error(tag_name))
+}
 
-    Some(close + 1)
+#[cold]
+#[inline(never)]
+fn fast_light_dom_error(tag_name: &str) -> ParserError {
+    Diagnostic::error("FAST plugins require effective Shadow DOM")
+        .code(codes::FAST_LIGHT_DOM_UNSUPPORTED)
+        .component(tag_name)
+        .help(
+            "build with `dom: \"shadow\"`, author an open declarative Shadow root for this component, or use the WebUI plugin for global Light DOM",
+        )
+        .into()
 }
 
 #[cfg(test)]
@@ -850,6 +922,19 @@ mod tests {
         );
     }
 
+    #[test]
+    fn inline_component_css_cannot_terminate_the_style_element() {
+        let snippet = style_injection_snippet(ComponentStyleDelivery::Inline {
+            css: ".a{content:'</StYlE>'}</template><img src=x onerror=alert(1)>",
+        })
+        .expect("inline style snippet");
+
+        assert_eq!(
+            snippet,
+            "<style>.a{content:'<\\/StYlE>'}</template><img src=x onerror=alert(1)></style>"
+        );
+    }
+
     #[test]
     fn component_template_css_strategy_module() {
         let mut plugin = FastV3ParserPlugin::new();
@@ -1157,6 +1242,45 @@ mod tests {
         assert_eq!(output, "<template><div>Hello</div></template>");
     }
 
+    #[test]
+    fn strips_uppercase_native_shadow_wrapper() {
+        let input = r#"<TEMPLATE SHADOWROOTMODE="open"><div>Hello</div></TEMPLATE>"#;
+        let output = convert_btr_to_fast(input);
+        assert_eq!(output, "<TEMPLATE><div>Hello</div></TEMPLATE>");
+    }
+
+    #[test]
+    fn shadow_mode_stripping_preserves_unrelated_attribute_bytes() {
+        let input = "<TEMPLATE SHADOWROOTMODE = 'open' aria-label='keep shadowrootmode word' data-x = \"y\">";
+        let output = convert_btr_to_fast(input);
+        assert_eq!(
+            output,
+            "<TEMPLATE aria-label='keep shadowrootmode word' data-x = \"y\">"
+        );
+    }
+
+    #[test]
+    fn rejects_effective_light_dom() {
+        let mut plugin = FastV3ParserPlugin::new();
+        let component = make_component("my-card", "<p>content</p>", None);
+        let error = <FastV3ParserPlugin as ParserPlugin>::register_component_template(
+            &mut plugin,
+            "my-card",
+            &component,
+            component.html_content.as_str(),
+            ComponentTemplateContext {
+                uses_shadow_dom: false,
+                style: None,
+            },
+        )
+        .expect_err("FAST cannot mount Light DOM faithfully");
+        assert!(matches!(
+            error,
+            ParserError::Template(ref diagnostic)
+                if diagnostic.error_code() == Some(codes::FAST_LIGHT_DOM_UNSUPPORTED)
+        ));
+    }
+
     #[test]
     fn strip_shadowrootmode_preserves_other_attrs() {
         let input =
diff --git a/crates/webui-parser/src/plugin/mod.rs b/crates/webui-parser/src/plugin/mod.rs
index 2e549e218..8a78632cf 100644
--- a/crates/webui-parser/src/plugin/mod.rs
+++ b/crates/webui-parser/src/plugin/mod.rs
@@ -88,12 +88,14 @@ pub struct ComponentTemplateArtifact {
     /// an entry for scripted components; scriptless ones are always
     /// Rust-derived and never require a manifest entry.
     pub is_scripted: bool,
+    /// Whether this component effectively uses Shadow DOM.
+    pub uses_shadow_dom: bool,
 }
 
 impl ComponentTemplateArtifact {
     /// Create a non-WebUI template payload.
     #[must_use]
-    pub fn template(tag_name: String, template: String) -> Self {
+    pub fn template(tag_name: String, template: String, uses_shadow_dom: bool) -> Self {
         Self {
             tag_name,
             template,
@@ -103,6 +105,7 @@ impl ComponentTemplateArtifact {
             navigation: StateSurface::None,
             template_roots: Vec::new(),
             is_scripted: false,
+            uses_shadow_dom,
         }
     }
 
@@ -111,7 +114,12 @@ impl ComponentTemplateArtifact {
     /// The hydration surface starts empty; the producing plugin attaches it with
     /// [`Self::with_hydration`] once it has derived the surface.
     #[must_use]
-    pub fn webui(tag_name: String, template_json: String, template_functions: String) -> Self {
+    pub fn webui(
+        tag_name: String,
+        template_json: String,
+        template_functions: String,
+        uses_shadow_dom: bool,
+    ) -> Self {
         Self {
             tag_name,
             template: String::new(),
@@ -121,6 +129,7 @@ impl ComponentTemplateArtifact {
             navigation: StateSurface::None,
             template_roots: Vec::new(),
             is_scripted: false,
+            uses_shadow_dom,
         }
     }
 
@@ -153,6 +162,47 @@ impl ComponentTemplateArtifact {
     }
 }
 
+/// How a component's compiled CSS is delivered, as resolved by the build.
+///
+/// This is a neutral statement of fact about the component, not a request:
+/// WebUI installs its own stylesheets from precomputed style closures, so its
+/// templates stay style-free and most plugins ignore this entirely.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum ComponentStyleDelivery<'a> {
+    /// An external stylesheet served at `href`.
+    Link {
+        /// Resolved stylesheet URL.
+        href: &'a str,
+    },
+    /// The compiled CSS text itself.
+    Inline {
+        /// Compiled CSS source.
+        css: &'a str,
+    },
+    /// A constructed stylesheet the root adopts by `specifier`, already
+    /// recorded on the template's `shadowrootadoptedstylesheets`.
+    Adopted {
+        /// Module specifier for the constructed stylesheet.
+        specifier: &'a str,
+    },
+}
+
+/// Build-time component context resolved before a parser plugin observes the
+/// processed template.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub struct ComponentTemplateContext<'a> {
+    /// Whether this component effectively uses Shadow DOM.
+    pub uses_shadow_dom: bool,
+    /// How this component's CSS is delivered, when it has any.
+    ///
+    /// A plugin whose client runtime builds roots from the template it captures
+    /// here is outside WebUI's style registry, so it can use this to keep those
+    /// roots styled. Light CSS belongs to the containing CSS tree rather than
+    /// the captured component template, so delivery is reported only for
+    /// components that effectively use a Shadow root.
+    pub style: Option<ComponentStyleDelivery<'a>>,
+}
+
 /// A parser plugin that can customize template parsing behavior.
 ///
 /// Plugins receive callbacks at key points during HTML parsing:
@@ -172,9 +222,9 @@ pub trait ParserPlugin {
     /// Called when parser output options change.
     fn configure(&mut self, _options: &ParserOptions) {}
 
-    /// Called with the plugin-facing component template for the active CSS/DOM
-    /// strategies. Authored root `<template>` attributes are preserved here;
-    /// the SSR/internal parse view may strip runtime-only attributes.
+    /// Called with the plugin-facing component template and its resolved build
+    /// context. Authored root `<template>` attributes are preserved here; the
+    /// SSR/internal parse view may strip runtime-only attributes.
     ///
     /// `component` identifies whether browser code owns the tag. Exact
     /// JavaScript state surfaces come from bundler projection metadata rather
@@ -184,6 +234,7 @@ pub trait ParserPlugin {
         tag_name: &str,
         component: &Component,
         processed_template: &str,
+        context: ComponentTemplateContext<'_>,
     ) -> Result<()>;
 
     /// Decide how a framework-owned attribute should be handled.
@@ -211,7 +262,7 @@ mod artifact_tests {
 
     #[test]
     fn template_constructor_starts_with_no_hydration_surface() {
-        let artifact = ComponentTemplateArtifact::template("x-a".into(), "<p></p>".into());
+        let artifact = ComponentTemplateArtifact::template("x-a".into(), "<p></p>".into(), false);
         assert_eq!(artifact.tag_name, "x-a");
         assert_eq!(artifact.template, "<p></p>");
         assert!(artifact.template_json.is_empty());
@@ -223,7 +274,7 @@ mod artifact_tests {
     #[test]
     fn webui_constructor_starts_with_no_hydration_surface() {
         let artifact =
-            ComponentTemplateArtifact::webui("x-b".into(), "{\"j\":1}".into(), "[]".into());
+            ComponentTemplateArtifact::webui("x-b".into(), "{\"j\":1}".into(), "[]".into(), false);
         assert_eq!(artifact.tag_name, "x-b");
         assert!(artifact.template.is_empty());
         assert_eq!(artifact.template_json, "{\"j\":1}");
@@ -234,8 +285,9 @@ mod artifact_tests {
 
     #[test]
     fn with_hydration_attaches_surface_fluently() {
-        let artifact = ComponentTemplateArtifact::webui("x-c".into(), "{}".into(), "[]".into())
-            .with_hydration(StateSurface::keys(vec!["count".into(), "name".into()]));
+        let artifact =
+            ComponentTemplateArtifact::webui("x-c".into(), "{}".into(), "[]".into(), false)
+                .with_hydration(StateSurface::keys(vec!["count".into(), "name".into()]));
         assert_eq!(
             artifact.hydration,
             StateSurface::Keys(vec!["count".into(), "name".into()])
@@ -245,16 +297,18 @@ mod artifact_tests {
     #[test]
     fn with_hydration_is_plugin_agnostic_over_template_payloads() {
         // A non-WebUI plugin payload can carry its own hydration surface too.
-        let artifact = ComponentTemplateArtifact::template("x-d".into(), "<f-t></f-t>".into())
-            .with_hydration(StateSurface::keys(vec!["value".into()]));
+        let artifact =
+            ComponentTemplateArtifact::template("x-d".into(), "<f-t></f-t>".into(), false)
+                .with_hydration(StateSurface::keys(vec!["value".into()]));
         assert_eq!(artifact.template, "<f-t></f-t>");
         assert_eq!(artifact.hydration, StateSurface::Keys(vec!["value".into()]));
     }
 
     #[test]
     fn with_navigation_attaches_partial_state_surface() {
-        let artifact = ComponentTemplateArtifact::webui("x-e".into(), "{}".into(), "[]".into())
-            .with_navigation(StateSurface::keys(vec!["items".into(), "title".into()]));
+        let artifact =
+            ComponentTemplateArtifact::webui("x-e".into(), "{}".into(), "[]".into(), false)
+                .with_navigation(StateSurface::keys(vec!["items".into(), "title".into()]));
         assert_eq!(
             artifact.navigation,
             StateSurface::Keys(vec!["items".into(), "title".into()])
diff --git a/crates/webui-parser/src/plugin/webui.rs b/crates/webui-parser/src/plugin/webui.rs
index 8125da1fd..b6571bc54 100644
--- a/crates/webui-parser/src/plugin/webui.rs
+++ b/crates/webui-parser/src/plugin/webui.rs
@@ -28,7 +28,6 @@
 //!   "c": [[[0, ["state"]], 0, [[0], 1]]],
 //!   "eg": [["click", [["onClick", [], [0]]]]],
 //!   "b": [{ "h": "<span class=\"check\">✓</span>" }],
-//!   "sa": "my-component",
 //!   "re": [["submit", "onSubmit", [["e"]]]]
 //! }
 //! ```
@@ -61,17 +60,18 @@
 //!    compiles each tracked component into JSON metadata plus condition closures.
 
 use super::{
-    AttributeAction, ComponentTemplateArtifact, ParserPlugin, ParserPluginArtifacts, StateSurface,
+    AttributeAction, ComponentTemplateArtifact, ComponentTemplateContext, ParserPlugin,
+    ParserPluginArtifacts, StateSurface,
 };
 use crate::comment_policy;
 use crate::component_policy::{parse_component_render_policy, ComponentRenderPolicy};
 use crate::component_registry::Component;
 use crate::diagnostic::{codes, Diagnostic};
 use crate::html_parser::{
-    find_comment_close, find_declaration_close, find_element_end, find_tag_close, is_void_element,
-    leading_content, parse_tag, style_element_bounds,
+    find_comment_close, find_declaration_close, find_element_end, find_matching_end,
+    find_tag_close, is_void_element, leading_content, parse_tag, style_element_bounds,
 };
-use crate::{ConditionParser, DomStrategy, ParserOptions, Result};
+use crate::{ConditionParser, Result};
 use std::borrow::Cow;
 use std::cell::Cell;
 use std::fmt::Write;
@@ -86,6 +86,13 @@ struct TrackedComponent {
     template_html: String,
     root_event_source: String,
     client_module: ClientModule,
+    uses_shadow_dom: bool,
+    render_policy: ComponentRenderPolicy,
+}
+
+struct TrackedClientContext {
+    client_module: ClientModule,
+    uses_shadow_dom: bool,
     render_policy: ComponentRenderPolicy,
 }
 
@@ -133,8 +140,6 @@ pub struct WebUIParserPlugin {
     element_events: Cell<u32>,
     /// Global event index, incremented across all elements in a component.
     next_event_idx: Cell<u32>,
-    /// DOM strategy — shadow or light.
-    dom_strategy: DomStrategy,
 }
 
 impl WebUIParserPlugin {
@@ -144,7 +149,6 @@ impl WebUIParserPlugin {
             components: Vec::new(),
             element_events: Cell::new(0),
             next_event_idx: Cell::new(0),
-            dom_strategy: DomStrategy::default(),
         }
     }
 
@@ -165,7 +169,6 @@ impl WebUIParserPlugin {
     /// Returns [`crate::ParserError::Template`] if any tracked component
     /// contains an invalid `@event` handler or a non-braced `w-ref` binding.
     fn take_component_templates(&self) -> Result<Vec<ComponentTemplateArtifact>> {
-        let use_shadow = matches!(self.dom_strategy, DomStrategy::Shadow);
         let mut out = Vec::with_capacity(self.components.len());
         for c in &self.components {
             let is_authored = c.client_module.is_authored();
@@ -173,7 +176,7 @@ impl WebUIParserPlugin {
                 &c.tag_name,
                 &c.template_html,
                 &c.root_event_source,
-                use_shadow,
+                c.uses_shadow_dom,
                 !is_authored,
             )?;
             append_render_policy(&mut payload.template_json, &c.render_policy);
@@ -198,6 +201,7 @@ impl WebUIParserPlugin {
                     c.tag_name.clone(),
                     payload.template_json,
                     payload.template_functions,
+                    c.uses_shadow_dom,
                 )
                 .with_hydration(hydration)
                 .with_navigation(navigation)
@@ -212,28 +216,47 @@ impl WebUIParserPlugin {
         &mut self,
         tag_name: &str,
         template_html: &str,
-        component: &Component,
-    ) -> Result<()> {
+        root_event_source: &str,
+        client: TrackedClientContext,
+    ) {
         let template_html = Self::strip_boundary_directive_tags(template_html);
-        let client_module = ClientModule::from_component(component);
-        let render_policy = parse_component_render_policy(tag_name, &component.html_content)?;
-        if let Some(tracked) = self.components.iter_mut().find(|c| c.tag_name == tag_name) {
-            tracked.template_html.clear();
-            tracked.template_html.push_str(&template_html);
-            tracked.root_event_source.clear();
-            tracked.root_event_source.push_str(&component.html_content);
-            tracked.client_module = client_module;
-            tracked.render_policy = render_policy;
-            return Ok(());
+        if let Some(component) = self.components.iter_mut().find(|c| c.tag_name == tag_name) {
+            component.template_html.clear();
+            component.template_html.push_str(&template_html);
+            component.root_event_source.clear();
+            component.root_event_source.push_str(root_event_source);
+            component.client_module = client.client_module;
+            component.uses_shadow_dom = client.uses_shadow_dom;
+            component.render_policy = client.render_policy;
+            return;
         }
         self.components.push(TrackedComponent {
             tag_name: tag_name.to_string(),
             template_html: template_html.into_owned(),
-            root_event_source: component.html_content.clone(),
-            client_module,
-            render_policy,
+            root_event_source: root_event_source.to_string(),
+            client_module: client.client_module,
+            uses_shadow_dom: client.uses_shadow_dom,
+            render_policy: client.render_policy,
         });
-        Ok(())
+    }
+
+    #[cfg(test)]
+    fn register_component_template(
+        &mut self,
+        tag_name: &str,
+        component: &Component,
+        processed_template: &str,
+    ) -> Result<()> {
+        <Self as ParserPlugin>::register_component_template(
+            self,
+            tag_name,
+            component,
+            processed_template,
+            ComponentTemplateContext {
+                uses_shadow_dom: false,
+                style: None,
+            },
+        )
     }
 
     fn strip_boundary_directive_tags(template: &str) -> Cow<'_, str> {
@@ -354,10 +377,6 @@ impl ParserPlugin for WebUIParserPlugin {
         self.next_event_idx.set(0);
     }
 
-    fn configure(&mut self, options: &ParserOptions) {
-        self.dom_strategy = options.dom_strategy;
-    }
-
     fn classify_attribute(&mut self, attr_name: &str) -> AttributeAction {
         if attr_name.starts_with('@') {
             self.element_events.set(self.element_events.get() + 1);
@@ -374,8 +393,18 @@ impl ParserPlugin for WebUIParserPlugin {
         tag_name: &str,
         component: &Component,
         processed_template: &str,
+        context: ComponentTemplateContext<'_>,
     ) -> Result<()> {
-        self.store_component_template(tag_name, processed_template, component)?;
+        self.store_component_template(
+            tag_name,
+            processed_template,
+            &component.html_content,
+            TrackedClientContext {
+                client_module: ClientModule::from_component(component),
+                uses_shadow_dom: context.uses_shadow_dom,
+                render_policy: parse_component_render_policy(tag_name, &component.html_content)?,
+            },
+        );
         Ok(())
     }
 
@@ -586,8 +615,7 @@ struct TemplateBuildMetadata {
     has_events: bool,
 }
 
-struct TemplatePayloadOptions<'a> {
-    adopted_stylesheet: Option<&'a str>,
+struct TemplatePayloadOptions {
     shadow_dom: bool,
     emit_static_host: bool,
 }
@@ -645,7 +673,7 @@ impl ConditionFunctionEmitter {
 /// # Flow
 ///
 /// 1. Extract `@event` bindings from the `<template>` wrapper (→ `root_events`).
-/// 2. Strip the `<template shadowrootmode="…">` wrapper if present.
+/// 2. Strip the open declarative Shadow DOM wrapper if present.
 /// 3. Compile the inner body via [`compile_to_metadata`].
 /// 4. Serialize into JSON metadata and component-local condition closures.
 ///
@@ -661,7 +689,6 @@ impl ConditionFunctionEmitter {
 /// | `<for each="v in coll">body</for>`    | `r[]` + `rl[]` + `b[]`     | block removed; anchor slot stored |
 /// | first concrete `key="{{v.id}}"`       | optional fifth `r[]` field | relative repeat key path stored   |
 /// | `<link>` / `<style>` child nodes      | `h`                        | preserved in static HTML          |
-/// | module adopted stylesheet specifier   | `sa`                       | stored from `<template>` wrapper  |
 /// | `@event="{handler(e)}"`               | `eg[]`                     | element kept marker-free          |
 /// | `w-ref="name"` / `w-ref={name}`       | *(stays in HTML)*          | *(unchanged)*                     |
 /// | `<outlet />` / `<outlet></outlet>`    | *(stays in HTML)*          | `<outlet></outlet>`               |
@@ -689,9 +716,18 @@ fn generate_compiled_template_with_root_source(
     scriptless: bool,
 ) -> Result<CompiledTemplatePayload> {
     let trimmed = html_content.trim();
-    let root_events = extract_root_events(tag_name, root_event_source.trim())?;
-    let adopted_stylesheet = extract_adopted_stylesheet_specifier(trimmed);
-    let body = strip_template_wrapper(trimmed);
+    let shadow_body = shadow_template_body(trimmed);
+    let authored_shadow_root = shadow_body.is_some();
+    let mut root_events = if authored_shadow_root {
+        extract_root_events(tag_name, trimmed)?
+    } else {
+        Vec::new()
+    };
+    let raw_root = root_event_source.trim();
+    if root_events.is_empty() && raw_root != trimmed && shadow_template_body(raw_root).is_some() {
+        root_events = extract_root_events(tag_name, raw_root)?;
+    }
+    let body = shadow_body.unwrap_or(trimmed);
     let meta = compile_to_metadata(tag_name, body, root_events)?;
     let build_meta = collect_template_build_metadata(&meta);
     if scriptless && build_meta.has_events {
@@ -702,7 +738,6 @@ fn generate_compiled_template_with_root_source(
         &meta,
         &build_meta,
         TemplatePayloadOptions {
-            adopted_stylesheet: adopted_stylesheet.as_deref(),
             shadow_dom,
             emit_static_host: scriptless,
         },
@@ -713,7 +748,7 @@ fn emit_compiled_template_payload(
     html_content: &str,
     meta: &TemplateMeta,
     build_meta: &TemplateBuildMetadata,
-    options: TemplatePayloadOptions<'_>,
+    options: TemplatePayloadOptions,
 ) -> CompiledTemplatePayload {
     let mut conditions = ConditionFunctionEmitter::new(128);
     let mut out = String::with_capacity(512 + html_content.len());
@@ -721,11 +756,6 @@ fn emit_compiled_template_payload(
 
     emit_json_template_section(&meta.root, &mut out, &mut conditions);
 
-    if let Some(adopted_stylesheet) = options.adopted_stylesheet {
-        out.push_str(",\"sa\":");
-        emit_js_string(adopted_stylesheet, &mut out);
-    }
-
     // sd: shadow DOM flag — tells the client runtime to use shadow root
     if options.shadow_dom {
         out.push_str(",\"sd\":1");
@@ -2494,21 +2524,25 @@ fn is_inside_tag(input: &str, pos: usize) -> bool {
     false
 }
 
-/// Strip `<template shadowrootmode="…">…</template>` wrapper, returning inner content.
-/// Returns the input unchanged if no wrapper is present.
-fn strip_template_wrapper(html: &str) -> &str {
-    if !html.starts_with("<template") {
-        return html;
+/// Return the body of a complete open declarative Shadow DOM template.
+fn shadow_template_body(html: &str) -> Option<&str> {
+    let (html, _) = leading_content(html);
+    let tag = parse_tag(html)?;
+    if tag.closing || !tag.name.eq_ignore_ascii_case("template") {
+        return None;
     }
-    let Some(open_end) = find_tag_close(html) else {
-        return html;
-    };
-    let inner_start = open_end + 1;
-    let inner_end = html.rfind("</template>").unwrap_or(html.len());
-    if inner_start >= inner_end {
-        return "";
+    let is_open = tag.attrs().any(|attr| {
+        attr.name.eq_ignore_ascii_case("shadowrootmode")
+            && attr
+                .value
+                .is_some_and(|value| value.eq_ignore_ascii_case("open"))
+    });
+    if !is_open {
+        return None;
     }
-    &html[inner_start..inner_end]
+    let inner_start = tag.close + 1;
+    let (inner_end, close_end) = find_matching_end(html, tag.name, inner_start)?;
+    (close_end == html.len()).then_some(&html[inner_start..inner_end])
 }
 
 fn find_next_block_token(input: &str, cursor: usize, token: &str) -> Option<usize> {
@@ -3411,13 +3445,13 @@ fn parse_attr_parts(value: &str) -> Option<Vec<CompiledAttrPart>> {
 /// rather than to an element inside the shadow DOM.
 fn extract_root_events(component: &str, html: &str) -> Result<Vec<EventBinding>> {
     let (html, _) = leading_content(html);
-    if !html.starts_with("<template") {
-        return Ok(Vec::new());
-    }
-    let Some(close) = find_tag_close(html) else {
+    let Some(root) = parse_tag(html) else {
         return Ok(Vec::new());
     };
-    let tag = &html[..close];
+    if root.closing || !root.name.eq_ignore_ascii_case("template") {
+        return Ok(Vec::new());
+    }
+    let tag = &html[..root.close];
     let mut events = Vec::new();
     let bytes = tag.as_bytes();
     let len = bytes.len();
@@ -3437,18 +3471,6 @@ fn extract_root_events(component: &str, html: &str) -> Result<Vec<EventBinding>>
     Ok(events)
 }
 
-fn extract_adopted_stylesheet_specifier(html: &str) -> Option<String> {
-    if !html.starts_with("<template") {
-        return None;
-    }
-    let close = find_tag_close(html)?;
-    let tag = &html[..close];
-    let attr = "shadowrootadoptedstylesheets=\"";
-    let start = tag.find(attr)? + attr.len();
-    let end = tag[start..].find('"')? + start;
-    Some(tag[start..end].to_string())
-}
-
 // ── Tests ──────────────────────────────────────────────────────────
 
 #[cfg(test)]
@@ -4193,6 +4215,28 @@ mod tests {
         assert!(result.contains(r#","tx":[[[1,0],[["title"]]]]"#));
     }
 
+    #[test]
+    fn test_preserves_ordinary_template_in_light_client_html() {
+        let result = generate_compiled_template(
+            "my-comp",
+            r#"<template data-kind="ordinary"><p>content</p></template>"#,
+        );
+        assert!(
+            result.contains(r#""h":"<template data-kind=\"ordinary\"><p>content</p></template>""#)
+        );
+        assert!(!result.contains(r#","sd":1"#));
+    }
+
+    #[test]
+    fn test_shadow_wrapper_matching_is_ascii_case_insensitive() {
+        let result = generate_compiled_template(
+            "my-comp",
+            r#"<TEMPLATE SHADOWROOTMODE="OPEN"><p>content</p></TEMPLATE>"#,
+        );
+        assert!(result.contains(r#""h":"<p>content</p>""#));
+        assert!(!result.contains("SHADOWROOTMODE"));
+    }
+
     #[test]
     fn test_root_template_allows_gt_in_quoted_attr_values() {
         let result = generate_compiled_template(
@@ -4404,15 +4448,6 @@ mod tests {
         assert!(result.contains(r#""h":"<style>.root{color:red}</style><p>hi</p>""#));
     }
 
-    #[test]
-    fn test_compiled_template_emits_adopted_stylesheet_specifier() {
-        let result = generate_compiled_template(
-            "my-comp",
-            r#"<template shadowrootmode="open" shadowrootadoptedstylesheets="my-comp"><p>hi</p></template>"#,
-        );
-        assert!(result.contains(r#","sa":"my-comp""#));
-    }
-
     #[test]
     fn test_plugin_uses_processed_link_template_html() {
         let mut plugin = WebUIParserPlugin::new();
@@ -4464,7 +4499,7 @@ mod tests {
     }
 
     #[test]
-    fn test_plugin_uses_processed_module_template_html() {
+    fn module_template_does_not_emit_stylesheet_specifier_metadata() {
         let mut plugin = WebUIParserPlugin::new();
 
         let comp = test_component("test-el", "<p>hi</p>", Some(".root { color: red; }"), true);
@@ -4478,7 +4513,7 @@ mod tests {
             .unwrap();
         let templates = plugin.take_component_templates().unwrap();
         assert_eq!(templates.len(), 1);
-        assert!(templates[0].template_json.contains(r#","sa":"test-el""#));
+        assert!(!templates[0].template_json.contains(r#""sa":"#));
     }
 
     #[test]
diff --git a/crates/webui-press/README.md b/crates/webui-press/README.md
index 4bbb18464..9ceabeb97 100644
--- a/crates/webui-press/README.md
+++ b/crates/webui-press/README.md
@@ -17,8 +17,14 @@ Most documentation site generators are JavaScript first. They run a Node.js serv
 - **Single Rust binary.** No Node.js server, no build server, no JavaScript runtime on the server. Drop the binary into CI, run it, ship the `dist/` folder.
 - **Pre-compiled templates.** Pages are compiled into the WebUI binary protocol once, then rendered with state. Repeat builds reuse the cached protocol.
 - **Parallel everything.** Page rendering is parallelized with [rayon](https://docs.rs/rayon). Syntax highlighting reuses one preloaded `syntect` syntax set across threads. Markdown parsing is per-page and free of cross-page state.
-- **Hydration that works on GitHub Pages.** The output is static HTML with Declarative Shadow DOM pre-expanded. The browser parses it as HTML, no JavaScript required for first paint. Optional client-side hydration upgrades interactive components without re-rendering anything.
-- **Custom Web Components in markdown.** Drop a component into `components/`, reference it from any `.md` file with normal HTML, and it gets server-rendered with full DSD output. Page-specific scripts can opt into esbuild bundling when they need npm imports.
+- **Hydration that works on GitHub Pages.** The output is static, server-rendered
+  HTML using Light DOM for unwrapped components and Declarative Shadow DOM for opted-in
+  components. No JavaScript is required for first paint. Optional client-side
+  hydration upgrades interactive components without re-rendering anything.
+- **Custom Web Components in markdown.** Drop a component into `components/`,
+  reference it from any `.md` file with normal HTML, and it is server-rendered.
+  Page-specific scripts can opt into esbuild bundling when they need npm
+  imports.
 
 ---
 
@@ -132,7 +138,7 @@ The build pipeline:
 1. Parse config              → DocsConfig
 2. Discover .md files        → walk(contentDir) for every .md
 3. Render markdown           → comrak GFM + syntect highlighting
-4. Pre-expand DSD            → Declarative Shadow DOM in content
+4. Render component DOM      → Light DOM or opted-in Declarative Shadow DOM
 5. Build WebUI protocol      → compiled per page, cached templates
 6. Write base + theme CSS    → docs.css and theme.css emitted to outDir
 7. Render pages in parallel  → rayon + WebUI handler
@@ -422,11 +428,13 @@ Reference it from any `.md`:
 Components are:
 
 1. Compiled into the WebUI protocol at build time
-2. Server-rendered with **Declarative Shadow DOM** pre-expanded, visible without JavaScript
+2. Server-rendered as Light DOM when unwrapped or **Declarative Shadow DOM** when
+   selected by a sole top-level `<template shadowrootmode="open">`
 3. Auto-imported into the root script for template chrome or a page script when page content uses the component tag
 4. Shared through esbuild chunks when multiple pages use the same component or dependency
 
-Markdown inside slots is rendered as markdown, so you can mix prose and components freely.
+Native slots require the component's open Shadow wrapper. Markdown inside those
+slots is rendered as markdown, so you can mix prose and components freely.
 
 See the [WebUI Framework component guide](https://microsoft.github.io/webui/guide/concepts/components) for authoring details.
 
@@ -597,10 +605,15 @@ The output is fully renderable without JavaScript:
 
 - Markdown → HTML at build time
 - Components rendered server-side via the WebUI protocol
-- Declarative Shadow DOM pre-expanded inline
-- Critical styles inlined per component shadow root
-
-When the browser loads the generated root/page scripts (deferred, after first paint), the framework finds existing DSD shadow roots and **upgrades** them in place, no re-render, no flash, no virtual DOM. Event handlers and observable state are bound to the already-painted DOM. Page scripts import only the local component scripts and explicit bundled scripts needed by that page, with shared dependencies split into reusable chunks.
+- Light DOM for unwrapped components, with Declarative Shadow DOM pre-expanded for opted-in components
+- Component styles installed in compiler-defined order
+
+When the browser loads the generated root/page scripts (deferred, after first
+paint), the framework finds the existing Light or Shadow DOM and **upgrades** it
+in place, with no re-render, flash, or virtual DOM. Event handlers and
+observable state are bound to the already-painted DOM. Page scripts import only
+the local component scripts and explicit bundled scripts needed by that page,
+with shared dependencies split into reusable chunks.
 
 This is the WebUI Framework's [`webui` plugin](https://microsoft.github.io/webui/guide/concepts/plugins/) at work, and it is what makes the site feel instant on slow connections.
 
diff --git a/crates/webui-press/components/code-block/code-block.html b/crates/webui-press/components/code-block/code-block.html
index d7e90c2af..276827228 100644
--- a/crates/webui-press/components/code-block/code-block.html
+++ b/crates/webui-press/components/code-block/code-block.html
@@ -1,4 +1,6 @@
-<div class="wrapper">
-  <button class="copy-btn" @click="{copy()}" aria-label="Copy code">{{label}}</button>
-  <slot></slot>
-</div>
+<template shadowrootmode="open">
+  <div class="wrapper">
+    <button class="copy-btn" @click="{copy()}" aria-label="Copy code">{{label}}</button>
+    <slot></slot>
+  </div>
+</template>
diff --git a/crates/webui-press/components/webui-blockquote/webui-blockquote.html b/crates/webui-press/components/webui-blockquote/webui-blockquote.html
index 3781f865a..ebe4c75eb 100644
--- a/crates/webui-press/components/webui-blockquote/webui-blockquote.html
+++ b/crates/webui-press/components/webui-blockquote/webui-blockquote.html
@@ -1,11 +1,13 @@
-<div class="blockquote {{appearance}}">
-  <if condition="title">
-    <div class="header">
-      <span class="icon">{{icon}}</span>
-      <span class="title">{{title}}</span>
+<template shadowrootmode="open">
+  <div class="blockquote {{appearance}}">
+    <if condition="title">
+      <div class="header">
+        <span class="icon">{{icon}}</span>
+        <span class="title">{{title}}</span>
+      </div>
+    </if>
+    <div class="body">
+      <slot></slot>
     </div>
-  </if>
-  <div class="body">
-    <slot></slot>
   </div>
-</div>
+</template>
diff --git a/crates/webui-press/components/webui-press-tab-panel/webui-press-tab-panel.html b/crates/webui-press/components/webui-press-tab-panel/webui-press-tab-panel.html
index 8ba1596de..e97ce0c93 100644
--- a/crates/webui-press/components/webui-press-tab-panel/webui-press-tab-panel.html
+++ b/crates/webui-press/components/webui-press-tab-panel/webui-press-tab-panel.html
@@ -1,3 +1,5 @@
-<div class="panel">
-  <slot></slot>
-</div>
+<template shadowrootmode="open">
+  <div class="panel">
+    <slot></slot>
+  </div>
+</template>
diff --git a/crates/webui-press/components/webui-press-tab/webui-press-tab.html b/crates/webui-press/components/webui-press-tab/webui-press-tab.html
index ccd615c5f..555c63712 100644
--- a/crates/webui-press/components/webui-press-tab/webui-press-tab.html
+++ b/crates/webui-press/components/webui-press-tab/webui-press-tab.html
@@ -1,3 +1,5 @@
-<button class="tab-btn" @click="{select()}">
-  <slot></slot>
-</button>
+<template shadowrootmode="open">
+  <button class="tab-btn" @click="{select()}">
+    <slot></slot>
+  </button>
+</template>
diff --git a/crates/webui-press/components/webui-press-tabs/webui-press-tabs.html b/crates/webui-press/components/webui-press-tabs/webui-press-tabs.html
index 288bf4a3f..05e8e87cf 100644
--- a/crates/webui-press/components/webui-press-tabs/webui-press-tabs.html
+++ b/crates/webui-press/components/webui-press-tabs/webui-press-tabs.html
@@ -1,8 +1,10 @@
-<div class="tabs-container">
-  <div class="tab-bar">
-    <slot name="tab"></slot>
+<template shadowrootmode="open">
+  <div class="tabs-container">
+    <div class="tab-bar">
+      <slot name="tab"></slot>
+    </div>
+    <div class="tab-panels">
+      <slot></slot>
+    </div>
   </div>
-  <div class="tab-panels">
-    <slot></slot>
-  </div>
-</div>
+</template>
diff --git a/crates/webui-press/template/docs-search/docs-search.test.ts b/crates/webui-press/template/docs-search/docs-search.test.ts
index eb9425df2..b625bc8f7 100644
--- a/crates/webui-press/template/docs-search/docs-search.test.ts
+++ b/crates/webui-press/template/docs-search/docs-search.test.ts
@@ -166,8 +166,12 @@ test('search results do not retain stale title segments while typing', async (t)
   await page.waitForTimeout(500);
 
   const first = await page.locator('docs-search').evaluate((el) => {
-    const result = el.shadowRoot.querySelector('.result');
+    const root = el.shadowRoot;
+    if (!root) throw new Error('docs-search ShadowRoot missing');
+    const result = root.querySelector('.result');
+    if (!result) throw new Error('docs-search result missing');
     const title = result.querySelector('.result-title');
+    if (!title) throw new Error('docs-search result title missing');
     return {
       href: result.getAttribute('href'),
       normalizedTitle: title.textContent.replace(/\s+/g, ''),
@@ -196,14 +200,17 @@ test('heading search results use CSS spacing for breadcrumb separators', async (
   await page.locator('docs-search').evaluate(async (el) => {
     el.openSearch();
     await new Promise((resolve) => setTimeout(resolve, 300));
-    const input = el.shadowRoot.querySelector('input');
+    const input = el.shadowRoot?.querySelector<HTMLInputElement>('input');
+    if (!input) throw new Error('docs-search input missing');
     input.value = 'wasm bundles';
     el.onInput();
     await new Promise((resolve) => setTimeout(resolve, 0));
   });
 
   const separator = await page.locator('docs-search').evaluate((el) => {
-    const results = [...el.shadowRoot.querySelectorAll('.result')];
+    const root = el.shadowRoot;
+    if (!root) throw new Error('docs-search ShadowRoot missing');
+    const results = [...root.querySelectorAll('.result')];
     const hrefs = results.map((result) => result.getAttribute('href'));
     const item = results.find((result) =>
       result.getAttribute('href').includes('#building-the-wasm-bundles'),
@@ -351,14 +358,18 @@ test('scrollbars and search highlights use theme-specific colors', async (t) =>
   await page.locator('docs-search').evaluate(async (el) => {
     el.openSearch();
     await new Promise((resolve) => setTimeout(resolve, 300));
-    const input = el.shadowRoot.querySelector('input');
+    const input = el.shadowRoot?.querySelector<HTMLInputElement>('input');
+    if (!input) throw new Error('docs-search input missing');
     input.value = 'asse';
     el.onInput();
     await new Promise((resolve) => setTimeout(resolve, 0));
   });
 
   const dark = await page.locator('docs-search').evaluate((el) => {
-    const mark = el.shadowRoot.querySelector('mark');
+    const root = el.shadowRoot;
+    if (!root) throw new Error('docs-search ShadowRoot missing');
+    const mark = root.querySelector('mark');
+    if (!mark) throw new Error('docs-search highlight missing');
     const hostStyle = getComputedStyle(el);
     return {
       thumb: hostStyle.getPropertyValue('--docs-scrollbar-thumb').trim(),
@@ -629,11 +640,11 @@ async function waitForDocsSearch(page: Page): Promise<void> {
     const el = document
       .querySelector('docs-site-navigation')
       ?.shadowRoot?.querySelector('docs-search');
+    const root = el?.shadowRoot;
     return (
-      el &&
+      root &&
       customElements.get('docs-search') &&
-      el.shadowRoot &&
-      el.shadowRoot.querySelector('input')
+      root.querySelector('input')
     );
   });
 }
diff --git a/crates/webui-protocol/build.rs b/crates/webui-protocol/build.rs
index e9c8d6277..4c449bf3c 100644
--- a/crates/webui-protocol/build.rs
+++ b/crates/webui-protocol/build.rs
@@ -12,6 +12,8 @@ fn main() -> std::io::Result<()> {
 
         let mut config = prost_build::Config::new();
         config.type_attribute(".", "#[derive(serde::Serialize, serde::Deserialize)]");
+        config.type_attribute("webui.ComponentData", "#[serde(deny_unknown_fields)]");
+        config.type_attribute("webui.WebUIProtocol", "#[serde(deny_unknown_fields)]");
 
         // Build into OUT_DIR first (prost-build requirement), then copy to src/.
         config.compile_protos(&["proto/webui.proto"], &["proto/"])?;
diff --git a/crates/webui-protocol/proto/webui.proto b/crates/webui-protocol/proto/webui.proto
index 6ea0df562..a0550dd7f 100644
--- a/crates/webui-protocol/proto/webui.proto
+++ b/crates/webui-protocol/proto/webui.proto
@@ -10,19 +10,14 @@ message ComponentData {
   // Non-WebUI client-side template payload.
   // FAST plugins store complete <f-template> HTML here.
   string template = 1;
-  // Component CSS content for the Module strategy.
-  // Contains the full CSS content when CssStrategy::Module is active.
-  // Empty for Link and Style strategies (CSS is handled via <link> tags
-  // or inline <style> tags baked into raw fragments by the parser).
+  // Compiled component CSS content for the Style and Module strategies.
+  // Empty for Link and for components without CSS.
   string css = 2;
   // External stylesheet href for the Link CSS strategy.
   // Set to e.g. "/my-card.css" when the component has a CSS file and the
   // build used CssStrategy::Link. Empty for Style/Module strategies and
   // for components without CSS.
-  // The handler uses css_strategy and dom_strategy on WebUIProtocol to
-  // decide what to emit in <head>:
-  //   Link + Shadow → <link rel="preload"> (shadow root has the stylesheet)
-  //   Link + Light  → <link rel="stylesheet"> (no shadow root to host it)
+  // Ordered style closures decide which Document or ShadowRoot owns the link.
   string css_href = 3;
   // WebUI plugin JSON-safe component metadata.
   // Stored separately from executable condition closures so handlers can emit
@@ -49,6 +44,9 @@ message ComponentData {
   // significant: protocols produced before projection metadata leave this
   // absent, so handlers preserve full state instead of treating it as NONE.
   optional StateProjectionMode navigation_mode = 9;
+  // Whether this component effectively uses Shadow DOM after build-time
+  // fallback and authored declarative Shadow DOM resolution.
+  bool uses_shadow_dom = 10;
 }
 
 // Link stylesheet metadata for one static component asset root.
@@ -88,12 +86,6 @@ enum CssStrategy {
   CSS_STRATEGY_MODULE = 2;
 }
 
-// DOM encapsulation strategy chosen at build time.
-enum DomStrategy {
-  DOM_STRATEGY_SHADOW = 0;
-  DOM_STRATEGY_LIGHT = 1;
-}
-
 // Root protocol containing all fragment records and build metadata.
 message WebUIProtocol {
   map<string, FragmentList> fragments = 1;
@@ -103,12 +95,11 @@ message WebUIProtocol {
   repeated string tokens = 2;
   // Per-component data keyed by tag name (f-template + CSS).
   map<string, ComponentData> components = 3;
-  // Build-wide CSS delivery strategy. Determines how the handler emits
-  // CSS-related tags in <head> for components with css_href.
+  // Build-wide CSS delivery strategy. Determines how compiled component
+  // resources are installed in each CSS tree.
   CssStrategy css_strategy = 4;
-  // Build-wide DOM encapsulation strategy. Combined with css_strategy to
-  // decide preload vs stylesheet emission.
-  DomStrategy dom_strategy = 5;
+  reserved 5;
+  reserved "dom_strategy";
   // Whether initial SSR metadata contains full state or WebUI component
   // projection. Partial-navigation state remains component-driven.
   InitialStateStrategy initial_state_strategy = 6;
@@ -128,11 +119,46 @@ message WebUIProtocol {
   // Build-generated document-level rules for component rendering policies.
   // Empty when no component opts into lazy rendering.
   string component_render_css = 9;
+  // Ordered, deduplicated component style resource tags for each Document or
+  // component-root CSS tree entry point.
+  map<string, ComponentStyleClosure> style_closures = 10;
+  // Bundled stylesheets in global cascade order. Empty unless the build
+  // enabled CSS bundling, in which case every component that owns a style
+  // resource belongs to exactly one chunk and handlers deliver chunks instead
+  // of individual component resources.
+  repeated StyleChunk style_chunks = 11;
   // Build-generated eager metadata for static component asset roots.
   //
   // Entries are sorted by root tag. Builds without component assets omit the
   // field from the wire.
-  repeated ComponentAssetStylePreload component_asset_style_preloads = 10;
+  repeated ComponentAssetStylePreload component_asset_style_preloads = 12;
+}
+
+// Compile-time component style resources for one CSS tree.
+message ComponentStyleClosure {
+  // Component tags in cascade-sensitive first-discovery order.
+  repeated string component_tags = 1;
+  // Indices into WebUIProtocol.style_chunks covering exactly the components in
+  // component_tags, in the same cascade order. Empty unless the build enabled
+  // CSS bundling. A chunk is listed only when the closure consumes every
+  // component the chunk carries, so delivering a chunk never over-delivers.
+  repeated uint32 style_chunks = 2;
+}
+
+// One bundled stylesheet carrying a contiguous run of component styles that
+// share the same set of consuming CSS trees.
+message StyleChunk {
+  // Stable build-time chunk name. Surfaces as the data-webui-resource value so
+  // delivered stylesheets stay attributable without a source map.
+  string name = 1;
+  // Concatenated compiled CSS for the Style and Module strategies.
+  // Empty for Link.
+  string css = 2;
+  // External stylesheet href for the Link strategy.
+  // Empty for Style and Module.
+  string css_href = 3;
+  // Component tags whose CSS this chunk concatenates, in cascade order.
+  repeated string component_tags = 4;
 }
 
 // A list of fragments (needed because protobuf maps cannot have repeated values directly).
diff --git a/crates/webui-protocol/src/gen_webui.rs b/crates/webui-protocol/src/gen_webui.rs
index 96be2c2f3..bd988cb70 100644
--- a/crates/webui-protocol/src/gen_webui.rs
+++ b/crates/webui-protocol/src/gen_webui.rs
@@ -6,26 +6,22 @@
 // This file is @generated by prost-build.
 /// Per-component metadata keyed by tag name.
 #[derive(serde::Serialize, serde::Deserialize)]
+#[serde(deny_unknown_fields)]
 #[derive(Clone, PartialEq, Eq, Hash, ::prost::Message)]
 pub struct ComponentData {
     /// Non-WebUI client-side template payload.
     /// FAST plugins store complete <f-template> HTML here.
     #[prost(string, tag = "1")]
     pub template: ::prost::alloc::string::String,
-    /// Component CSS content for the Module strategy.
-    /// Contains the full CSS content when CssStrategy::Module is active.
-    /// Empty for Link and Style strategies (CSS is handled via <link> tags
-    /// or inline <style> tags baked into raw fragments by the parser).
+    /// Compiled component CSS content for the Style and Module strategies.
+    /// Empty for Link and for components without CSS.
     #[prost(string, tag = "2")]
     pub css: ::prost::alloc::string::String,
     /// External stylesheet href for the Link CSS strategy.
     /// Set to e.g. "/my-card.css" when the component has a CSS file and the
     /// build used CssStrategy::Link. Empty for Style/Module strategies and
     /// for components without CSS.
-    /// The handler uses css_strategy and dom_strategy on WebUIProtocol to
-    /// decide what to emit in <head>:
-    ///    Link + Shadow → <link rel="preload"> (shadow root has the stylesheet)
-    ///    Link + Light  → <link rel="stylesheet"> (no shadow root to host it)
+    /// Ordered style closures decide which Document or ShadowRoot owns the link.
     #[prost(string, tag = "3")]
     pub css_href: ::prost::alloc::string::String,
     /// WebUI plugin JSON-safe component metadata.
@@ -59,6 +55,10 @@ pub struct ComponentData {
     /// absent, so handlers preserve full state instead of treating it as NONE.
     #[prost(enumeration = "StateProjectionMode", optional, tag = "9")]
     pub navigation_mode: ::core::option::Option<i32>,
+    /// Whether this component effectively uses Shadow DOM after build-time
+    /// fallback and authored declarative Shadow DOM resolution.
+    #[prost(bool, tag = "10")]
+    pub uses_shadow_dom: bool,
 }
 /// Link stylesheet metadata for one static component asset root.
 ///
@@ -77,6 +77,7 @@ pub struct ComponentAssetStylePreload {
 }
 /// Root protocol containing all fragment records and build metadata.
 #[derive(serde::Serialize, serde::Deserialize)]
+#[serde(deny_unknown_fields)]
 #[derive(Clone, PartialEq, ::prost::Message)]
 pub struct WebUiProtocol {
     #[prost(map = "string, message", tag = "1")]
@@ -95,14 +96,10 @@ pub struct WebUiProtocol {
         ::prost::alloc::string::String,
         ComponentData,
     >,
-    /// Build-wide CSS delivery strategy. Determines how the handler emits
-    /// CSS-related tags in <head> for components with css_href.
+    /// Build-wide CSS delivery strategy. Determines how compiled component
+    /// resources are installed in each CSS tree.
     #[prost(enumeration = "CssStrategy", tag = "4")]
     pub css_strategy: i32,
-    /// Build-wide DOM encapsulation strategy. Combined with css_strategy to
-    /// decide preload vs stylesheet emission.
-    #[prost(enumeration = "DomStrategy", tag = "5")]
-    pub dom_strategy: i32,
     /// Whether initial SSR metadata contains full state or WebUI component
     /// projection. Partial-navigation state remains component-driven.
     #[prost(enumeration = "InitialStateStrategy", tag = "6")]
@@ -125,15 +122,63 @@ pub struct WebUiProtocol {
     /// Empty when no component opts into lazy rendering.
     #[prost(string, tag = "9")]
     pub component_render_css: ::prost::alloc::string::String,
+    /// Ordered, deduplicated component style resource tags for each Document or
+    /// component-root CSS tree entry point.
+    #[prost(map = "string, message", tag = "10")]
+    pub style_closures: ::std::collections::HashMap<
+        ::prost::alloc::string::String,
+        ComponentStyleClosure,
+    >,
+    /// Bundled stylesheets in global cascade order. Empty unless the build
+    /// enabled CSS bundling, in which case every component that owns a style
+    /// resource belongs to exactly one chunk and handlers deliver chunks instead
+    /// of individual component resources.
+    #[prost(message, repeated, tag = "11")]
+    pub style_chunks: ::prost::alloc::vec::Vec<StyleChunk>,
     /// Build-generated eager metadata for static component asset roots.
     ///
     /// Entries are sorted by root tag. Builds without component assets omit the
     /// field from the wire.
-    #[prost(message, repeated, tag = "10")]
+    #[prost(message, repeated, tag = "12")]
     pub component_asset_style_preloads: ::prost::alloc::vec::Vec<
         ComponentAssetStylePreload,
     >,
 }
+/// Compile-time component style resources for one CSS tree.
+#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Clone, PartialEq, Eq, Hash, ::prost::Message)]
+pub struct ComponentStyleClosure {
+    /// Component tags in cascade-sensitive first-discovery order.
+    #[prost(string, repeated, tag = "1")]
+    pub component_tags: ::prost::alloc::vec::Vec<::prost::alloc::string::String>,
+    /// Indices into WebUIProtocol.style_chunks covering exactly the components in
+    /// component_tags, in the same cascade order. Empty unless the build enabled
+    /// CSS bundling. A chunk is listed only when the closure consumes every
+    /// component the chunk carries, so delivering a chunk never over-delivers.
+    #[prost(uint32, repeated, tag = "2")]
+    pub style_chunks: ::prost::alloc::vec::Vec<u32>,
+}
+/// One bundled stylesheet carrying a contiguous run of component styles that
+/// share the same set of consuming CSS trees.
+#[derive(serde::Serialize, serde::Deserialize)]
+#[derive(Clone, PartialEq, Eq, Hash, ::prost::Message)]
+pub struct StyleChunk {
+    /// Stable build-time chunk name. Surfaces as the data-webui-resource value so
+    /// delivered stylesheets stay attributable without a source map.
+    #[prost(string, tag = "1")]
+    pub name: ::prost::alloc::string::String,
+    /// Concatenated compiled CSS for the Style and Module strategies.
+    /// Empty for Link.
+    #[prost(string, tag = "2")]
+    pub css: ::prost::alloc::string::String,
+    /// External stylesheet href for the Link strategy.
+    /// Empty for Style and Module.
+    #[prost(string, tag = "3")]
+    pub css_href: ::prost::alloc::string::String,
+    /// Component tags whose CSS this chunk concatenates, in cascade order.
+    #[prost(string, repeated, tag = "4")]
+    pub component_tags: ::prost::alloc::vec::Vec<::prost::alloc::string::String>,
+}
 /// A list of fragments (needed because protobuf maps cannot have repeated values directly).
 #[derive(serde::Serialize, serde::Deserialize)]
 #[derive(Clone, PartialEq, ::prost::Message)]
@@ -502,34 +547,6 @@ impl CssStrategy {
         }
     }
 }
-/// DOM encapsulation strategy chosen at build time.
-#[derive(serde::Serialize, serde::Deserialize)]
-#[derive(Clone, Copy, Debug, PartialEq, Eq, Hash, PartialOrd, Ord, ::prost::Enumeration)]
-#[repr(i32)]
-pub enum DomStrategy {
-    Shadow = 0,
-    Light = 1,
-}
-impl DomStrategy {
-    /// String value of the enum field names used in the ProtoBuf definition.
-    ///
-    /// The values are not transformed in any way and thus are considered stable
-    /// (if the ProtoBuf definition does not change) and safe for programmatic use.
-    pub fn as_str_name(&self) -> &'static str {
-        match self {
-            Self::Shadow => "DOM_STRATEGY_SHADOW",
-            Self::Light => "DOM_STRATEGY_LIGHT",
-        }
-    }
-    /// Creates an enum from field names used in the ProtoBuf definition.
-    pub fn from_str_name(value: &str) -> ::core::option::Option<Self> {
-        match value {
-            "DOM_STRATEGY_SHADOW" => Some(Self::Shadow),
-            "DOM_STRATEGY_LIGHT" => Some(Self::Light),
-            _ => None,
-        }
-    }
-}
 /// Which end of an inline boundary tape a fragment marks.
 #[derive(serde::Serialize, serde::Deserialize)]
 #[derive(Clone, Copy, Debug, PartialEq, Eq, Hash, PartialOrd, Ord, ::prost::Enumeration)]
diff --git a/crates/webui-protocol/src/lib.rs b/crates/webui-protocol/src/lib.rs
index 87006f58d..3c2559715 100644
--- a/crates/webui-protocol/src/lib.rs
+++ b/crates/webui-protocol/src/lib.rs
@@ -49,6 +49,8 @@ pub type WebUIFragmentRoute = WebUiFragmentRoute;
 pub type WebUIFragmentOutlet = WebUiFragmentOutlet;
 pub type WebUIFragmentBoundary = WebUiFragmentBoundary;
 pub type ComponentData = proto::ComponentData;
+pub type ComponentStyleClosure = proto::ComponentStyleClosure;
+pub type StyleChunk = proto::StyleChunk;
 
 /// A mapping of unique fragment identifiers to their corresponding fragment lists.
 pub type WebUIFragmentRecords = HashMap<String, FragmentList>;
@@ -385,7 +387,321 @@ impl ConditionExpr {
 
 // ── Constructors ────────────────────────────────────────────────────────
 
+enum StyleClosureOp<'a> {
+    Fragment(&'a str),
+    Component(&'a str),
+}
+
+/// One delivery unit of a style closure, resolved in cascade order.
+///
+/// A bundled build delivers merged chunks; otherwise every component delivers
+/// its own stylesheet. Both walk the closure in the same order, so the emitted
+/// cascade is identical either way.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub struct StyleClosureUnit<'a> {
+    /// Name the client installs this resource under: a chunk name, or a tag.
+    pub name: &'a str,
+    /// The delivered resource, or `None` when the protocol holds none.
+    pub resource: Option<&'a str>,
+    /// Covering chunk index, or `None` for a standalone component stylesheet.
+    pub chunk: Option<u32>,
+}
+
+impl CssStrategy {
+    /// Return the lowercase wire name the client runtime expects.
+    ///
+    /// prost's generated `as_str_name` yields the uppercase proto identifier
+    /// (`"LINK"`), so it cannot serve the JSON payloads. Every host that writes
+    /// a strategy onto the wire routes through this so the spellings agree.
+    #[must_use]
+    pub fn wire_name(self) -> &'static str {
+        match self {
+            CssStrategy::Link => "link",
+            CssStrategy::Style => "style",
+            CssStrategy::Module => "module",
+        }
+    }
+}
+
 impl WebUiProtocol {
+    /// Return whether a component authored a declarative Shadow DOM root.
+    #[must_use]
+    pub fn component_uses_shadow_dom(&self, tag_name: &str) -> bool {
+        self.components
+            .get(tag_name)
+            .is_some_and(|component| component.uses_shadow_dom)
+    }
+
+    /// Return the stored style resource for a component.
+    ///
+    /// Link protocols identify a resource by `css_href`; Style and Module
+    /// protocols retain the compiled CSS bytes. An empty field means that the
+    /// component has no paired style resource.
+    #[must_use]
+    pub fn component_style_resource(&self, tag_name: &str) -> Option<&str> {
+        let component = self.components.get(tag_name)?;
+        let resource = match self.css_strategy() {
+            CssStrategy::Link => component.css_href.as_str(),
+            CssStrategy::Style | CssStrategy::Module => component.css.as_str(),
+        };
+        (!resource.is_empty()).then_some(resource)
+    }
+
+    /// Return a precomputed style closure for `root`.
+    #[must_use]
+    pub fn style_closure(&self, root: &str) -> Option<&[String]> {
+        self.style_closures
+            .get(root)
+            .map(|closure| closure.component_tags.as_slice())
+    }
+
+    /// Precompute ordered style-resource closures for entry fragments and every
+    /// compiled component root.
+    ///
+    /// Traversal is iterative, follows source order, stops at Shadow
+    /// children and route activation edges, and deduplicates resources at first
+    /// discovery. Matched route roots install their own stored closures.
+    pub fn populate_style_closures(&mut self, entry_fragments: &[&str]) {
+        // Chunks are planned from the closures this call rebuilds, so any
+        // previously planned bundle is stale the moment closures change.
+        self.style_chunks.clear();
+        let mut roots: Vec<String> = entry_fragments
+            .iter()
+            .map(|root| (*root).to_string())
+            .collect();
+        roots.extend(
+            self.components
+                .keys()
+                .filter(|tag| self.fragments.contains_key(*tag))
+                .cloned(),
+        );
+        roots.sort_unstable();
+        roots.dedup();
+
+        let has_style_resources = match self.css_strategy() {
+            CssStrategy::Link => self
+                .components
+                .values()
+                .any(|component| !component.css_href.is_empty()),
+            CssStrategy::Style | CssStrategy::Module => self
+                .components
+                .values()
+                .any(|component| !component.css.is_empty()),
+        };
+        if !has_style_resources {
+            self.style_closures = roots
+                .into_iter()
+                .map(|root| (root, ComponentStyleClosure::default()))
+                .collect();
+            return;
+        }
+
+        self.style_closures = roots
+            .into_iter()
+            .map(|root| {
+                let closure = self.build_style_closure(&root);
+                (root, closure)
+            })
+            .collect();
+    }
+
+    fn build_style_closure<'a>(&'a self, root: &'a str) -> ComponentStyleClosure {
+        let mut component_tags = Vec::new();
+        let mut seen_styles = HashSet::new();
+        let mut visited_fragments = HashSet::new();
+        let mut work = Vec::new();
+
+        // A component-root closure owns its paired CSS regardless of whether
+        // callers normally encounter that component as a Light or Shadow child.
+        if self.component_style_resource(root).is_some() {
+            seen_styles.insert(root);
+            component_tags.push(root.to_string());
+        }
+        work.push(StyleClosureOp::Fragment(root));
+
+        while let Some(op) = work.pop() {
+            match op {
+                StyleClosureOp::Fragment(fragment_id) => {
+                    if !visited_fragments.insert(fragment_id) {
+                        continue;
+                    }
+                    let Some(fragment_list) = self.fragments.get(fragment_id) else {
+                        continue;
+                    };
+                    for fragment in fragment_list.fragments.iter().rev() {
+                        match fragment.fragment.as_ref() {
+                            Some(web_ui_fragment::Fragment::Component(component)) => {
+                                work.push(StyleClosureOp::Component(&component.fragment_id));
+                            }
+                            Some(web_ui_fragment::Fragment::ForLoop(for_loop)) => {
+                                work.push(StyleClosureOp::Fragment(&for_loop.fragment_id));
+                            }
+                            Some(web_ui_fragment::Fragment::IfCond(if_cond)) => {
+                                work.push(StyleClosureOp::Fragment(&if_cond.fragment_id));
+                            }
+                            Some(web_ui_fragment::Fragment::Attribute(attribute))
+                                if !attribute.template.is_empty() =>
+                            {
+                                work.push(StyleClosureOp::Fragment(&attribute.template));
+                            }
+                            _ => {}
+                        }
+                    }
+                }
+                StyleClosureOp::Component(tag_name) => {
+                    if self.component_uses_shadow_dom(tag_name) {
+                        continue;
+                    }
+                    if self.component_style_resource(tag_name).is_some()
+                        && seen_styles.insert(tag_name)
+                    {
+                        component_tags.push(tag_name.to_string());
+                    }
+                    work.push(StyleClosureOp::Fragment(tag_name));
+                }
+            }
+        }
+
+        ComponentStyleClosure {
+            component_tags,
+            style_chunks: Vec::new(),
+        }
+    }
+
+    /// Return the delivered style resource for a bundled chunk index.
+    ///
+    /// Mirrors [`Self::component_style_resource`]: Link protocols identify a
+    /// chunk by `css_href`, Style and Module protocols carry the concatenated
+    /// CSS bytes.
+    #[must_use]
+    pub fn style_chunk_resource(&self, chunk: u32) -> Option<(&str, &str)> {
+        let chunk = self.style_chunks.get(chunk as usize)?;
+        let resource = match self.css_strategy() {
+            CssStrategy::Link => chunk.css_href.as_str(),
+            CssStrategy::Style | CssStrategy::Module => chunk.css.as_str(),
+        };
+        (!resource.is_empty()).then_some((chunk.name.as_str(), resource))
+    }
+
+    /// Return the component tags merged into `chunk`, in cascade order.
+    #[must_use]
+    pub fn style_chunk_members(&self, chunk: u32) -> Option<&[String]> {
+        self.style_chunks
+            .get(chunk as usize)
+            .map(|chunk| chunk.component_tags.as_slice())
+    }
+
+    /// Map every component whose stylesheet a bundled chunk already ships to
+    /// that chunk's index.
+    ///
+    /// This is the single definition of "already covered by a chunk", and every
+    /// delivery path must agree on it. A closure carries `style_chunks` only
+    /// when the bundler treated it as a root; other closures still list their
+    /// members individually, and delivering those members verbatim in a bundled
+    /// build re-ships bytes the covering chunk already contains. Resolving a
+    /// member through this map instead keeps each closure self-sufficient, so
+    /// correctness never depends on which closure happens to install first.
+    ///
+    /// Empty for unbundled builds. Build it once per render: it allocates.
+    #[must_use]
+    pub fn style_chunk_index(&self) -> HashMap<&str, u32> {
+        let mut index = HashMap::new();
+        for (position, chunk) in self.style_chunks.iter().enumerate() {
+            let Ok(position) = u32::try_from(position) else {
+                break;
+            };
+            index.reserve(chunk.component_tags.len());
+            for tag in &chunk.component_tags {
+                index.insert(tag.as_str(), position);
+            }
+        }
+        index
+    }
+
+    /// Return the bundled chunk indices for `root`, in cascade order.
+    ///
+    /// Empty when the build did not bundle CSS, in which case callers deliver
+    /// [`Self::style_closure`] component resources individually.
+    #[must_use]
+    pub fn style_closure_chunks(&self, root: &str) -> Option<&[u32]> {
+        self.style_closures
+            .get(root)
+            .map(|closure| closure.style_chunks.as_slice())
+    }
+
+    /// Number of delivery units `closure` walks, in cascade order.
+    ///
+    /// A closure the bundler treated as a root ships one unit per chunk;
+    /// every other closure ships one unit per member.
+    #[must_use]
+    pub fn style_closure_unit_count(closure: &ComponentStyleClosure) -> usize {
+        if closure.style_chunks.is_empty() {
+            closure.component_tags.len()
+        } else {
+            closure.style_chunks.len()
+        }
+    }
+
+    /// Resolve one position of `closure` to the resource that delivers it.
+    ///
+    /// This is the single walk shared by every delivery path, so all of them
+    /// agree on [`Self::style_chunk_index`]'s definition of "already covered by
+    /// a chunk". A closure that was not a bundler root uses a chunk only when
+    /// the chunk's complete ordered membership is present; otherwise it falls
+    /// back to the individual component resource. `chunk_index` must come from
+    /// that accessor; pass an empty map for an unbundled protocol.
+    ///
+    /// Returns `None` only when `position` is out of range. A unit whose
+    /// `resource` is `None` names a resource the protocol does not hold, which
+    /// callers report or skip according to their own delivery contract.
+    #[must_use]
+    pub fn style_closure_unit<'a>(
+        &'a self,
+        closure: &'a ComponentStyleClosure,
+        chunk_index: &HashMap<&str, u32>,
+        position: usize,
+    ) -> Option<StyleClosureUnit<'a>> {
+        let chunk = if closure.style_chunks.is_empty() {
+            let tag = closure.component_tags.get(position)?.as_str();
+            let fallback = || {
+                Some(StyleClosureUnit {
+                    name: tag,
+                    resource: self.component_style_resource(tag),
+                    chunk: None,
+                })
+            };
+            let Some(index) = chunk_index.get(tag).copied() else {
+                return fallback();
+            };
+            let Some(members) = self.style_chunk_members(index) else {
+                return fallback();
+            };
+            let Some(member_position) = members.iter().position(|member| member == tag) else {
+                return fallback();
+            };
+            let Some(start) = position.checked_sub(member_position) else {
+                return fallback();
+            };
+            let Some(end) = start.checked_add(members.len()) else {
+                return fallback();
+            };
+            if closure.component_tags.get(start..end) != Some(members) {
+                return fallback();
+            }
+            index
+        } else {
+            *closure.style_chunks.get(position)?
+        };
+        let record = self.style_chunks.get(chunk as usize)?;
+        Some(StyleClosureUnit {
+            name: record.name.as_str(),
+            resource: self
+                .style_chunk_resource(chunk)
+                .map(|(_, resource)| resource),
+            chunk: Some(chunk),
+        })
+    }
+
     /// Create a protocol from fragment records with no CSS tokens.
     pub fn new(fragments: WebUIFragmentRecords) -> Self {
         Self {
@@ -393,10 +709,11 @@ impl WebUiProtocol {
             tokens: Vec::new(),
             components: HashMap::new(),
             css_strategy: 0,
-            dom_strategy: 0,
             initial_state_strategy: InitialStateStrategy::Full as i32,
             module_preloads: Vec::new(),
             component_render_css: String::new(),
+            style_closures: HashMap::new(),
+            style_chunks: Vec::new(),
             component_asset_style_preloads: Vec::new(),
         }
     }
@@ -408,10 +725,11 @@ impl WebUiProtocol {
             tokens,
             components: HashMap::new(),
             css_strategy: 0,
-            dom_strategy: 0,
             initial_state_strategy: InitialStateStrategy::Full as i32,
             module_preloads: Vec::new(),
             component_render_css: String::new(),
+            style_closures: HashMap::new(),
+            style_chunks: Vec::new(),
             component_asset_style_preloads: Vec::new(),
         }
     }
@@ -422,6 +740,12 @@ impl WebUiProtocol {
 impl WebUiProtocol {
     /// Validate that all fragment references point to existing fragment IDs.
     fn validate_protocol(protocol: Self) -> Result<Self> {
+        CssStrategy::try_from(protocol.css_strategy).map_err(|_| {
+            ProtocolError::Validation(format!(
+                "unknown CSS strategy value: {}",
+                protocol.css_strategy
+            ))
+        })?;
         let fragments = &protocol.fragments;
 
         let invalid_ref = fragments.iter().find_map(|(_, fragment_list)| {
@@ -693,6 +1017,514 @@ mod tests {
         WebUIProtocol::new(fragments)
     }
 
+    fn add_style_component(
+        protocol: &mut WebUIProtocol,
+        tag: &str,
+        uses_shadow_dom: bool,
+        has_css: bool,
+    ) {
+        protocol
+            .fragments
+            .entry(tag.to_string())
+            .or_insert_with(|| FragmentList {
+                fragments: Vec::new(),
+                contains_boundary: false,
+            });
+        protocol.components.insert(
+            tag.to_string(),
+            ComponentData {
+                css: has_css.then(|| format!(".{tag}{{}}")).unwrap_or_default(),
+                uses_shadow_dom,
+                ..Default::default()
+            },
+        );
+    }
+
+    #[test]
+    fn style_closure_preserves_order_deduplicates_and_cuts_at_shadow() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::component("light-a"),
+                    WebUIFragment::component("light-b"),
+                    WebUIFragment::component("no-css"),
+                    WebUIFragment::component("shadow-cut"),
+                    WebUIFragment::component("after-cut"),
+                ],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "light-a".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("shared-light")],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "light-b".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("shared-light")],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "no-css".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("styled-descendant")],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "shadow-cut".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("shadow-descendant")],
+                contains_boundary: false,
+            },
+        );
+        let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(CssStrategy::Style);
+        for tag in [
+            "light-a",
+            "light-b",
+            "shared-light",
+            "styled-descendant",
+            "shadow-descendant",
+            "after-cut",
+        ] {
+            add_style_component(&mut protocol, tag, false, true);
+        }
+        add_style_component(&mut protocol, "no-css", false, false);
+        add_style_component(&mut protocol, "shadow-cut", true, true);
+
+        protocol.populate_style_closures(&["index.html"]);
+
+        assert_eq!(
+            protocol.style_closure("index.html").expect("entry closure"),
+            [
+                "light-a",
+                "shared-light",
+                "light-b",
+                "styled-descendant",
+                "after-cut",
+            ]
+        );
+        assert_eq!(
+            protocol
+                .style_closure("shadow-cut")
+                .expect("Shadow closure"),
+            ["shadow-cut", "shadow-descendant"]
+        );
+    }
+
+    #[test]
+    fn style_closure_follows_dynamic_dependencies_but_not_routes() {
+        let nested_route = WebUiFragmentRoute {
+            fragment_id: "nested-route".to_string(),
+            ..Default::default()
+        };
+        let route = WebUiFragmentRoute {
+            fragment_id: "route-body".to_string(),
+            children: vec![nested_route],
+            pending_component: "route-pending".to_string(),
+            error_component: "route-error".to_string(),
+            ..Default::default()
+        };
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::for_loop("item", "items", "for-body"),
+                    WebUIFragment::if_cond(ConditionExpr::identifier("show"), "if-body"),
+                    WebUIFragment::attribute_template("title", "attribute-body"),
+                    WebUIFragment::route_from(route),
+                ],
+                contains_boundary: false,
+            },
+        );
+        for (fragment, component) in [
+            ("for-body", "for-card"),
+            ("if-body", "if-card"),
+            ("attribute-body", "attribute-card"),
+        ] {
+            fragments.insert(
+                fragment.to_string(),
+                FragmentList {
+                    fragments: vec![WebUIFragment::component(component)],
+                    contains_boundary: false,
+                },
+            );
+        }
+        let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(CssStrategy::Style);
+        for tag in [
+            "for-card",
+            "if-card",
+            "attribute-card",
+            "route-body",
+            "nested-route",
+            "route-pending",
+            "route-error",
+        ] {
+            add_style_component(&mut protocol, tag, false, true);
+        }
+        protocol.fragments.insert(
+            "route-body".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::outlet()],
+                contains_boundary: false,
+            },
+        );
+
+        protocol.populate_style_closures(&["index.html"]);
+
+        assert_eq!(
+            protocol.style_closure("index.html").expect("entry closure"),
+            ["for-card", "if-card", "attribute-card"]
+        );
+        assert_eq!(
+            protocol
+                .style_closure("route-body")
+                .expect("route body closure"),
+            ["route-body"]
+        );
+        assert_eq!(
+            protocol
+                .style_closure("nested-route")
+                .expect("nested route closure"),
+            ["nested-route"]
+        );
+    }
+
+    #[test]
+    fn style_closure_keeps_nested_routes_out_of_shadow_outlet_tree() {
+        let child_route = WebUiFragmentRoute {
+            fragment_id: "dashboard-page".to_string(),
+            pending_component: "dashboard-pending".to_string(),
+            error_component: "dashboard-error".to_string(),
+            ..Default::default()
+        };
+        let route = WebUiFragmentRoute {
+            fragment_id: "app-shell".to_string(),
+            children: vec![child_route],
+            pending_component: "shell-pending".to_string(),
+            error_component: "shell-error".to_string(),
+            ..Default::default()
+        };
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::route_from(route)],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "app-shell".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::component("shell-header"),
+                    WebUIFragment::component("route-layout"),
+                    WebUIFragment::component("shell-footer"),
+                ],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "route-layout".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::outlet()],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "dashboard-page".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("contact-card")],
+                contains_boundary: false,
+            },
+        );
+        let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(CssStrategy::Style);
+        for tag in [
+            "shell-header",
+            "route-layout",
+            "shell-footer",
+            "dashboard-page",
+            "contact-card",
+            "dashboard-pending",
+            "dashboard-error",
+            "shell-pending",
+            "shell-error",
+        ] {
+            add_style_component(&mut protocol, tag, false, true);
+        }
+        add_style_component(&mut protocol, "app-shell", true, true);
+
+        protocol.populate_style_closures(&["index.html"]);
+
+        assert!(protocol
+            .style_closure("index.html")
+            .expect("entry closure")
+            .is_empty());
+        assert_eq!(
+            protocol
+                .style_closure("app-shell")
+                .expect("Shadow shell closure"),
+            ["app-shell", "shell-header", "route-layout", "shell-footer"]
+        );
+        assert_eq!(
+            protocol
+                .style_closure("dashboard-page")
+                .expect("active route closure"),
+            ["dashboard-page", "contact-card"]
+        );
+    }
+
+    #[test]
+    fn style_closure_keeps_routes_out_of_nested_shadow_outlet_component() {
+        let route = WebUiFragmentRoute {
+            fragment_id: "light-shell".to_string(),
+            children: vec![WebUiFragmentRoute {
+                fragment_id: "dashboard-page".to_string(),
+                ..Default::default()
+            }],
+            ..Default::default()
+        };
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::route_from(route)],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "light-shell".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("shadow-layout")],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "shadow-layout".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::outlet()],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "dashboard-page".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("contact-card")],
+                contains_boundary: false,
+            },
+        );
+        let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(CssStrategy::Style);
+        for tag in ["light-shell", "dashboard-page", "contact-card"] {
+            add_style_component(&mut protocol, tag, false, true);
+        }
+        add_style_component(&mut protocol, "shadow-layout", true, true);
+
+        protocol.populate_style_closures(&["index.html"]);
+
+        assert!(protocol
+            .style_closure("index.html")
+            .expect("entry closure")
+            .is_empty());
+        assert_eq!(
+            protocol
+                .style_closure("light-shell")
+                .expect("route shell closure"),
+            ["light-shell"]
+        );
+        assert_eq!(
+            protocol
+                .style_closure("shadow-layout")
+                .expect("nested Shadow closure"),
+            ["shadow-layout"]
+        );
+        assert_eq!(
+            protocol
+                .style_closure("dashboard-page")
+                .expect("active route closure"),
+            ["dashboard-page", "contact-card"]
+        );
+    }
+
+    #[test]
+    fn style_closure_guards_same_tag_cycles_and_is_deterministic() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("cycle-card")],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "cycle-card".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("cycle-card")],
+                contains_boundary: false,
+            },
+        );
+        let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(CssStrategy::Style);
+        add_style_component(&mut protocol, "cycle-card", false, true);
+
+        protocol.populate_style_closures(&["index.html"]);
+        let first = protocol.style_closures.clone();
+        protocol.populate_style_closures(&["index.html"]);
+
+        assert_eq!(
+            protocol.style_closure("index.html").expect("entry closure"),
+            ["cycle-card"]
+        );
+        assert_eq!(
+            protocol
+                .style_closure("cycle-card")
+                .expect("component closure"),
+            ["cycle-card"]
+        );
+        assert_eq!(protocol.style_closures, first);
+    }
+
+    #[test]
+    fn style_closure_populates_empty_roots_without_resources() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("light-shell")],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert(
+            "light-shell".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::component("shadow-card")],
+                contains_boundary: false,
+            },
+        );
+        fragments.insert("shadow-card".to_string(), FragmentList::default());
+        let mut protocol = WebUIProtocol::new(fragments);
+        add_style_component(&mut protocol, "light-shell", false, false);
+        add_style_component(&mut protocol, "shadow-card", true, false);
+
+        protocol.populate_style_closures(&["index.html"]);
+
+        assert_eq!(protocol.style_closures.len(), 3);
+        for root in ["index.html", "light-shell", "shadow-card"] {
+            assert_eq!(protocol.style_closure(root), Some([].as_slice()));
+        }
+    }
+
+    #[test]
+    fn style_closure_roundtrips() {
+        let mut protocol = sample_protocol();
+        protocol.set_css_strategy(CssStrategy::Link);
+        protocol.components.insert(
+            "contact-card".to_string(),
+            ComponentData {
+                css_href: "/contact-card.css".to_string(),
+                ..Default::default()
+            },
+        );
+        protocol.populate_style_closures(&["index.html"]);
+
+        let bytes = protocol.to_protobuf().expect("encode failed");
+        let decoded = WebUIProtocol::from_protobuf(&bytes).expect("decode failed");
+        assert_eq!(
+            decoded.style_closure("index.html").expect("entry closure"),
+            ["contact-card"]
+        );
+    }
+
+    #[test]
+    fn current_json_requires_style_and_component_shadow_metadata() {
+        let mut protocol = sample_protocol();
+        protocol.components.insert(
+            "my-card".to_string(),
+            ComponentData {
+                uses_shadow_dom: false,
+                ..Default::default()
+            },
+        );
+        protocol.populate_style_closures(&["index.html"]);
+        let current = serde_json::to_value(&protocol).expect("JSON encode failed");
+
+        let mut missing_closures = current.clone();
+        missing_closures
+            .as_object_mut()
+            .expect("protocol JSON object")
+            .remove("style_closures");
+        assert!(serde_json::from_value::<WebUIProtocol>(missing_closures).is_err());
+
+        let mut missing_shadow_dom = current;
+        missing_shadow_dom["components"]["my-card"]
+            .as_object_mut()
+            .expect("component JSON object")
+            .remove("uses_shadow_dom");
+        assert!(serde_json::from_value::<WebUIProtocol>(missing_shadow_dom).is_err());
+
+        let mut legacy_root = serde_json::to_value(&protocol).expect("JSON encode failed");
+        legacy_root["dom_strategy"] = serde_json::json!(0);
+        assert!(serde_json::from_value::<WebUIProtocol>(legacy_root).is_err());
+
+        let mut legacy_component = serde_json::to_value(&protocol).expect("JSON encode failed");
+        legacy_component["components"]["my-card"]["effective_dom_strategy"] = serde_json::json!(0);
+        assert!(serde_json::from_value::<WebUIProtocol>(legacy_component).is_err());
+    }
+
+    #[test]
+    fn component_style_resource_uses_the_active_strategy_field() {
+        let mut protocol = WebUIProtocol::new(HashMap::new());
+        protocol.components.insert(
+            "my-card".to_string(),
+            ComponentData {
+                css: ".card{}".to_string(),
+                css_href: "/my-card.css".to_string(),
+                ..Default::default()
+            },
+        );
+
+        protocol.set_css_strategy(CssStrategy::Link);
+        assert_eq!(
+            protocol.component_style_resource("my-card"),
+            Some("/my-card.css")
+        );
+        protocol.set_css_strategy(CssStrategy::Style);
+        assert_eq!(
+            protocol.component_style_resource("my-card"),
+            Some(".card{}")
+        );
+        protocol.set_css_strategy(CssStrategy::Module);
+        assert_eq!(
+            protocol.component_style_resource("my-card"),
+            Some(".card{}")
+        );
+        assert_eq!(protocol.component_style_resource("missing-card"), None);
+    }
+
+    #[test]
+    fn declared_link_strategy_does_not_infer_module_from_css_bytes() {
+        let mut protocol = WebUIProtocol::default();
+        protocol.components.insert(
+            "my-card".to_string(),
+            ComponentData {
+                css: ".card{}".to_string(),
+                ..Default::default()
+            },
+        );
+        assert_eq!(protocol.css_strategy(), CssStrategy::Link);
+        assert_eq!(protocol.component_style_resource("my-card"), None);
+    }
+
     #[test]
     fn test_protobuf_roundtrip() {
         let protocol = sample_protocol();
@@ -1167,6 +1999,23 @@ mod tests {
         assert!(component.navigation_keys.is_empty());
     }
 
+    #[test]
+    fn test_component_uses_shadow_dom_roundtrips() {
+        let mut protocol = WebUIProtocol::new(HashMap::new());
+        protocol.components.insert(
+            "my-card".to_string(),
+            ComponentData {
+                uses_shadow_dom: true,
+                ..Default::default()
+            },
+        );
+
+        let bytes = protocol.to_protobuf().unwrap();
+        let decoded = WebUIProtocol::from_protobuf(&bytes).unwrap();
+        assert!(decoded.component_uses_shadow_dom("my-card"));
+        assert!(!decoded.component_uses_shadow_dom("missing-card"));
+    }
+
     #[test]
     fn test_protocol_with_tokens() {
         let tokens = vec!["color-primary".to_string(), "spacing-m".to_string()];
diff --git a/crates/webui-python/tests/fixtures/protocol.bin b/crates/webui-python/tests/fixtures/protocol.bin
index 1b21ea408..5214e116a 100644
Binary files a/crates/webui-python/tests/fixtures/protocol.bin and b/crates/webui-python/tests/fixtures/protocol.bin differ
diff --git a/crates/webui-python/tests/fixtures/streaming_protocol.bin b/crates/webui-python/tests/fixtures/streaming_protocol.bin
index 1340fea79..3f6aa8518 100644
--- a/crates/webui-python/tests/fixtures/streaming_protocol.bin
+++ b/crates/webui-python/tests/fixtures/streaming_protocol.bin
@@ -75,4 +75,6 @@ index.html
 }}}webui:body_end

 
 
-</body></html>

\ No newline at end of file
+</body></html>
R
+
+index.html
\ No newline at end of file
diff --git a/crates/webui-wasm/src/lib.rs b/crates/webui-wasm/src/lib.rs
index 3e2fc4151..29ce4ab28 100644
--- a/crates/webui-wasm/src/lib.rs
+++ b/crates/webui-wasm/src/lib.rs
@@ -117,7 +117,8 @@ mod tests {
         );
         files.insert(
             "my-card.html".to_string(),
-            "<div class=\"card\"><slot></slot></div>".to_string(),
+            "<template shadowrootmode=\"open\"><div class=\"card\"><slot></slot></div></template>"
+                .to_string(),
         );
 
         let result = render_files_for_test(&files, "{}", "index.html", "/");
@@ -181,7 +182,7 @@ mod tests {
         );
         files.insert(
             "my-card.html".to_string(),
-            "<p><slot></slot></p>".to_string(),
+            "<template shadowrootmode=\"open\"><p><slot></slot></p></template>".to_string(),
         );
         files.insert("my-card.css".to_string(), "p { color: red; }".to_string());
 
@@ -189,7 +190,9 @@ mod tests {
         assert!(result.is_ok(), "Render failed: {:?}", result);
         let html = result.as_deref().unwrap_or("");
         assert!(
-            html.contains("<style>p { color: red; }</style>"),
+            html.contains(
+                r#"<style data-webui-resource="my-card" data-webui-strategy="style">p { color: red; }</style>"#,
+            ),
             "Expected inline <style> tag in: {}",
             html
         );
diff --git a/crates/webui-wasm/src/parser.rs b/crates/webui-wasm/src/parser.rs
index 6ff0a6503..98fce46a2 100644
--- a/crates/webui-wasm/src/parser.rs
+++ b/crates/webui-wasm/src/parser.rs
@@ -8,18 +8,22 @@ use std::collections::HashMap;
 use wasm_bindgen::prelude::*;
 use webui_parser::plugin::webui::WebUIParserPlugin;
 use webui_parser::plugin::{ParserPluginArtifacts, StateSurface};
-use webui_parser::{CssStrategy, HtmlParser};
+use webui_parser::{CssStrategy, DomStrategy, HtmlParser};
 use webui_protocol::projection_manifest::{ProjectionComponent, ProjectionManifest};
 use webui_protocol::{InitialStateStrategy, StateProjectionMode, WebUIProtocol};
 
 /// Build protocol protobuf bytes from virtual files without rendering.
 ///
+/// `dom` accepts `"shadow"` (default) or `"light"` for unwrapped components;
+/// authored open Shadow roots remain Shadow in either mode.
+///
 /// Returns the serialized `WebUIProtocol` as protobuf bytes.
 #[wasm_bindgen]
 pub fn build_protocol(
     files: JsValue,
     entry: &str,
     projection_manifests: Option<JsValue>,
+    dom: Option<String>,
 ) -> Result<Vec<u8>, JsValue> {
     let files_map: HashMap<String, String> =
         serde_wasm_bindgen::from_value(files).map_err(|e| JsValue::from_str(&e.to_string()))?;
@@ -28,17 +32,32 @@ pub fn build_protocol(
         .transpose()
         .map_err(|error| JsValue::from_str(&format!("invalid projection manifests: {error}")))?
         .unwrap_or_default();
+    let dom = dom
+        .map(|value| value.parse::<DomStrategy>())
+        .transpose()
+        .map_err(|error| JsValue::from_str(&error))?
+        .unwrap_or_default();
 
-    build_protocol_inner(&files_map, entry, &manifests)
+    build_protocol_inner_with_dom(&files_map, entry, &manifests, dom)
         .map_err(|e| JsValue::from_str(&e.to_string()))
 }
 
+#[cfg(test)]
 pub(crate) fn build_protocol_inner(
     files: &HashMap<String, String>,
     entry: &str,
     projection_manifests: &[ProjectionManifest],
 ) -> Result<Vec<u8>, WasmError> {
-    let protocol = parse_to_protocol(files, entry, projection_manifests)?;
+    build_protocol_inner_with_dom(files, entry, projection_manifests, DomStrategy::Shadow)
+}
+
+fn build_protocol_inner_with_dom(
+    files: &HashMap<String, String>,
+    entry: &str,
+    projection_manifests: &[ProjectionManifest],
+    dom: DomStrategy,
+) -> Result<Vec<u8>, WasmError> {
+    let protocol = parse_to_protocol_with_dom(files, entry, projection_manifests, dom)?;
     protocol.to_protobuf().map_err(WasmError::Protocol)
 }
 
@@ -77,21 +96,79 @@ fn has_component_script(files: &HashMap<String, String>, tag_name: &str) -> bool
     files.contains_key(&format!("{tag_name}.ts")) || files.contains_key(&format!("{tag_name}.js"))
 }
 
+type ComponentDeliverySnapshot = (Vec<(String, String)>, Vec<(String, bool)>);
+
+fn component_delivery_snapshot(parser: &HtmlParser) -> ComponentDeliverySnapshot {
+    let css = parser
+        .component_registry()
+        .get_all()
+        .filter(|component| parser.has_fragment(&component.tag_name))
+        .filter_map(|component| {
+            component
+                .css_content
+                .as_ref()
+                .map(|css| (component.tag_name.clone(), css.clone()))
+        })
+        .collect();
+    let shadow_dom = parser
+        .component_shadow_dom_usage()
+        .map(|(tag_name, uses_shadow_dom)| (tag_name.to_string(), uses_shadow_dom))
+        .collect();
+    (css, shadow_dom)
+}
+
+fn apply_component_delivery(
+    protocol: &mut WebUIProtocol,
+    snapshot: ComponentDeliverySnapshot,
+    entry: &str,
+) {
+    protocol.set_css_strategy(webui_protocol::CssStrategy::Style);
+    for (tag_name, uses_shadow_dom) in snapshot.1 {
+        if !protocol.fragments.contains_key(&tag_name) {
+            continue;
+        }
+        protocol
+            .components
+            .entry(tag_name)
+            .or_default()
+            .uses_shadow_dom = uses_shadow_dom;
+    }
+    for (tag_name, css) in snapshot.0 {
+        if protocol.fragments.contains_key(&tag_name) {
+            protocol.components.entry(tag_name).or_default().css = css;
+        }
+    }
+    protocol.populate_style_closures(&[entry]);
+}
+
 /// Parse virtual files into a `WebUIProtocol` using the real `webui-parser`
 /// with the WebUI plugin.
+#[cfg(test)]
 pub(crate) fn parse_to_protocol(
     files: &HashMap<String, String>,
     entry: &str,
     projection_manifests: &[ProjectionManifest],
+) -> Result<WebUIProtocol, WasmError> {
+    parse_to_protocol_with_dom(files, entry, projection_manifests, DomStrategy::Shadow)
+}
+
+pub(crate) fn parse_to_protocol_with_dom(
+    files: &HashMap<String, String>,
+    entry: &str,
+    projection_manifests: &[ProjectionManifest],
+    dom: DomStrategy,
 ) -> Result<WebUIProtocol, WasmError> {
     let entry_html = files
         .get(entry)
         .ok_or_else(|| WasmError::MissingEntry(entry.to_string()))?;
 
-    let mut parser =
-        HtmlParser::with_plugin_options(Box::new(WebUIParserPlugin::new()), CssStrategy::Style);
+    let mut parser = HtmlParser::with_plugin_options(
+        Box::new(WebUIParserPlugin::new()),
+        (CssStrategy::Style, dom),
+    );
     register_components(&mut parser, files, entry)?;
     parser.parse(entry, entry_html)?;
+    let component_delivery = component_delivery_snapshot(&parser);
     let templates = match parser.take_plugin_artifacts()? {
         ParserPluginArtifacts::None => Vec::new(),
         ParserPluginArtifacts::ComponentTemplates(templates) => templates,
@@ -155,6 +232,7 @@ pub(crate) fn parse_to_protocol(
         component.navigation_mode = Some(navigation_mode);
         component.navigation_keys = navigation_keys;
     }
+    apply_component_delivery(&mut protocol, component_delivery, entry);
 
     fn merge_projection_manifests(
         manifests: &[ProjectionManifest],
@@ -243,6 +321,50 @@ mod tests {
         assert_eq!(component.hydration_mode, StateProjectionMode::All as i32);
         assert!(component.hydration_keys.is_empty());
         assert!(!component.template_json.is_empty());
+        assert!(component.uses_shadow_dom);
+        assert!(protocol.style_closures.contains_key("my-card"));
+    }
+
+    #[test]
+    fn parse_to_protocol_resolves_unwrapped_dom_strategy() {
+        let files = HashMap::from([
+            (
+                "index.html".to_string(),
+                "<html><body><my-card></my-card></body></html>".to_string(),
+            ),
+            (
+                "my-card.html".to_string(),
+                "<p>Light content</p>".to_string(),
+            ),
+            (
+                "my-card.css".to_string(),
+                ".card { display: block; }".to_string(),
+            ),
+        ]);
+
+        let shadow = parse_to_protocol(&files, "index.html", &[]).unwrap();
+        assert!(shadow.components["my-card"].uses_shadow_dom);
+        assert_eq!(
+            shadow.components["my-card"].css,
+            ".card { display: block; }"
+        );
+        assert_eq!(
+            shadow.style_closure("my-card").expect("Shadow closure"),
+            ["my-card"]
+        );
+
+        let protocol =
+            parse_to_protocol_with_dom(&files, "index.html", &[], DomStrategy::Light).unwrap();
+        assert_eq!(protocol.css_strategy(), webui_protocol::CssStrategy::Style);
+        assert!(!protocol.components["my-card"].uses_shadow_dom);
+        assert_eq!(
+            protocol.components["my-card"].css,
+            ".card { display: block; }"
+        );
+        assert_eq!(
+            protocol.style_closure("index.html").expect("entry closure"),
+            ["my-card"]
+        );
     }
 
     #[test]
diff --git a/crates/webui/README.md b/crates/webui/README.md
index c4b89b007..68876294d 100644
--- a/crates/webui/README.md
+++ b/crates/webui/README.md
@@ -11,13 +11,12 @@ cargo add webui
 ## Quick Start
 
 ```rust
-use webui::{build, BuildOptions, DomStrategy};
+use webui::{build, BuildOptions};
 
 // Build a WebUI application from an app directory
 let result = build(BuildOptions {
     app_dir: "my-app/src".into(),
     entry: "index.html".into(),
-    dom: DomStrategy::Shadow,
     ..Default::default()
 })?;
 
@@ -45,7 +44,7 @@ build_to_disk(
         app_dir: "src".into(),
         entry: "index.html".into(),
         css: CssStrategy::Link,        // or CssStrategy::Style for inline
-        dom: DomStrategy::Shadow,      // or DomStrategy::Light for light DOM
+        dom: DomStrategy::Light,       // opt into global Light + authored Shadow islands
         plugin: Some(Plugin::FastV3),    // @microsoft/fast-element 3.x hydration plugin
         legal_comments: LegalComments::Inline, // preserve legal CSS comments
         components: vec![],             // additional component sources
@@ -55,6 +54,13 @@ build_to_disk(
 )?;
 ```
 
+Unwrapped components default to a generated open Shadow root. Set
+`dom: DomStrategy::Light` to render unwrapped components as authored/global
+Light DOM. A sole bare `<template>` is also an explicit Light wrapper and is
+unwrapped; a sole authored `<template shadowrootmode="open">` remains Shadow.
+Light CSS must use ordinary selectors: `:host`, `:host-context`, and `::slotted`
+are rejected with `unsupported-light-css`.
+
 For CDN/cache-friendly Link-mode CSS and static component assets, override the
 asset output fields:
 
@@ -185,7 +191,7 @@ let partial = protocol.render_partial(
 | `WebUIHandler` | Rendering engine (stateless, thread-safe) |
 | `RenderOptions` | Render configuration (entry_id, request_path) |
 | `ResponseWriter` | Trait for streaming rendered output |
-| `CssStrategy` | CSS delivery mode (Link or Style) |
+| `CssStrategy` | CSS delivery mode (Link, Style, or Module) |
 | `WebUIError` | Error type for build/inspect operations |
 
 ## License
diff --git a/crates/webui/benches/component_assets_bench.rs b/crates/webui/benches/component_assets_bench.rs
index 51f10fc24..228931353 100644
--- a/crates/webui/benches/component_assets_bench.rs
+++ b/crates/webui/benches/component_assets_bench.rs
@@ -90,6 +90,7 @@ fn setup() -> Fixture {
             .or_default()
             .template_json = template_json(&tag);
     }
+    protocol.populate_style_closures(&["index.html"]);
 
     Fixture {
         protocol,
diff --git a/crates/webui/src/chunking.rs b/crates/webui/src/chunking.rs
new file mode 100644
index 000000000..f0bb532f3
--- /dev/null
+++ b/crates/webui/src/chunking.rs
@@ -0,0 +1,173 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+//! Consumer-set chunking shared by static component assets and bundled CSS.
+//!
+//! Both features answer the same question from different data: given units that
+//! a set of roots each pull in, which units can share one emitted file? A unit
+//! reached by exactly one root belongs to that root. Units reached by the *same
+//! set* of roots may be merged, because any root that needs one needs all of
+//! them — so a merged file is never over-delivered.
+//!
+//! Membership is a dense unit-major bitset of 64-bit words. Comparing two units'
+//! consumer sets is then a word-slice comparison rather than a set operation,
+//! which is what makes run grouping a single linear pass.
+//!
+//! This module is deliberately agnostic: units and consumers are opaque indices.
+//! Callers own the sort that decides which units are adjacent, and therefore own
+//! the grouping policy. Component assets sort by consumer row so every equal set
+//! merges; CSS bundling sorts by cascade order so chunks stay contiguous in the
+//! cascade and delivery order is preserved exactly.
+
+use std::ops::Range;
+
+/// A dense `unit × consumer` membership matrix.
+pub(crate) struct ConsumerMatrix {
+    words: usize,
+    bits: Vec<u64>,
+}
+
+impl ConsumerMatrix {
+    /// Allocate a zeroed matrix, or `None` when `units × consumers` is too
+    /// large to address.
+    pub(crate) fn new(units: usize, consumers: usize) -> Option<Self> {
+        let words = consumers.div_ceil(u64::BITS as usize);
+        let len = units.checked_mul(words)?;
+        // The element count alone can still exceed what is addressable in
+        // bytes, which `vec!` reports by aborting rather than returning.
+        len.checked_mul(size_of::<u64>())?;
+        Some(Self {
+            words,
+            bits: vec![0u64; len],
+        })
+    }
+
+    /// Record that `consumer` reaches `unit`.
+    pub(crate) fn insert(&mut self, unit: usize, consumer: usize) {
+        let offset = unit * self.words + consumer / u64::BITS as usize;
+        self.bits[offset] |= 1u64 << (consumer % u64::BITS as usize);
+    }
+
+    /// Borrow the consumer set of `unit`.
+    pub(crate) fn row(&self, unit: usize) -> &[u64] {
+        let start = unit * self.words;
+        &self.bits[start..start + self.words]
+    }
+
+    /// Count the consumers of `unit`.
+    pub(crate) fn count(&self, unit: usize) -> u32 {
+        self.row(unit).iter().map(|word| word.count_ones()).sum()
+    }
+
+    /// Return the lowest consumer of `unit`, or `0` when it has none.
+    ///
+    /// Callers gate this on [`Self::count`] being exactly one.
+    pub(crate) fn single(&self, unit: usize) -> usize {
+        for (index, word) in self.row(unit).iter().copied().enumerate() {
+            if word != 0 {
+                return index * u64::BITS as usize + word.trailing_zeros() as usize;
+            }
+        }
+        0
+    }
+
+    /// Expand the consumer set of `unit` into ascending consumer indices.
+    pub(crate) fn expand(&self, unit: usize) -> Vec<usize> {
+        let mut consumers = Vec::with_capacity(self.count(unit) as usize);
+        for (index, mut word) in self.row(unit).iter().copied().enumerate() {
+            while word != 0 {
+                consumers.push(index * u64::BITS as usize + word.trailing_zeros() as usize);
+                word &= word - 1;
+            }
+        }
+        consumers
+    }
+}
+
+/// Split `units` into maximal runs whose consumer sets are identical.
+///
+/// Runs are index ranges into `units`, so the caller keeps whatever ordering it
+/// established. Grouping only ever merges *adjacent* units, which is what lets a
+/// caller with an order constraint express it purely as a sort.
+pub(crate) fn group_runs(units: &[usize], matrix: &ConsumerMatrix) -> Vec<Range<usize>> {
+    let mut runs: Vec<Range<usize>> = Vec::new();
+    let mut start = 0usize;
+    while start < units.len() {
+        let row = matrix.row(units[start]);
+        let mut end = start + 1;
+        while end < units.len() && matrix.row(units[end]) == row {
+            end += 1;
+        }
+        runs.push(start..end);
+        start = end;
+    }
+    runs
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn matrix(units: usize, consumers: usize, edges: &[(usize, usize)]) -> ConsumerMatrix {
+        let mut matrix = ConsumerMatrix::new(units, consumers).expect("matrix");
+        for (unit, consumer) in edges {
+            matrix.insert(*unit, *consumer);
+        }
+        matrix
+    }
+
+    #[test]
+    fn counts_and_expands_consumer_sets() {
+        let matrix = matrix(3, 3, &[(0, 0), (1, 0), (1, 2), (2, 1)]);
+
+        assert_eq!(matrix.count(0), 1);
+        assert_eq!(matrix.single(0), 0);
+        assert_eq!(matrix.expand(0), [0]);
+        assert_eq!(matrix.count(1), 2);
+        assert_eq!(matrix.expand(1), [0, 2]);
+        assert_eq!(matrix.count(2), 1);
+        assert_eq!(matrix.single(2), 1);
+    }
+
+    #[test]
+    fn reports_no_consumers_for_unreached_units() {
+        let matrix = matrix(2, 2, &[(0, 1)]);
+
+        assert_eq!(matrix.count(1), 0);
+        assert!(matrix.expand(1).is_empty());
+        assert_eq!(matrix.single(1), 0);
+    }
+
+    #[test]
+    fn spans_consumer_sets_wider_than_one_word() {
+        let matrix = matrix(2, 130, &[(0, 0), (0, 129), (1, 129)]);
+
+        assert_eq!(matrix.count(0), 2);
+        assert_eq!(matrix.expand(0), [0, 129]);
+        assert_eq!(matrix.count(1), 1);
+        assert_eq!(matrix.single(1), 129);
+        assert_ne!(matrix.row(0), matrix.row(1));
+    }
+
+    #[test]
+    fn groups_only_adjacent_units_with_equal_consumer_sets() {
+        // Units 0 and 2 share a consumer set but are separated by unit 1, so
+        // the caller-established order keeps them in distinct runs.
+        let matrix = matrix(3, 2, &[(0, 0), (0, 1), (1, 0), (2, 0), (2, 1)]);
+
+        assert_eq!(group_runs(&[0, 1, 2], &matrix), [0..1, 1..2, 2..3]);
+        assert_eq!(group_runs(&[0, 2, 1], &matrix), [0..2, 2..3]);
+    }
+
+    #[test]
+    fn groups_an_empty_slice_into_no_runs() {
+        let matrix = matrix(1, 1, &[]);
+
+        assert!(group_runs(&[], &matrix).is_empty());
+    }
+
+    #[test]
+    fn rejects_a_matrix_that_cannot_be_indexed() {
+        assert!(ConsumerMatrix::new(usize::MAX, 64).is_none());
+    }
+}
diff --git a/crates/webui/src/component_assets.rs b/crates/webui/src/component_assets.rs
index 5fc0b2530..776471cbc 100644
--- a/crates/webui/src/component_assets.rs
+++ b/crates/webui/src/component_assets.rs
@@ -39,9 +39,12 @@ pub struct ComponentAssetGraph {
 }
 
 impl ComponentAssetGraph {
-    pub(crate) fn retain_entry_protocol(&mut self, protocol: &mut WebUIProtocol) {
+    pub(crate) fn retain_entry_protocol(
+        &mut self,
+        protocol: &mut WebUIProtocol,
+    ) -> Result<(), WebUIError> {
         if self.files.is_empty() {
-            return;
+            return Ok(());
         }
         protocol.component_asset_style_preloads = std::mem::take(&mut self.style_preloads);
         protocol
@@ -50,6 +53,64 @@ impl ComponentAssetGraph {
         protocol
             .components
             .retain(|name, _| self.entry_components.binary_search(name).is_ok());
+        let fragments = &protocol.fragments;
+        protocol
+            .style_closures
+            .retain(|name, _| fragments.contains_key(name));
+        let components = &protocol.components;
+        for closure in protocol.style_closures.values_mut() {
+            closure
+                .component_tags
+                .retain(|name| components.contains_key(name));
+        }
+        Self::retain_referenced_style_chunks(protocol)
+    }
+
+    fn retain_referenced_style_chunks(protocol: &mut WebUIProtocol) -> Result<(), WebUIError> {
+        if protocol.style_chunks.is_empty() {
+            return Ok(());
+        }
+
+        let mut retained = vec![false; protocol.style_chunks.len()];
+        for closure in protocol.style_closures.values() {
+            for &index in &closure.style_chunks {
+                if let Some(slot) = retained.get_mut(index as usize) {
+                    *slot = true;
+                }
+            }
+        }
+
+        let old_chunks = std::mem::take(&mut protocol.style_chunks);
+        let mut remap = vec![u32::MAX; old_chunks.len()];
+        protocol
+            .style_chunks
+            .reserve(retained.iter().filter(|keep| **keep).count());
+        for (old_index, (chunk, keep)) in old_chunks.into_iter().zip(retained).enumerate() {
+            if !keep {
+                continue;
+            }
+            remap[old_index] = u32::try_from(protocol.style_chunks.len()).map_err(|_| {
+                WebUIError::InvalidBuildOptions(
+                    "component asset style chunk count exceeds the protocol u32 index limit"
+                        .to_string(),
+                )
+            })?;
+            protocol.style_chunks.push(chunk);
+        }
+
+        for closure in protocol.style_closures.values_mut() {
+            closure.style_chunks.retain(|index| {
+                remap
+                    .get(*index as usize)
+                    .is_some_and(|mapped| *mapped != u32::MAX)
+            });
+            for index in &mut closure.style_chunks {
+                if let Some(mapped) = remap.get(*index as usize) {
+                    *index = *mapped;
+                }
+            }
+        }
+        Ok(())
     }
 }
 
@@ -156,3 +217,216 @@ fn validate_unique_asset_file_names(files: &[ComponentAssetFile]) -> Result<(),
     }
     Ok(())
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use webui_protocol::{ComponentData, ComponentStyleClosure, FragmentList, StyleChunk};
+
+    #[test]
+    fn retain_entry_protocol_prunes_style_closure_roots_and_resources() {
+        let mut protocol = WebUIProtocol::default();
+        for name in ["index.html", "kept-card", "removed-card"] {
+            protocol
+                .fragments
+                .insert(name.to_string(), FragmentList::default());
+        }
+        for name in ["kept-card", "removed-card"] {
+            protocol
+                .components
+                .insert(name.to_string(), ComponentData::default());
+        }
+        protocol.style_closures.insert(
+            "index.html".to_string(),
+            ComponentStyleClosure {
+                component_tags: vec!["kept-card".to_string(), "removed-card".to_string()],
+                style_chunks: Vec::new(),
+            },
+        );
+        protocol.style_closures.insert(
+            "removed-card".to_string(),
+            ComponentStyleClosure {
+                component_tags: vec!["removed-card".to_string()],
+                style_chunks: Vec::new(),
+            },
+        );
+        let mut graph = ComponentAssetGraph {
+            files: vec![ComponentAssetFile {
+                name: "root.js".to_string(),
+                content: String::new(),
+            }],
+            metafile: None,
+            style_preloads: Vec::new(),
+            entry_fragments: vec!["index.html".to_string(), "kept-card".to_string()],
+            entry_components: vec!["kept-card".to_string()],
+        };
+
+        graph
+            .retain_entry_protocol(&mut protocol)
+            .expect("retain entry protocol");
+
+        assert_eq!(
+            protocol.style_closures["index.html"].component_tags,
+            ["kept-card"]
+        );
+        assert!(!protocol.style_closures.contains_key("removed-card"));
+    }
+
+    #[test]
+    fn retain_entry_protocol_prunes_and_remaps_style_chunks() {
+        let mut protocol = WebUIProtocol::default();
+        for name in ["index.html", "kept-card", "removed-card"] {
+            protocol
+                .fragments
+                .insert(name.to_string(), FragmentList::default());
+        }
+        for name in ["kept-card", "removed-card"] {
+            protocol
+                .components
+                .insert(name.to_string(), ComponentData::default());
+        }
+        protocol.style_chunks = vec![
+            StyleChunk {
+                name: "removed".to_string(),
+                css: ".removed{}".to_string(),
+                component_tags: vec!["removed-card".to_string()],
+                ..Default::default()
+            },
+            StyleChunk {
+                name: "kept".to_string(),
+                css: ".kept{}".to_string(),
+                component_tags: vec!["kept-card".to_string()],
+                ..Default::default()
+            },
+        ];
+        protocol.style_closures.insert(
+            "index.html".to_string(),
+            ComponentStyleClosure {
+                component_tags: vec!["kept-card".to_string()],
+                style_chunks: vec![1],
+            },
+        );
+        protocol.style_closures.insert(
+            "removed-card".to_string(),
+            ComponentStyleClosure {
+                component_tags: vec!["removed-card".to_string()],
+                style_chunks: vec![0],
+            },
+        );
+        let mut graph = ComponentAssetGraph {
+            files: vec![ComponentAssetFile {
+                name: "removed-card.js".to_string(),
+                content: String::new(),
+            }],
+            metafile: None,
+            style_preloads: Vec::new(),
+            entry_fragments: vec!["index.html".to_string(), "kept-card".to_string()],
+            entry_components: vec!["kept-card".to_string()],
+        };
+
+        graph
+            .retain_entry_protocol(&mut protocol)
+            .expect("retain entry protocol");
+
+        assert_eq!(protocol.style_chunks.len(), 1);
+        assert_eq!(protocol.style_chunks[0].name, "kept");
+        assert_eq!(protocol.style_closures["index.html"].style_chunks, [0]);
+    }
+
+    #[test]
+    fn component_asset_rejects_missing_style_closure_metadata() {
+        let mut protocol = WebUIProtocol::default();
+        protocol
+            .fragments
+            .insert("index.html".to_string(), FragmentList::default());
+        protocol.fragments.insert(
+            "legacy-card".to_string(),
+            FragmentList {
+                fragments: vec![webui_protocol::WebUIFragment::raw("<p>Legacy</p>")],
+                contains_boundary: false,
+            },
+        );
+        protocol.components.insert(
+            "legacy-card".to_string(),
+            ComponentData {
+                template_json: r#"{"h":"<p>Legacy</p>"}"#.to_string(),
+                css: ".legacy{display:block}".to_string(),
+                ..Default::default()
+            },
+        );
+
+        let error = render_component_assets(
+            &protocol,
+            "index.html",
+            &["legacy-card".to_string()],
+            "[name].[ext]",
+            false,
+        )
+        .expect_err("current component assets require style closure metadata");
+        assert!(error
+            .to_string()
+            .contains("requires missing style closure metadata"));
+    }
+
+    #[test]
+    fn component_asset_serializes_closures_only_for_owned_components() {
+        let mut protocol = WebUIProtocol::default();
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Style);
+        protocol.fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![webui_protocol::WebUIFragment::component("entry-card")],
+                contains_boundary: false,
+            },
+        );
+        protocol
+            .fragments
+            .insert("entry-card".to_string(), FragmentList::default());
+        protocol.fragments.insert(
+            "deferred-card".to_string(),
+            FragmentList {
+                fragments: vec![webui_protocol::WebUIFragment::component("entry-card")],
+                contains_boundary: false,
+            },
+        );
+        for tag in ["entry-card", "deferred-card"] {
+            protocol.components.insert(
+                tag.to_string(),
+                ComponentData {
+                    template_json: r#"{"h":"<div></div>"}"#.to_string(),
+                    css: format!(".{tag}{{display:block}}"),
+                    ..Default::default()
+                },
+            );
+        }
+        protocol.style_closures.insert(
+            "entry-card".to_string(),
+            ComponentStyleClosure {
+                component_tags: vec!["entry-card".to_string()],
+                style_chunks: Vec::new(),
+            },
+        );
+        protocol.style_closures.insert(
+            "deferred-card".to_string(),
+            ComponentStyleClosure {
+                component_tags: vec!["deferred-card".to_string(), "entry-card".to_string()],
+                style_chunks: Vec::new(),
+            },
+        );
+
+        let graph = render_component_assets(
+            &protocol,
+            "index.html",
+            &["deferred-card".to_string()],
+            "[name].[ext]",
+            false,
+        )
+        .expect("render component asset");
+        let asset = graph.files.first().expect("deferred root asset");
+
+        assert!(asset
+            .content
+            .contains(r#""closures":{"deferred-card":["deferred-card","entry-card"]}"#));
+        assert!(!asset.content.contains(r#""entry-card":["entry-card"]"#));
+    }
+}
diff --git a/crates/webui/src/component_assets/graph.rs b/crates/webui/src/component_assets/graph.rs
index 03dbc38f8..5da5fce31 100644
--- a/crates/webui/src/component_assets/graph.rs
+++ b/crates/webui/src/component_assets/graph.rs
@@ -6,6 +6,7 @@ use std::collections::HashSet;
 use webui_protocol::WebUIProtocol;
 
 use super::traversal::{has_template_payload, CollectedClosure, GraphIndex, TraversalScratch};
+use crate::chunking::ConsumerMatrix;
 use crate::WebUIError;
 
 pub(super) struct AssetGraphPlan<'a> {
@@ -82,17 +83,12 @@ pub(super) fn plan_component_assets<'a>(
         ));
     }
 
-    let words = canonical_roots.len().div_ceil(u64::BITS as usize);
-    let matrix_len = index
-        .component_names
-        .len()
-        .checked_mul(words)
+    let mut consumers = ConsumerMatrix::new(index.component_names.len(), canonical_roots.len())
         .ok_or_else(component_graph_too_large)?;
-    let mut consumers = vec![0u64; matrix_len];
     for (root_id, closure) in root_closures.iter().enumerate() {
         for component in &closure.components {
             if !entry_mask[*component] {
-                set_consumer(&mut consumers, words, *component, root_id);
+                consumers.insert(*component, root_id);
             }
         }
     }
@@ -103,17 +99,17 @@ pub(super) fn plan_component_assets<'a>(
         if is_entry_component {
             continue;
         }
-        let row = consumer_row(&consumers, words, component);
-        match consumer_count(row) {
+        match consumers.count(component) {
             0 => {}
-            1 => local_components[single_consumer(row)].push(component),
+            1 => local_components[consumers.single(component)].push(component),
             _ => shared_components.push(component),
         }
     }
 
+    // Sorting by consumer set makes every equal set adjacent, so run grouping
+    // merges all of them. The name tiebreak keeps chunk membership stable.
     shared_components.sort_unstable_by(|left, right| {
-        let rows =
-            consumer_row(&consumers, words, *left).cmp(consumer_row(&consumers, words, *right));
+        let rows = consumers.row(*left).cmp(consumers.row(*right));
         if rows == Ordering::Equal {
             index.component_names[*left].cmp(index.component_names[*right])
         } else {
@@ -121,12 +117,8 @@ pub(super) fn plan_component_assets<'a>(
         }
     });
 
-    let mut chunks = group_shared_components(
-        &shared_components,
-        &consumers,
-        words,
-        &index.component_names,
-    );
+    let mut chunks =
+        group_shared_components(&shared_components, &consumers, &index.component_names);
     chunks.sort_unstable_by(|left, right| left.name.cmp(&right.name));
 
     let mut root_chunk_ids = vec![Vec::new(); canonical_roots.len()];
@@ -206,64 +198,22 @@ fn finalize_plan<'a>(
 
 fn group_shared_components(
     components: &[usize],
-    consumers: &[u64],
-    words: usize,
+    consumers: &ConsumerMatrix,
     component_names: &[&str],
 ) -> Vec<ChunkPlan> {
-    let mut chunks = Vec::new();
-    let mut start = 0usize;
-    while start < components.len() {
-        let row = consumer_row(consumers, words, components[start]);
-        let mut end = start + 1;
-        while end < components.len() && consumer_row(consumers, words, components[end]) == row {
-            end += 1;
-        }
-        let mut chunk_components = components[start..end].to_vec();
-        chunk_components.sort_unstable_by_key(|component| component_names[*component]);
-        let name = format!("chunk-{}", component_names[chunk_components[0]]);
-        chunks.push(ChunkPlan {
-            name,
-            components: chunk_components,
-            consumers: consumers_from_row(row),
-        });
-        start = end;
-    }
-    chunks
-}
-
-fn set_consumer(consumers: &mut [u64], words: usize, component: usize, root: usize) {
-    let offset = component * words + root / u64::BITS as usize;
-    consumers[offset] |= 1u64 << (root % u64::BITS as usize);
-}
-
-fn consumer_row(consumers: &[u64], words: usize, component: usize) -> &[u64] {
-    let start = component * words;
-    &consumers[start..start + words]
-}
-
-fn consumer_count(row: &[u64]) -> u32 {
-    row.iter().map(|word| word.count_ones()).sum()
-}
-
-fn single_consumer(row: &[u64]) -> usize {
-    for (word_index, word) in row.iter().copied().enumerate() {
-        if word != 0 {
-            return word_index * u64::BITS as usize + word.trailing_zeros() as usize;
-        }
-    }
-    0
-}
-
-fn consumers_from_row(row: &[u64]) -> Vec<usize> {
-    let mut consumers = Vec::with_capacity(consumer_count(row) as usize);
-    for (word_index, mut word) in row.iter().copied().enumerate() {
-        while word != 0 {
-            let bit = word.trailing_zeros() as usize;
-            consumers.push(word_index * u64::BITS as usize + bit);
-            word &= word - 1;
-        }
-    }
-    consumers
+    crate::chunking::group_runs(components, consumers)
+        .into_iter()
+        .map(|run| {
+            let mut chunk_components = components[run.clone()].to_vec();
+            chunk_components.sort_unstable_by_key(|component| component_names[*component]);
+            let name = format!("chunk-{}", component_names[chunk_components[0]]);
+            ChunkPlan {
+                name,
+                components: chunk_components,
+                consumers: consumers.expand(components[run.start]),
+            }
+        })
+        .collect()
 }
 
 fn validate_roots(protocol: &WebUIProtocol, roots: &[String]) -> Result<Vec<String>, WebUIError> {
diff --git a/crates/webui/src/component_assets/payload.rs b/crates/webui/src/component_assets/payload.rs
index a6c27ad01..e1794c295 100644
--- a/crates/webui/src/component_assets/payload.rs
+++ b/crates/webui/src/component_assets/payload.rs
@@ -3,19 +3,25 @@
 
 use rayon::prelude::*;
 use std::borrow::Cow;
-use webui_handler::css_module;
-use webui_protocol::WebUIProtocol;
+use webui_protocol::{CssStrategy, WebUIProtocol};
 
 use super::graph::AssetGraphPlan;
 use super::json::encode_json_string;
 use crate::WebUIError;
 
 pub(super) struct RenderedComponent<'a> {
-    pub style: Option<String>,
+    pub resource: Option<RenderedStyleResource<'a>>,
     pub template: Cow<'a, str>,
     pub functions: Option<&'a str>,
 }
 
+#[derive(Clone, Copy)]
+pub(super) enum RenderedStyleResource<'a> {
+    Link(&'a str),
+    Style(&'a str),
+    Module(&'a str),
+}
+
 pub(super) fn render_component_payloads<'a>(
     protocol: &'a WebUIProtocol,
     plan: &AssetGraphPlan,
@@ -57,15 +63,7 @@ fn render_component<'a>(
             "component asset payload for <{tag}> is missing protocol metadata"
         ))
     })?;
-    let style = if component.css.is_empty() {
-        None
-    } else {
-        let importmap = css_module::build_importmap_tag(tag, &component.css, None);
-        Some(encode_json_string(
-            &importmap,
-            "component asset templateStyles entry",
-        )?)
-    };
+    let resource = render_style_resource(protocol, tag)?;
     let template = if component.template_json.is_empty() {
         Cow::Owned(encode_json_string(
             &component.template,
@@ -77,8 +75,33 @@ fn render_component<'a>(
     let functions =
         (!component.template_functions.is_empty()).then_some(component.template_functions.as_str());
     Ok(RenderedComponent {
-        style,
+        resource,
         template,
         functions,
     })
 }
+
+/// Resolve a component's delivered style resource, tagged with the shape the
+/// asset payload should emit.
+///
+/// The strategy-dependent field selection lives in
+/// [`WebUIProtocol::component_style_resource`]; this only classifies the result
+/// so the serializer knows which JSON shape to write.
+pub(super) fn render_style_resource<'a>(
+    protocol: &'a WebUIProtocol,
+    tag: &str,
+) -> Result<Option<RenderedStyleResource<'a>>, WebUIError> {
+    if !protocol.components.contains_key(tag) {
+        return Err(WebUIError::InvalidBuildOptions(format!(
+            "component asset style resource for <{tag}> is missing protocol metadata"
+        )));
+    }
+    let Some(resource) = protocol.component_style_resource(tag) else {
+        return Ok(None);
+    };
+    Ok(Some(match protocol.css_strategy() {
+        CssStrategy::Link => RenderedStyleResource::Link(resource),
+        CssStrategy::Style => RenderedStyleResource::Style(resource),
+        CssStrategy::Module => RenderedStyleResource::Module(resource),
+    }))
+}
diff --git a/crates/webui/src/component_assets/render.rs b/crates/webui/src/component_assets/render.rs
index 06786eaa7..3466f92ef 100644
--- a/crates/webui/src/component_assets/render.rs
+++ b/crates/webui/src/component_assets/render.rs
@@ -6,7 +6,9 @@ use webui_protocol::WebUIProtocol;
 
 use super::graph::{AssetGraphPlan, ChunkPlan, RootPlan};
 use super::payload::render_component_payloads;
-use super::serialize::{render_asset, PendingAsset, RenderedAsset, RenderedOutput, ResolvedImport};
+use super::serialize::{
+    render_asset, AssetRenderOptions, PendingAsset, RenderedAsset, RenderedOutput, ResolvedImport,
+};
 use super::ComponentAssetFile;
 use crate::{AssetFileNameTemplate, WebUIError};
 
@@ -22,21 +24,18 @@ pub(super) fn render_component_asset_graph(
     emit_metafile: bool,
 ) -> Result<RenderedGraph, WebUIError> {
     let payloads = render_component_payloads(protocol, plan)?;
+    let render_options = AssetRenderOptions {
+        file_name_template,
+        emit_metafile,
+        protocol,
+    };
     let chunks = if plan.chunks.is_empty() {
         Vec::new()
     } else {
         let chunk_results: Vec<Result<RenderedAsset, WebUIError>> = plan
             .chunks
             .par_iter()
-            .map(|chunk| {
-                render_asset(
-                    &pending_chunk(chunk),
-                    plan,
-                    &payloads,
-                    file_name_template,
-                    emit_metafile,
-                )
-            })
+            .map(|chunk| render_asset(&pending_chunk(chunk), plan, &payloads, &render_options))
             .collect();
         collect_rendered(chunk_results)?
     };
@@ -46,8 +45,7 @@ pub(super) fn render_component_asset_graph(
             &pending_root(&plan.roots[0], plan, &chunks),
             plan,
             &payloads,
-            file_name_template,
-            emit_metafile,
+            &render_options,
         )?]
     } else {
         let root_results: Vec<Result<RenderedAsset, WebUIError>> = plan
@@ -58,8 +56,7 @@ pub(super) fn render_component_asset_graph(
                     &pending_root(root, plan, &chunks),
                     plan,
                     &payloads,
-                    file_name_template,
-                    emit_metafile,
+                    &render_options,
                 )
             })
             .collect();
diff --git a/crates/webui/src/component_assets/serialize.rs b/crates/webui/src/component_assets/serialize.rs
index 7b79430be..7e95a6116 100644
--- a/crates/webui/src/component_assets/serialize.rs
+++ b/crates/webui/src/component_assets/serialize.rs
@@ -3,12 +3,13 @@
 
 use super::graph::AssetGraphPlan;
 use super::json::{push_json_string, push_u64};
-use super::payload::RenderedComponent;
+use super::payload::{render_style_resource, RenderedComponent, RenderedStyleResource};
 use super::ComponentAssetFile;
 use crate::{AssetFileNameTemplate, WebUIError};
+use webui_protocol::WebUIProtocol;
 
 const ASSET_TYPE: &str = "webui-component-asset";
-const ASSET_VERSION: u64 = 2;
+const ASSET_VERSION: u64 = 3;
 const COMPONENT_ASSET_EXT: &str = "webui.js";
 
 pub(super) struct RenderedOutput {
@@ -41,15 +42,28 @@ pub(super) struct RenderedAsset {
     pub output: Option<RenderedOutput>,
 }
 
+pub(super) struct AssetRenderOptions<'a> {
+    pub file_name_template: &'a AssetFileNameTemplate,
+    pub emit_metafile: bool,
+    pub protocol: &'a WebUIProtocol,
+}
+
+struct StyleResourceWriter<'a, 'data> {
+    out: &'a mut String,
+    plan: &'a AssetGraphPlan<'data>,
+    payloads: &'a [Option<RenderedComponent<'data>>],
+    protocol: &'data WebUIProtocol,
+    attribution: &'a mut [usize],
+}
+
 pub(super) fn render_asset(
     pending: &PendingAsset,
     plan: &AssetGraphPlan,
     payloads: &[Option<RenderedComponent<'_>>],
-    file_name_template: &AssetFileNameTemplate,
-    emit_metafile: bool,
+    options: &AssetRenderOptions<'_>,
 ) -> Result<RenderedAsset, WebUIError> {
     let mut js = String::with_capacity(estimate_asset_size(pending, plan, payloads));
-    let mut attribution = if emit_metafile {
+    let mut attribution = if options.emit_metafile {
         vec![0usize; pending.components.len()]
     } else {
         Vec::new()
@@ -77,9 +91,31 @@ pub(super) fn render_asset(
     push_component_id_array(&mut js, &pending.external_components, plan)?;
     js.push_str("],\"imports\":[");
     push_imports(&mut js, &pending.imports, plan)?;
-    js.push_str("],\"templateStyles\":[");
-    push_styles(&mut js, &pending.components, payloads, &mut attribution)?;
-    js.push_str("],\"templates\":{");
+    js.push_str("],\"componentStyles\":{\"version\":1,\"strategy\":\"");
+    js.push_str(options.protocol.css_strategy().wire_name());
+    js.push_str("\",\"resources\":{");
+    {
+        let mut writer = StyleResourceWriter {
+            out: &mut js,
+            plan,
+            payloads,
+            protocol: options.protocol,
+            attribution: &mut attribution,
+        };
+        let written_resources =
+            push_style_resources(&mut writer, &pending.components, 0, true, true)?;
+        push_style_resources(
+            &mut writer,
+            &pending.external_components,
+            written_resources,
+            false,
+            false,
+        )?;
+    }
+    js.push_str("},\"closures\":{");
+    push_style_closures(&mut js, pending, plan, options.protocol)?;
+    js.push_str("}}");
+    js.push_str(",\"templates\":{");
     push_templates(
         &mut js,
         &pending.components,
@@ -106,9 +142,12 @@ pub(super) fn render_asset(
     }
     js.push_str("};\nexport default asset;\n");
 
-    let name =
-        file_name_template.resolve(&pending.logical_name, COMPONENT_ASSET_EXT, js.as_bytes());
-    let output = emit_metafile.then(|| {
+    let name = options.file_name_template.resolve(
+        &pending.logical_name,
+        COMPONENT_ASSET_EXT,
+        js.as_bytes(),
+    );
+    let output = options.emit_metafile.then(|| {
         let mut dynamic_components: Vec<String> = pending
             .imports
             .iter()
@@ -153,7 +192,14 @@ fn estimate_asset_size(
         size += plan.component_names[*component].len() * 3 + 16;
         if let Some(payload) = payloads.get(*component).and_then(Option::as_ref) {
             size += payload.template.len();
-            size += payload.style.as_ref().map_or(0, String::len);
+            size += payload.resource.as_ref().map_or(0, |resource| {
+                let bytes = match resource {
+                    RenderedStyleResource::Link(value)
+                    | RenderedStyleResource::Style(value)
+                    | RenderedStyleResource::Module(value) => value.len(),
+                };
+                bytes + 64
+            });
             size += payload.functions.map_or(0, str::len);
         }
     }
@@ -217,29 +263,96 @@ fn push_imports(
     Ok(())
 }
 
-fn push_styles(
-    out: &mut String,
+fn push_style_resources(
+    writer: &mut StyleResourceWriter<'_, '_>,
     components: &[usize],
-    payloads: &[Option<RenderedComponent<'_>>],
-    attribution: &mut [usize],
-) -> Result<(), WebUIError> {
-    let mut written = 0usize;
+    mut written: usize,
+    attribute_bytes: bool,
+    resolve_relative_href: bool,
+) -> Result<usize, WebUIError> {
     for (index, component) in components.iter().copied().enumerate() {
-        let payload = payload(payloads, component)?;
-        let Some(style) = &payload.style else {
+        let resource = match writer.payloads.get(component).and_then(Option::as_ref) {
+            Some(payload) => payload.resource,
+            None => render_style_resource(writer.protocol, writer.plan.component_names[component])?,
+        };
+        let Some(resource) = resource else {
             continue;
         };
-        let start = out.len();
+        let start = writer.out.len();
         if written > 0 {
-            out.push(',');
+            writer.out.push(',');
+        }
+        let tag = writer.plan.component_names[component];
+        push_json_string(writer.out, tag, "component style resource ID")?;
+        match &resource {
+            RenderedStyleResource::Link(href) => {
+                writer.out.push_str(":{\"kind\":\"link\",\"href\":");
+                if resolve_relative_href && is_relative_href(href) {
+                    writer.out.push_str("new URL(");
+                    push_json_string(writer.out, href, "component style href")?;
+                    writer.out.push_str(",import.meta.url).href");
+                } else {
+                    push_json_string(writer.out, href, "component style href")?;
+                }
+                writer.out.push('}');
+            }
+            RenderedStyleResource::Style(css) => {
+                writer.out.push_str(":{\"kind\":\"style\",\"css\":");
+                push_json_string(writer.out, css, "component style CSS")?;
+                writer.out.push('}');
+            }
+            RenderedStyleResource::Module(css) => {
+                writer.out.push_str(":{\"kind\":\"module\",\"specifier\":");
+                push_json_string(writer.out, tag, "component style module specifier")?;
+                writer.out.push_str(",\"css\":");
+                push_json_string(writer.out, css, "component style module CSS")?;
+                writer.out.push('}');
+            }
+        }
+        if attribute_bytes {
+            add_attribution(writer.attribution, index, writer.out.len() - start);
         }
-        out.push_str(style);
-        add_attribution(attribution, index, out.len() - start);
         written += 1;
     }
+    Ok(written)
+}
+
+fn push_style_closures(
+    out: &mut String,
+    pending: &PendingAsset,
+    plan: &AssetGraphPlan,
+    protocol: &WebUIProtocol,
+) -> Result<(), WebUIError> {
+    for (index, component) in pending.components.iter().copied().enumerate() {
+        if index > 0 {
+            out.push(',');
+        }
+        let tag = plan.component_names[component];
+        push_json_string(out, tag, "component style closure root")?;
+        out.push_str(":[");
+        let closure = protocol.style_closures.get(tag).ok_or_else(|| {
+            WebUIError::InvalidBuildOptions(format!(
+                "component asset graph requires missing style closure metadata for <{tag}>"
+            ))
+        })?;
+        for (closure_index, resource) in closure.component_tags.iter().enumerate() {
+            if closure_index > 0 {
+                out.push(',');
+            }
+            push_json_string(out, resource, "component style closure resource")?;
+        }
+        out.push(']');
+    }
     Ok(())
 }
 
+fn is_relative_href(href: &str) -> bool {
+    !href.starts_with('/')
+        && !href.starts_with('#')
+        && !href.starts_with("//")
+        && !href.contains(':')
+}
+
 fn push_templates(
     out: &mut String,
     components: &[usize],
diff --git a/crates/webui/src/lib.rs b/crates/webui/src/lib.rs
index e411e6fc0..c012c7b88 100644
--- a/crates/webui/src/lib.rs
+++ b/crates/webui/src/lib.rs
@@ -20,12 +20,14 @@
 //! println!("Built {} fragments in {:?}", result.stats.fragment_count, result.stats.duration);
 //! ```
 
+mod chunking;
 mod component_assets;
 mod error;
 mod module_preload;
 mod projection;
 pub mod server;
 pub mod streaming;
+mod style_bundle;
 
 pub use component_assets::{render_component_assets, ComponentAssetFile, ComponentAssetGraph};
 pub use error::WebUIError;
@@ -253,8 +255,15 @@ pub struct BuildOptions {
     pub entry: String,
     /// CSS delivery strategy for component stylesheets.
     pub css: CssStrategy,
-    /// DOM strategy for component rendering (shadow or light).
+    /// Fallback DOM strategy for components without an authored Shadow root.
     pub dom: DomStrategy,
+    /// Whether to merge component stylesheets into bundled chunks.
+    ///
+    /// Composes with [`BuildOptions::css`] instead of replacing it: bundling
+    /// decides how stylesheets are grouped, the strategy decides how they reach
+    /// the page. Stylesheets reached from more than one CSS tree are split into
+    /// their own chunk so they are downloaded and cached once.
+    pub css_bundle: bool,
     /// Framework plugin to load.
     pub plugin: Option<Plugin>,
     /// Additional component sources (npm packages or local paths).
@@ -314,6 +323,7 @@ impl Default for BuildOptions {
             entry: "index.html".to_string(),
             css: CssStrategy::Link,
             dom: DomStrategy::Shadow,
+            css_bundle: false,
             plugin: None,
             components: Vec::new(),
             component_asset_roots: Vec::new(),
@@ -513,6 +523,9 @@ fn build_protocol_inner(options: &BuildOptions) -> Result<RawBuildOutput, WebUIE
     if projection_enabled && options.plugin != Some(Plugin::WebUI) {
         return Err(projection::incompatible_plugin_error());
     }
+    if options.css_bundle && options.css == CssStrategy::Module {
+        return Err(css_bundle_module_error());
+    }
     let parser_options = ParserOptions::try_new(
         options.css,
         options.dom,
@@ -614,6 +627,10 @@ fn build_protocol_inner(options: &BuildOptions) -> Result<RawBuildOutput, WebUIE
                 .map(|css| (component.tag_name.clone(), css.clone()))
         })
         .collect();
+    let component_shadow_dom_usage: Vec<(String, bool)> = parser
+        .component_shadow_dom_usage()
+        .map(|(tag_name, uses_shadow_dom)| (tag_name.to_string(), uses_shadow_dom))
+        .collect();
 
     // Collect CSS token analysis before consuming the parser.
     let token_analysis = parser.token_analysis();
@@ -694,31 +711,40 @@ fn build_protocol_inner(options: &BuildOptions) -> Result<RawBuildOutput, WebUIE
         warnings.append(&mut preloads.warnings);
     }
 
-    // Record build-wide strategies so the handler can decide rendering behavior.
+    // Record CSS delivery and per-component Shadow DOM ownership.
     protocol.set_css_strategy(match options.css {
         CssStrategy::Link => webui_protocol::CssStrategy::Link,
         CssStrategy::Style => webui_protocol::CssStrategy::Style,
         CssStrategy::Module => webui_protocol::CssStrategy::Module,
     });
-    protocol.set_dom_strategy(match options.dom {
-        DomStrategy::Shadow => webui_protocol::DomStrategy::Shadow,
-        DomStrategy::Light => webui_protocol::DomStrategy::Light,
-    });
+    for (tag_name, uses_shadow_dom) in component_shadow_dom_usage {
+        if !protocol.fragments.contains_key(&tag_name) {
+            continue;
+        }
+        protocol
+            .components
+            .entry(tag_name)
+            .or_default()
+            .uses_shadow_dom = uses_shadow_dom;
+    }
     protocol.component_render_css = component_render_css;
 
-    // Process component CSS in a single pass: store Module CSS content,
+    // Process component CSS in a single pass: retain compiled Style/Module CSS,
     // set Link-strategy css_href, and collect external CSS files.
-    let is_module = options.css == CssStrategy::Module;
-    let is_link = options.css == CssStrategy::Link;
+    let stores_css = options.css != CssStrategy::Link;
     let mut css_files: Vec<(String, String)> = Vec::new();
     let mut emitted_names: HashSet<String> = HashSet::new();
+    let mut bundle_inputs: Vec<(String, String)> = Vec::new();
     for (tag, css) in css_snapshot {
         if !protocol.fragments.contains_key(&tag) {
             continue;
         }
-        if is_module {
-            protocol.components.entry(tag).or_default().css = css.trim().to_string();
-        } else if is_link {
+        if options.css_bundle {
+            bundle_inputs.push((tag.clone(), css.clone()));
+        }
+        if stores_css {
+            protocol.components.entry(tag).or_default().css = css;
+        } else {
             let resolved = css_link_options.resolve(&tag, &css);
             if !emitted_names.insert(resolved.filename.clone()) {
                 return Err(WebUIError::InvalidBuildOptions(format!(
@@ -729,8 +755,46 @@ fn build_protocol_inner(options: &BuildOptions) -> Result<RawBuildOutput, WebUIE
             protocol.components.entry(tag).or_default().css_href = resolved.href;
             css_files.push((resolved.filename, css));
         }
-        // Style strategy: CSS is already baked into raw fragments by the
-        // parser — nothing to store in the protocol or emit as files.
+    }
+
+    // CSS order is load-bearing, so compute this independently from the sorted
+    // component-asset reachability sets.
+    protocol.populate_style_closures(&[options.entry.as_str()]);
+
+    if options.css_bundle {
+        // Chunks are planned from the closures above, so this has to run after
+        // them and after per-component resources exist to plan over.
+        let by_tag = bundle_inputs
+            .iter()
+            .map(|(tag, css)| (tag.as_str(), css.as_str()))
+            .collect();
+        let chunk_files = style_bundle::bundle_style_chunks(
+            &mut protocol,
+            options.entry.as_str(),
+            &by_tag,
+            &css_link_options,
+        )?;
+        if !stores_css {
+            // Keep component files as compatibility and independently-loaded
+            // component fallbacks. Current handlers render chunk links, so these
+            // files add no requests to the normal bundled path.
+            for (filename, css) in chunk_files {
+                if emitted_names.insert(filename.clone()) {
+                    css_files.push((filename, css));
+                    continue;
+                }
+                // A single-component chunk resolves to that component's own
+                // filename and bytes, so the file is already written.
+                let identical = css_files
+                    .iter()
+                    .any(|(name, existing)| *name == filename && *existing == css);
+                if !identical {
+                    return Err(WebUIError::InvalidBuildOptions(format!(
+                        "CSS filename collision between bundled chunk '{filename}' and a component stylesheet of the same name. Adjust the asset filename template to include [hash] or another unique segment."
+                    )));
+                }
+            }
+        }
     }
 
     // Store compiled client templates in the protocol so any host server can
@@ -780,7 +844,7 @@ fn build_protocol_inner(options: &BuildOptions) -> Result<RawBuildOutput, WebUIE
         &options.css_file_name_template,
         options.metafile,
     )?;
-    component_asset_graph.retain_entry_protocol(&mut protocol);
+    component_asset_graph.retain_entry_protocol(&mut protocol)?;
     // Strict projection coverage applies to scripted components retained in the
     // entry protocol. Asset-only roots use their static template payloads and
     // never participate in protocol projection.
@@ -905,6 +969,14 @@ fn output_file_collision_error(name: &OsStr) -> WebUIError {
     ))
 }
 
+#[cold]
+#[inline(never)]
+fn css_bundle_module_error() -> WebUIError {
+    WebUIError::InvalidBuildOptions(
+        "CSS bundling is not supported with the Module strategy. Module builds already inline every stylesheet as a data URI, so there are no requests to merge, and their import-map specifiers are resolved per component before chunks exist. Use --css link (or --css style) with --css-bundle, or drop --css-bundle.".to_string(),
+    )
+}
+
 #[cfg(test)]
 #[allow(clippy::disallowed_methods)]
 mod tests {
@@ -949,6 +1021,13 @@ mod tests {
         }
     }
 
+    fn light_options(app_dir: &Path) -> BuildOptions {
+        BuildOptions {
+            dom: DomStrategy::Light,
+            ..default_options(app_dir)
+        }
+    }
+
     #[test]
     fn test_build_simple_html() {
         let app = create_app_dir(&[("index.html", "<h1>Hello</h1>")]);
@@ -964,6 +1043,90 @@ mod tests {
         );
     }
 
+    #[test]
+    fn light_build_uses_light_unless_component_authors_shadow() {
+        let app = create_app_dir(&[
+            (
+                "index.html",
+                "<my-card></my-card><shadow-card></shadow-card>",
+            ),
+            ("my-card.html", "<p>content</p>"),
+            (
+                "shadow-card.html",
+                r#"<template shadowrootmode="open"><p>shadow</p></template>"#,
+            ),
+        ]);
+
+        let result = build(BuildOptions {
+            app_dir: app.path().to_path_buf(),
+            dom: DomStrategy::Light,
+            ..BuildOptions::default()
+        })
+        .unwrap();
+        assert!(!result.protocol.component_uses_shadow_dom("my-card"));
+        assert!(result.protocol.component_uses_shadow_dom("shadow-card"));
+        let light_html: String = result.protocol.fragments["my-card"]
+            .fragments
+            .iter()
+            .filter_map(|fragment| match fragment.fragment.as_ref() {
+                Some(Fragment::Raw(raw)) => Some(raw.value.as_str()),
+                _ => None,
+            })
+            .collect();
+        assert!(!light_html.contains("shadowrootmode"));
+
+        let shadow_html: String = result.protocol.fragments["shadow-card"]
+            .fragments
+            .iter()
+            .filter_map(|fragment| match fragment.fragment.as_ref() {
+                Some(Fragment::Raw(raw)) => Some(raw.value.as_str()),
+                _ => None,
+            })
+            .collect();
+        assert!(shadow_html.contains(r#"<template shadowrootmode="open">"#));
+    }
+
+    #[test]
+    fn build_defaults_unwrapped_components_to_shadow() {
+        let app = create_app_dir(&[
+            ("index.html", "<my-card></my-card>"),
+            ("my-card.html", "<p>content</p>"),
+        ]);
+
+        let result = build(default_options(app.path())).unwrap();
+        assert!(result.protocol.component_uses_shadow_dom("my-card"));
+        let html: String = result.protocol.fragments["my-card"]
+            .fragments
+            .iter()
+            .filter_map(|fragment| match fragment.fragment.as_ref() {
+                Some(Fragment::Raw(raw)) => Some(raw.value.as_str()),
+                _ => None,
+            })
+            .collect();
+        assert!(html.contains(r#"<template shadowrootmode="open">"#));
+    }
+
+    #[test]
+    fn build_rejects_slot_in_unwrapped_light_component() {
+        let app = create_app_dir(&[
+            ("index.html", "<my-card></my-card>"),
+            ("my-card.html", "<div><slot></slot></div>"),
+        ]);
+
+        let error = build(BuildOptions {
+            app_dir: app.path().to_path_buf(),
+            dom: DomStrategy::Light,
+            ..BuildOptions::default()
+        })
+        .expect_err("unwrapped Light DOM slot must fail the build");
+
+        assert!(
+            error.chain_message().contains("[light-dom-slot]"),
+            "unexpected build error: {}",
+            error.chain_message()
+        );
+    }
+
     #[test]
     fn pending_projection_unblocks_after_template_compilation() {
         let app = create_app_dir(&[("index.html", "<h1>Hello</h1>")]);
@@ -1407,7 +1570,10 @@ mod tests {
     fn test_build_with_component_css() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
             ("my-card.ts", "export {};"),
         ]);
@@ -1419,11 +1585,650 @@ mod tests {
         assert_eq!(result.stats.css_file_count, 1);
     }
 
+    #[test]
+    fn light_css_bytes_align_across_link_style_and_module() {
+        let authored = " \n.ready{color:red}\n ";
+        let expected = authored;
+
+        for strategy in [CssStrategy::Link, CssStrategy::Style, CssStrategy::Module] {
+            let app = create_app_dir(&[
+                ("index.html", "<my-card></my-card>"),
+                ("my-card.html", "<p>content</p>"),
+                ("my-card.css", authored),
+            ]);
+            let mut options = light_options(app.path());
+            options.css = strategy;
+            if strategy == CssStrategy::Link {
+                options.css_file_name_template = "[name]-[hash].[ext]".to_string();
+            }
+            let result = build(options).unwrap();
+
+            let actual = match strategy {
+                CssStrategy::Link => {
+                    let expected_name = webui_parser::CssLinkOptions::try_new(
+                        "[name]-[hash].[ext]".to_string(),
+                        None,
+                    )
+                    .unwrap()
+                    .resolve("my-card", expected)
+                    .filename;
+                    assert_eq!(result.css_files[0].0, expected_name);
+                    result.css_files[0].1.clone()
+                }
+                CssStrategy::Module => result.protocol.components["my-card"].css.clone(),
+                CssStrategy::Style => {
+                    assert_eq!(result.protocol.components["my-card"].css, expected);
+                    result.protocol.components["my-card"].css.clone()
+                }
+            };
+            assert_eq!(actual, expected, "mismatch for {strategy:?}");
+            if strategy != CssStrategy::Link {
+                assert_eq!(
+                    result.protocol.component_style_resource("my-card"),
+                    Some(expected)
+                );
+            }
+            assert_eq!(
+                result
+                    .protocol
+                    .style_closure("index.html")
+                    .expect("entry closure"),
+                ["my-card"],
+                "Light CSS must be installed by the Document closure"
+            );
+
+            let protocol = Protocol::new(result.protocol.clone());
+            let mut writer = StringWriter { buf: String::new() };
+            WebUIHandler::new()
+                .render(
+                    &protocol,
+                    &serde_json::json!({}),
+                    &RenderOptions::new("index.html", "/"),
+                    &mut writer,
+                )
+                .unwrap();
+            match strategy {
+                CssStrategy::Link => {
+                    let href = &result.protocol.components["my-card"].css_href;
+                    assert!(writer.buf.contains(&format!(
+                        r#"<link rel="stylesheet" href="{href}" data-webui-resource="my-card" data-webui-strategy="link">"#
+                    )));
+                }
+                CssStrategy::Style | CssStrategy::Module => {
+                    let kind = if strategy == CssStrategy::Module {
+                        "module"
+                    } else {
+                        "style"
+                    };
+                    assert!(writer.buf.contains(&format!(
+                        r#"<style data-webui-resource="my-card" data-webui-strategy="{kind}">{expected}</style>"#
+                    )));
+                }
+            }
+        }
+    }
+
+    #[test]
+    fn build_precomputes_style_closures_with_authored_shadow_cut() {
+        let app = create_app_dir(&[
+            (
+                "index.html",
+                "<light-card></light-card><shadow-card><after-card></after-card></shadow-card>",
+            ),
+            ("light-card.html", "<nested-card></nested-card>"),
+            ("light-card.css", ".light{}"),
+            (
+                "shadow-card.html",
+                r#"<template shadowrootmode="open"><nested-card></nested-card></template>"#,
+            ),
+            ("shadow-card.css", ".shadow{}"),
+            ("nested-card.html", "<span>nested</span>"),
+            ("nested-card.css", ".nested{}"),
+            ("after-card.html", "<span>after</span>"),
+            ("after-card.css", ".after{}"),
+        ]);
+        let mut options = light_options(app.path());
+        options.css = CssStrategy::Style;
+        let result = build(options).unwrap();
+
+        assert_eq!(
+            result
+                .protocol
+                .style_closure("index.html")
+                .expect("entry closure"),
+            ["light-card", "nested-card", "after-card"]
+        );
+        assert_eq!(
+            result
+                .protocol
+                .style_closure("shadow-card")
+                .expect("Shadow closure"),
+            ["shadow-card", "nested-card"]
+        );
+    }
+
+    /// A fixture that exercises both bundling outcomes at once: two components
+    /// used only by the entry merge, and one reached from a second CSS tree is
+    /// split out so neither tree over-delivers.
+    fn bundling_app() -> tempfile::TempDir {
+        create_app_dir(&[
+            (
+                "index.html",
+                "<a-card></a-card><b-card></b-card><shared-card></shared-card>\
+                 <shadow-card></shadow-card>",
+            ),
+            ("a-card.html", "<span>a</span>"),
+            ("a-card.css", ".a{color:red}"),
+            ("b-card.html", "<span>b</span>"),
+            ("b-card.css", ".b{color:green}"),
+            ("shared-card.html", "<span>shared</span>"),
+            ("shared-card.css", ".shared{color:blue}"),
+            (
+                "shadow-card.html",
+                r#"<template shadowrootmode="open"><shared-card></shared-card></template>"#,
+            ),
+            ("shadow-card.css", ".shadow{color:black}"),
+        ])
+    }
+
+    /// Concatenate a closure's CSS the way the browser cascade sees it, once
+    /// per component and once per chunk.
+    fn closure_css(protocol: &WebUIProtocol, root: &str) -> (String, String) {
+        let closure = protocol.style_closures.get(root).expect("closure");
+        let unbundled = closure
+            .component_tags
+            .iter()
+            .filter_map(|tag| protocol.components.get(tag))
+            .map(|component| component.css.as_str())
+            .collect::<Vec<_>>()
+            .join("\n");
+        let bundled = closure
+            .style_chunks
+            .iter()
+            .filter_map(|index| protocol.style_chunk_resource(*index))
+            .map(|(_, css)| css)
+            .collect::<Vec<_>>()
+            .join("\n");
+        (unbundled, bundled)
+    }
+
+    #[test]
+    fn bundling_preserves_the_cascade_of_every_closure() {
+        let app = bundling_app();
+        let mut options = light_options(app.path());
+        options.css = CssStrategy::Style;
+        options.css_bundle = true;
+        let result = build(options).unwrap();
+
+        let roots: Vec<String> = result.protocol.style_closures.keys().cloned().collect();
+        assert!(roots.len() >= 2, "fixture must produce several CSS trees");
+        let mut chunked = 0usize;
+        for root in roots {
+            let (unbundled, bundled) = closure_css(&result.protocol, &root);
+            // A closure the runtime never installs as a unit keeps no chunks and
+            // falls back to per-component delivery, which is the unbundled path.
+            if bundled.is_empty() && !unbundled.is_empty() {
+                continue;
+            }
+            chunked += 1;
+            assert_eq!(
+                bundled, unbundled,
+                "chunked cascade diverged from the per-component cascade for `{root}`"
+            );
+        }
+        assert!(chunked >= 2, "fixture must chunk several CSS trees");
+    }
+
+    #[test]
+    fn bundling_merges_entry_local_styles_and_splits_shared_ones() {
+        let app = bundling_app();
+        let mut options = light_options(app.path());
+        options.css = CssStrategy::Style;
+        options.css_bundle = true;
+        let result = build(options).unwrap();
+
+        let members: Vec<&[String]> = result
+            .protocol
+            .style_chunks
+            .iter()
+            .map(|chunk| chunk.component_tags.as_slice())
+            .collect();
+        assert!(
+            members.contains(&["a-card".to_string(), "b-card".to_string()].as_slice()),
+            "entry-local components should merge: {members:?}"
+        );
+        assert!(
+            members.contains(&["shared-card".to_string()].as_slice()),
+            "a component reached from two CSS trees must stay alone: {members:?}"
+        );
+
+        // The shared chunk is the same index in both trees, so it is fetched and
+        // cached once.
+        let entry = result.protocol.style_closure_chunks("index.html").unwrap();
+        let shadow = result.protocol.style_closure_chunks("shadow-card").unwrap();
+        let shared = entry
+            .iter()
+            .find(|index| shadow.contains(index))
+            .expect("both trees should share a chunk");
+        assert_eq!(
+            result.protocol.style_chunk_members(*shared).unwrap(),
+            ["shared-card"]
+        );
+    }
+
+    #[test]
+    fn bundling_is_off_by_default_and_leaves_the_protocol_unchanged() {
+        let app = bundling_app();
+        let mut options = default_options(app.path());
+        options.css = CssStrategy::Style;
+        let result = build(options).unwrap();
+
+        assert!(result.protocol.style_chunks.is_empty());
+        for closure in result.protocol.style_closures.values() {
+            assert!(closure.style_chunks.is_empty());
+        }
+    }
+
+    #[test]
+    fn bundling_link_emits_chunks_and_component_fallback_files() {
+        let app = bundling_app();
+        let mut options = light_options(app.path());
+        options.css_bundle = true;
+        let result = build(options).unwrap();
+
+        let names: Vec<&str> = result
+            .css_files
+            .iter()
+            .map(|(name, _)| name.as_str())
+            .collect();
+        for (tag, component) in &result.protocol.components {
+            if component.css_href.is_empty() {
+                continue;
+            }
+            assert!(
+                names.contains(&component.css_href.as_str()),
+                "`{tag}` needs its independently loaded fallback file: {names:?}"
+            );
+        }
+        for chunk in &result.protocol.style_chunks {
+            assert!(!chunk.css_href.is_empty(), "Link chunks need an href");
+            assert!(
+                names.contains(&chunk.css_href.as_str()),
+                "every rendered chunk needs an emitted file: {names:?}"
+            );
+            assert!(
+                chunk.css.is_empty(),
+                "Link chunks ship their CSS as a file, not inline"
+            );
+        }
+    }
+
+    #[test]
+    fn bundling_keeps_component_files_when_component_assets_need_them() {
+        let app = create_app_dir(&[
+            (
+                "index.html",
+                "<a-card></a-card><b-card></b-card><shared-card></shared-card>",
+            ),
+            ("a-card.html", "<span>a</span>"),
+            ("a-card.css", ".a{color:red}"),
+            ("b-card.html", "<span>b</span>"),
+            ("b-card.css", ".b{color:green}"),
+            ("shared-card.html", "<span>shared</span>"),
+            ("shared-card.css", ".shared{color:blue}"),
+            ("lazy-panel.html", "<a-card></a-card><p>lazy</p>"),
+            ("lazy-panel.css", ".lazy{color:gray}"),
+            ("lazy-panel.ts", "export {};"),
+        ]);
+        let mut options = light_options(app.path());
+        options.plugin = Some(Plugin::WebUI);
+        options.css_bundle = true;
+        options.component_asset_roots = vec!["lazy-panel".to_string()];
+        let result = build(options).unwrap();
+
+        let names: Vec<&str> = result
+            .css_files
+            .iter()
+            .map(|(name, _)| name.as_str())
+            .collect();
+        assert!(
+            names.iter().any(|name| name.starts_with("lazy-panel")),
+            "static assets fetch a component's own stylesheet: {names:?}"
+        );
+        assert!(
+            names.iter().any(|name| name.starts_with("_chunk-")),
+            "bundled chunks are still emitted: {names:?}"
+        );
+        assert!(
+            result.component_asset_files[0]
+                .content
+                .contains(r#""a-card":{"kind":"link","href":"a-card.css"}"#),
+            "a deferred CSS tree needs the exact external component resource even when the entry Document uses a bundle: {}",
+            result.component_asset_files[0].content
+        );
+    }
+
+    /// Render a built protocol and return the emitted HTML.
+    fn render_html(protocol: &WebUIProtocol, route: &str) -> String {
+        let protocol = Protocol::new(protocol.clone());
+        let mut writer = StringWriter { buf: String::new() };
+        WebUIHandler::new()
+            .render(
+                &protocol,
+                &serde_json::json!({}),
+                &RenderOptions::new("index.html", route),
+                &mut writer,
+            )
+            .unwrap();
+        writer.buf
+    }
+
+    /// Every stylesheet URL the rendered page tells the browser to fetch.
+    fn linked_stylesheets(html: &str) -> Vec<&str> {
+        let mut hrefs = Vec::new();
+        let mut rest = html;
+        while let Some(start) = rest.find("href=\"") {
+            rest = &rest[start + "href=\"".len()..];
+            let Some(end) = rest.find('"') else { break };
+            let href = &rest[..end];
+            if href.ends_with(".css") {
+                hrefs.push(href);
+            }
+            rest = &rest[end..];
+        }
+        hrefs
+    }
+
+    /// The `data-webui-resource` values in emitted order.
+    fn emitted_resources(html: &str) -> Vec<&str> {
+        let mut resources = Vec::new();
+        let mut rest = html;
+        while let Some(start) = rest.find("data-webui-resource=\"") {
+            rest = &rest[start + "data-webui-resource=\"".len()..];
+            match rest.find('"') {
+                Some(end) => {
+                    resources.push(&rest[..end]);
+                    rest = &rest[end..];
+                }
+                None => break,
+            }
+        }
+        resources
+    }
+
+    #[test]
+    fn bundled_rendering_emits_one_resource_per_chunk() {
+        for strategy in [CssStrategy::Link, CssStrategy::Style] {
+            let app = bundling_app();
+            let mut options = light_options(app.path());
+            options.css = strategy;
+            options.css_bundle = true;
+            let result = build(options).unwrap();
+
+            let html = render_html(&result.protocol, "/");
+            let resources = emitted_resources(&html);
+            assert!(
+                resources.contains(&"_chunk-a-card-2"),
+                "{strategy:?} should deliver the merged chunk once: {resources:?}"
+            );
+            assert!(
+                !resources.contains(&"a-card") && !resources.contains(&"b-card"),
+                "{strategy:?} must not also deliver merged members: {resources:?}"
+            );
+        }
+    }
+
+    #[test]
+    fn bundling_never_merges_an_authored_shadow_stylesheet() {
+        // `shadow-card` sits between two Light components that share its exact
+        // consumer set, so ordering alone would let all three merge.
+        let app = create_app_dir(&[
+            (
+                "index.html",
+                "<a-card></a-card><shadow-card></shadow-card><b-card></b-card>",
+            ),
+            ("a-card.html", "<span>a</span>"),
+            ("a-card.css", ".a{color:red}"),
+            ("b-card.html", "<span>b</span>"),
+            ("b-card.css", ".b{color:green}"),
+            (
+                "shadow-card.html",
+                r#"<template shadowrootmode="open"><span>s</span></template>"#,
+            ),
+            ("shadow-card.css", ".shadow{color:black}"),
+        ]);
+        let mut options = light_options(app.path());
+        options.css = CssStrategy::Style;
+        options.css_bundle = true;
+        let result = build(options).unwrap();
+
+        let chunk = result
+            .protocol
+            .style_chunks
+            .iter()
+            .find(|chunk| chunk.component_tags.iter().any(|tag| tag == "shadow-card"))
+            .expect("shadow-card is styled, so it belongs to a chunk");
+        // A single-member chunk is named after its member and carries its exact
+        // bytes, which is what keeps the parse-time `css_href` and
+        // `shadowrootadoptedstylesheets` references valid under bundling.
+        assert_eq!(
+            chunk.component_tags,
+            vec!["shadow-card".to_string()],
+            "an authored-Shadow stylesheet must stay in a chunk of its own"
+        );
+        assert_eq!(chunk.name, "shadow-card");
+        assert_eq!(
+            chunk.css, result.protocol.components["shadow-card"].css,
+            "its chunk must carry the component's own bytes unchanged"
+        );
+    }
+
+    #[test]
+    fn bundling_never_links_a_stylesheet_the_build_did_not_write() {
+        // The rendered page is the contract: every stylesheet URL the browser is
+        // told to fetch — document links and declarative Shadow roots alike —
+        // must name a file the bundled build actually emitted.
+        let app = bundling_app();
+        let mut options = light_options(app.path());
+        options.css = CssStrategy::Link;
+        options.css_bundle = true;
+        let result = build(options).unwrap();
+
+        let emitted: HashSet<&str> = result
+            .css_files
+            .iter()
+            .map(|(name, _)| name.as_str())
+            .collect();
+        let html = render_html(&result.protocol, "/");
+        let linked = linked_stylesheets(&html);
+        assert!(
+            !linked.is_empty(),
+            "the page should link at least one stylesheet: {html}"
+        );
+        for href in &linked {
+            let name = href.rsplit('/').next().unwrap_or(href);
+            assert!(
+                emitted.contains(name),
+                "page links `{href}`, which the bundled build did not write: {emitted:?}"
+            );
+        }
+    }
+
+    #[test]
+    fn bundling_is_rejected_for_the_module_strategy() {
+        let app = bundling_app();
+        let mut options = light_options(app.path());
+        options.css = CssStrategy::Module;
+        options.css_bundle = true;
+
+        let Err(WebUIError::InvalidBuildOptions(message)) = build(options) else {
+            panic!("Module builds resolve import-map specifiers per component");
+        };
+        assert!(
+            message.contains("--css link"),
+            "the error should name a strategy that works: {message}"
+        );
+    }
+
+    #[test]
+    fn bundled_rendering_delivers_the_same_css_in_the_same_order() {
+        // Style mode inlines the CSS, so the rendered document carries the whole
+        // cascade and the two builds can be compared rule for rule.
+        let extract = |html: &str| -> Vec<String> {
+            let mut blocks = Vec::new();
+            let mut rest = html;
+            while let Some(start) = rest.find("data-webui-strategy=\"style\">") {
+                rest = &rest[start + "data-webui-strategy=\"style\">".len()..];
+                match rest.find("</style>") {
+                    Some(end) => {
+                        blocks.push(rest[..end].to_string());
+                        rest = &rest[end..];
+                    }
+                    None => break,
+                }
+            }
+            blocks
+        };
+
+        let mut plan = Vec::new();
+        for bundle in [false, true] {
+            let app = bundling_app();
+            let mut options = light_options(app.path());
+            options.css = CssStrategy::Style;
+            options.css_bundle = bundle;
+            let result = build(options).unwrap();
+            let html = render_html(&result.protocol, "/");
+            plan.push(extract(&html).join("\n"));
+        }
+
+        assert_eq!(
+            plan[1], plan[0],
+            "bundling must not change the delivered cascade"
+        );
+        assert!(!plan[0].is_empty(), "fixture must deliver CSS");
+    }
+
+    #[test]
+    fn bundled_rendering_never_repeats_a_chunk_across_css_trees() {
+        let app = bundling_app();
+        let mut options = light_options(app.path());
+        options.css = CssStrategy::Style;
+        options.css_bundle = true;
+        let result = build(options).unwrap();
+
+        let html = render_html(&result.protocol, "/");
+        let resources = emitted_resources(&html);
+        // `shared-card` is reached by the document tree and by `shadow-card`'s
+        // ShadowRoot. Each tree scopes styles separately, so it is delivered once
+        // per tree and never twice within one.
+        let mut counts: HashMap<&str, usize> = HashMap::new();
+        for resource in &resources {
+            *counts.entry(*resource).or_insert(0) += 1;
+        }
+        let shadow_start = html
+            .find(r#"<template shadowrootmode="open""#)
+            .expect("declarative Shadow root");
+        let document_resources = emitted_resources(&html[..shadow_start]);
+        let mut document_counts: HashMap<&str, usize> = HashMap::new();
+        for resource in &document_resources {
+            *document_counts.entry(*resource).or_insert(0) += 1;
+        }
+        for (resource, count) in &document_counts {
+            assert_eq!(
+                *count, 1,
+                "`{resource}` was delivered {count} times in the document tree: {resources:?}"
+            );
+        }
+    }
+
+    #[test]
+    fn authored_shadow_css_bytes_are_not_lowered_or_trimmed() {
+        let authored =
+            " \n:host(.ready){color:red}:host-context(body){color:blue}::slotted(*){color:green}\n ";
+
+        for strategy in [CssStrategy::Link, CssStrategy::Style, CssStrategy::Module] {
+            let app = create_app_dir(&[
+                ("index.html", "<my-card></my-card>"),
+                (
+                    "my-card.html",
+                    r#"<template shadowrootmode="open"><p>content</p></template>"#,
+                ),
+                ("my-card.css", authored),
+            ]);
+            let mut options = default_options(app.path());
+            options.css = strategy;
+            let result = build(options).unwrap();
+
+            match strategy {
+                CssStrategy::Link => assert_eq!(result.css_files[0].1, authored),
+                CssStrategy::Style | CssStrategy::Module => {
+                    assert_eq!(result.protocol.components["my-card"].css, authored);
+                    assert_eq!(
+                        result.protocol.component_style_resource("my-card"),
+                        Some(authored)
+                    );
+                }
+            }
+            assert_eq!(
+                result
+                    .protocol
+                    .style_closure("my-card")
+                    .expect("component closure"),
+                ["my-card"],
+                "the authored Shadow root owns its exact CSS resource"
+            );
+
+            let protocol = Protocol::new(result.protocol.clone());
+            let mut writer = StringWriter { buf: String::new() };
+            WebUIHandler::new()
+                .render(
+                    &protocol,
+                    &serde_json::json!({}),
+                    &RenderOptions::new("index.html", "/"),
+                    &mut writer,
+                )
+                .unwrap();
+            match strategy {
+                CssStrategy::Link => {
+                    let href = &result.protocol.components["my-card"].css_href;
+                    assert!(writer.buf.contains(&format!(
+                        r#"<template shadowrootmode="open"><link rel="stylesheet" href="{href}" data-webui-resource="my-card" data-webui-strategy="link">"#
+                    )));
+                }
+                CssStrategy::Style | CssStrategy::Module => {
+                    let kind = if strategy == CssStrategy::Module {
+                        "module"
+                    } else {
+                        "style"
+                    };
+                    assert!(writer.buf.contains(&format!(
+                        r#"<style data-webui-resource="my-card" data-webui-strategy="{kind}">{authored}</style>"#
+                    )));
+                    let template_start = writer
+                        .buf
+                        .find(r#"<template shadowrootmode="open""#)
+                        .expect("declarative Shadow root");
+                    let style_start = writer
+                        .buf
+                        .find(&format!(
+                            r#"<style data-webui-resource="my-card" data-webui-strategy="{kind}">"#
+                        ))
+                        .expect("tree-local style");
+                    let content_start = writer.buf.find("<p>content</p>").expect("component body");
+                    assert!(template_start < style_start && style_start < content_start);
+                }
+            }
+        }
+    }
+
     #[test]
     fn test_build_strips_non_legal_css_comments_from_output_file() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             (
                 "my-card.css",
                 "/* remove var(--ignored) */ .card { color: var(--textColor); }",
@@ -1439,7 +2244,10 @@ mod tests {
     fn test_build_preserves_legal_css_comments_by_default() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             (
                 "my-card.css",
                 "/*! @license MIT */ .card { color: red; } /* remove */",
@@ -1457,7 +2265,10 @@ mod tests {
     fn test_build_legal_comments_none_strips_legal_css_comments() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", "/*! @license MIT */ .card { color: red; }"),
         ]);
         let mut options = default_options(app.path());
@@ -1471,7 +2282,10 @@ mod tests {
     fn test_build_with_css_hashed_filename_template() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let mut options = default_options(app.path());
@@ -1497,7 +2311,10 @@ mod tests {
     fn test_css_public_base_prefixes_css_href_only() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let mut options = default_options(app.path());
@@ -1519,13 +2336,16 @@ mod tests {
     }
 
     #[test]
-    fn test_css_public_base_emits_parser_and_handler_links() {
+    fn test_css_public_base_emits_protocol_handler_and_payload_resources() {
         let app = create_app_dir(&[
             (
                 "index.html",
                 "<html><head></head><body><my-card>Hello</my-card></body></html>",
             ),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let mut options = default_options(app.path());
@@ -1535,19 +2355,16 @@ mod tests {
 
         let filename = &result.css_files[0].0;
         let expected_href = format!("https://cdn.example.com/assets/{filename}");
-        let component_html = result.protocol.fragments["my-card"]
-            .fragments
-            .iter()
-            .filter_map(|fragment| match fragment.fragment.as_ref() {
-                Some(Fragment::Raw(raw)) => Some(raw.value.as_str()),
-                _ => None,
-            })
-            .collect::<String>();
-        assert!(
-            component_html.contains(&format!(
-                r#"<link rel="stylesheet" href="{expected_href}">"#
-            )),
-            "parser-generated component template should use CDN href: {component_html}"
+        assert_eq!(
+            result.protocol.component_style_resource("my-card"),
+            Some(expected_href.as_str())
+        );
+        assert_eq!(
+            result
+                .protocol
+                .style_closure("my-card")
+                .expect("component closure"),
+            ["my-card"]
         );
 
         let handler = WebUIHandler::new();
@@ -1563,18 +2380,29 @@ mod tests {
             .unwrap();
         assert!(
             writer.buf.contains(&format!(
-                r#"<link rel="preload" href="{expected_href}" as="style" data-webui-ssr-preload="style">"#
+                r#"<link rel="stylesheet" href="{}" data-webui-resource="my-card" data-webui-strategy="link">"#,
+                expected_href.replace('/', "&#x2F;")
             )),
-            "handler head preload should use CDN href: {}",
+            "handler Shadow-root resource should use CDN href: {}",
             writer.buf
         );
+        let payload = protocol
+            .render_component_templates(&["my-card"], "")
+            .expect("component resource payload");
+        assert_eq!(
+            payload["componentStyles"]["resources"]["my-card"]["href"],
+            expected_href
+        );
     }
 
     #[test]
-    fn test_css_public_base_emits_webui_plugin_template_links() {
+    fn test_css_public_base_keeps_webui_template_style_free() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
             ("my-card.ts", "export {};"),
         ]);
@@ -1587,17 +2415,24 @@ mod tests {
         let filename = &result.css_files[0].0;
         let expected_href = format!("https://cdn.example.com/assets/{filename}");
         let template = &result.protocol.components["my-card"].template_json;
+        assert_eq!(
+            result.protocol.component_style_resource("my-card"),
+            Some(expected_href.as_str())
+        );
         assert!(
-            template.contains(&format!(r#"href=\"{expected_href}\""#)),
-            "plugin component template should use CDN href: {template}"
+            !template.contains(&expected_href),
+            "WebUI templates must not duplicate handler-owned CSS links: {template}"
         );
     }
 
     #[test]
-    fn test_css_public_base_emits_fast_plugin_template_links() {
+    fn test_css_public_base_keeps_shadow_fast_template_styled() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let mut options = default_options(app.path());
@@ -1609,17 +2444,49 @@ mod tests {
         let filename = &result.css_files[0].0;
         let expected_href = format!("https://cdn.example.com/assets/{filename}");
         let template = &result.protocol.components["my-card"].template;
+        assert_eq!(
+            result.protocol.component_style_resource("my-card"),
+            Some(expected_href.as_str())
+        );
         assert!(
-            template.contains(&format!(r#"href="{expected_href}""#)),
-            "FAST component template should use CDN href: {template}"
+            template.contains(&expected_href),
+            "a Shadow FAST template owns its own CSS so client-created elements are styled: {template}"
         );
     }
 
+    /// FAST has no artifact-level Light registration contract and defaults
+    /// client-created elements to Shadow roots, so reject the SSR/client split.
+    #[test]
+    fn test_light_fast_build_is_rejected() {
+        let app = create_app_dir(&[
+            ("index.html", "<my-card>Hello</my-card>"),
+            ("my-card.html", "<div>card</div>"),
+            ("my-card.css", ".card { color: red; }"),
+        ]);
+        let mut options = default_options(app.path());
+        options.dom = DomStrategy::Light;
+        options.plugin = Some(Plugin::FastV3);
+        options.css_file_name_template = "[name]-[hash].[ext]".to_string();
+        options.css_public_base = Some("https://cdn.example.com/assets".to_string());
+        let error = build(options).expect_err("FAST Light build must fail");
+        assert!(matches!(
+            error,
+            WebUIError::Parse {
+                source: webui_parser::ParserError::Template(ref diagnostic),
+                ..
+            } if diagnostic.error_code()
+                == Some(webui_parser::codes::FAST_LIGHT_DOM_UNSUPPORTED)
+        ));
+    }
+
     #[test]
     fn test_invalid_css_template_is_rejected() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let mut options = default_options(app.path());
@@ -1633,9 +2500,15 @@ mod tests {
     fn test_css_filename_collision_is_rejected() {
         let app = create_app_dir(&[
             ("index.html", "<card-a>A</card-a><card-b>B</card-b>"),
-            ("card-a.html", "<div><slot></slot></div>"),
+            (
+                "card-a.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("card-a.css", ".x { color: red; }"),
-            ("card-b.html", "<div><slot></slot></div>"),
+            (
+                "card-b.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("card-b.css", ".x { color: red; }"),
         ]);
         let mut options = default_options(app.path());
@@ -1669,7 +2542,7 @@ mod tests {
             .contains(r#""type":"webui-component-asset""#));
         assert!(result.component_asset_files[0]
             .content
-            .contains(r#""version":2"#));
+            .contains(r#""version":3"#));
         assert!(result.component_asset_files[0]
             .content
             .contains(r#""kind":"root""#));
@@ -1687,6 +2560,42 @@ mod tests {
         );
     }
 
+    #[test]
+    fn component_assets_emit_enhanced_style_catalog_for_all_strategies() {
+        for (strategy, kind) in [
+            (CssStrategy::Link, "link"),
+            (CssStrategy::Style, "style"),
+            (CssStrategy::Module, "module"),
+        ] {
+            let app = create_app_dir(&[
+                ("index.html", "<app-shell></app-shell>"),
+                ("app-shell.html", "<p>Entry</p>"),
+                ("lazy-panel.html", "<p>Lazy</p>"),
+                ("lazy-panel.css", ".lazy{color:red}"),
+            ]);
+            let mut options = default_options(app.path());
+            options.plugin = Some(Plugin::WebUI);
+            options.css = strategy;
+            options.component_asset_roots = vec!["lazy-panel".to_string()];
+
+            let result = build(options).unwrap();
+            let asset = &result.component_asset_files[0].content;
+            assert!(asset.contains(r#""version":3"#));
+            assert!(asset.contains(&format!(
+                r#""componentStyles":{{"version":1,"strategy":"{kind}""#
+            )));
+            assert!(asset.contains(&format!(r#""lazy-panel":{{"kind":"{kind}""#)));
+            assert!(asset.contains(r#""closures":{"lazy-panel":["lazy-panel"]}"#));
+            if strategy == CssStrategy::Module {
+                assert!(asset
+                    .contains(r#""lazy-panel":{"kind":"module","specifier":"lazy-panel","css":"#,));
+            }
+            if strategy == CssStrategy::Link {
+                assert!(asset.contains(r#""href":new URL("lazy-panel.css",import.meta.url).href"#,));
+            }
+        }
+    }
+
     #[test]
     fn test_build_splits_shared_assets_and_keeps_them_out_of_protocol() {
         let app = create_app_dir(&[
@@ -1768,9 +2677,13 @@ mod tests {
             ]
         );
         let lazy = &result.component_asset_files[0].content;
-        assert!(lazy.contains(r#""version":2"#));
+        assert!(lazy.contains(r#""version":3"#));
         assert!(lazy.contains(r#""kind":"root""#));
         assert!(lazy.contains(r#""externalComponents":["entry-badge"]"#));
+        assert!(lazy.contains(r#""entry-badge":{"kind":"link","href":"entry-badge.css"}"#));
+        assert!(!lazy.contains(
+            r#""entry-badge":{"kind":"link","href":new URL("entry-badge.css",import.meta.url).href}"#
+        ));
         assert!(lazy
             .contains(r#""href":new URL("./chunk-shared-detail.webui.js",import.meta.url).href"#));
         assert!(lazy.contains(r#"import("./chunk-shared-detail.webui.js")"#));
@@ -2027,12 +2940,11 @@ mod tests {
     fn test_css_href_set_for_light_dom_link_strategy() {
         let app = create_app_dir(&[
             ("index.html", "<has-css>A</has-css><no-css>B</no-css>"),
-            ("has-css.html", "<p><slot></slot></p>"),
+            ("has-css.html", "<p>styled</p>"),
             ("has-css.css", ".yes { color: green; }"),
-            ("no-css.html", "<p><slot></slot></p>"),
+            ("no-css.html", "<p>plain</p>"),
         ]);
-        let mut options = default_options(app.path());
-        options.dom = DomStrategy::Light;
+        let options = default_options(app.path());
         let result = build(options).unwrap();
 
         let href = result
@@ -2058,14 +2970,94 @@ mod tests {
         );
     }
 
+    #[test]
+    fn test_plugin_free_build_persists_component_shadow_usage() {
+        let app = create_app_dir(&[
+            (
+                "index.html",
+                "<light-card></light-card><shadow-card></shadow-card>",
+            ),
+            ("light-card.html", "<p>light</p>"),
+            (
+                "shadow-card.html",
+                "<template shadowrootmode=\"open\"><slot></slot></template>",
+            ),
+        ]);
+        let mut options = default_options(app.path());
+        options.dom = DomStrategy::Light;
+        options.plugin = None;
+        let result = build(options).unwrap();
+
+        assert!(!result.protocol.component_uses_shadow_dom("light-card"));
+        assert!(result.protocol.component_uses_shadow_dom("shadow-card"));
+        assert!(!result.protocol.components["light-card"].uses_shadow_dom);
+        assert!(result.protocol.components["shadow-card"].uses_shadow_dom);
+
+        let entry_html: String = result.protocol.fragments["index.html"]
+            .fragments
+            .iter()
+            .filter_map(|fragment| match fragment.fragment.as_ref() {
+                Some(Fragment::Raw(raw)) => Some(raw.value.as_str()),
+                _ => None,
+            })
+            .collect();
+        assert!(entry_html.contains("<light-card>"));
+        assert!(entry_html.contains("<shadow-card>"));
+        assert!(!entry_html.contains("<shadow-card data-wl"));
+    }
+
+    #[test]
+    fn test_authored_shadow_under_light_matches_ssr_protocol_and_webui_metadata() {
+        let app = create_app_dir(&[
+            ("index.html", "<shadow-card>projected</shadow-card>"),
+            (
+                "shadow-card.html",
+                "<!-- lead --><template shadowrootmode=\"open\"><slot></slot></template><!-- tail -->",
+            ),
+        ]);
+        let mut options = default_options(app.path());
+        options.plugin = Some(Plugin::WebUI);
+        let result = build(options).unwrap();
+
+        assert!(result.protocol.component_uses_shadow_dom("shadow-card"));
+        assert!(result.protocol.components["shadow-card"]
+            .template_json
+            .contains("\"sd\":1"));
+
+        let component_html: String = result.protocol.fragments["shadow-card"]
+            .fragments
+            .iter()
+            .filter_map(|fragment| match fragment.fragment.as_ref() {
+                Some(Fragment::Raw(raw)) => Some(raw.value.as_str()),
+                _ => None,
+            })
+            .collect();
+        assert_eq!(
+            component_html,
+            "<template shadowrootmode=\"open\"><slot></slot></template>"
+        );
+        let entry_html: String = result.protocol.fragments["index.html"]
+            .fragments
+            .iter()
+            .filter_map(|fragment| match fragment.fragment.as_ref() {
+                Some(Fragment::Raw(raw)) => Some(raw.value.as_str()),
+                _ => None,
+            })
+            .collect();
+        assert!(!entry_html.contains("data-wl"));
+    }
+
     #[test]
     fn test_shadow_dom_link_strategy_sets_css_href() {
         // Shadow×Link: css_href is always set for Link-strategy components.
-        // The handler uses protocol.css_strategy + dom_strategy to decide
-        // whether to emit preload (Shadow) or stylesheet (Light) in <head>.
+        // The handler uses protocol.css_strategy + component Shadow metadata
+        // to decide preload (Shadow) vs stylesheet (Light) in <head>.
         let app = create_app_dir(&[
             ("index.html", "<my-card>A</my-card>"),
-            ("my-card.html", "<p><slot></slot></p>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><p><slot></slot></p></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let result = build(default_options(app.path())).unwrap();
@@ -2081,10 +3073,6 @@ mod tests {
             result.protocol.css_strategy(),
             webui_protocol::CssStrategy::Link,
         );
-        assert_eq!(
-            result.protocol.dom_strategy(),
-            webui_protocol::DomStrategy::Shadow,
-        );
 
         // CSS file should still be emitted for the server to serve
         assert_eq!(
@@ -2098,7 +3086,10 @@ mod tests {
     fn test_css_href_empty_for_style_strategy() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>A</my-card>"),
-            ("my-card.html", "<p><slot></slot></p>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><p><slot></slot></p></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let mut options = default_options(app.path());
@@ -2118,7 +3109,10 @@ mod tests {
     fn test_css_href_empty_for_module_strategy() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>A</my-card>"),
-            ("my-card.html", "<p><slot></slot></p>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><p><slot></slot></p></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let mut options = default_options(app.path());
@@ -2142,7 +3136,10 @@ mod tests {
     fn test_build_to_disk_writes_files() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
             ("my-card.ts", "export {};"),
         ]);
@@ -2191,7 +3188,10 @@ mod tests {
     fn test_build_inline_css() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let mut options = default_options(app.path());
@@ -2208,7 +3208,10 @@ mod tests {
     fn test_build_module_css() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let mut options = default_options(app.path());
@@ -2288,7 +3291,7 @@ mod tests {
         let ext_dir = TempDir::new().unwrap();
         fs::write(
             ext_dir.path().join("ext-card.html"),
-            "<div class=\"card\"><slot></slot></div>",
+            r#"<template shadowrootmode="open"><div class="card"><slot></slot></div></template>"#,
         )
         .unwrap();
         fs::write(
@@ -2567,7 +3570,10 @@ mod tests {
     fn test_build_to_disk_css_stays_in_output_dir() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let out = TempDir::new().unwrap();
@@ -2629,7 +3635,10 @@ mod tests {
     fn test_build_to_disk_inline_mode_no_css_files() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let out = TempDir::new().unwrap();
@@ -2655,9 +3664,15 @@ mod tests {
     fn test_build_multiple_components_css() {
         let app = create_app_dir(&[
             ("index.html", "<card-a>A</card-a><card-b>B</card-b>"),
-            ("card-a.html", "<div><slot></slot></div>"),
+            (
+                "card-a.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("card-a.css", ".a { color: red; }"),
-            ("card-b.html", "<span><slot></slot></span>"),
+            (
+                "card-b.html",
+                r#"<template shadowrootmode="open"><span><slot></slot></span></template>"#,
+            ),
             ("card-b.css", ".b { color: blue; }"),
         ]);
         let result = build(default_options(app.path())).unwrap();
@@ -2674,9 +3689,15 @@ mod tests {
         // card-b is registered but not referenced in index.html
         let app = create_app_dir(&[
             ("index.html", "<card-a>A</card-a>"),
-            ("card-a.html", "<div><slot></slot></div>"),
+            (
+                "card-a.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("card-a.css", ".a { color: red; }"),
-            ("card-b.html", "<span><slot></slot></span>"),
+            (
+                "card-b.html",
+                r#"<template shadowrootmode="open"><span><slot></slot></span></template>"#,
+            ),
             ("card-b.css", ".b { color: blue; }"),
         ]);
         let result = build(default_options(app.path())).unwrap();
@@ -2691,11 +3712,11 @@ mod tests {
             ("index.html", "<card-a>A</card-a>"),
             (
                 "card-a.html",
-                r#"<template w-render="lazy" w-reserve-block-size="10px"><slot></slot></template>"#,
+                r#"<template w-render="lazy" w-reserve-block-size="10px"><div>a</div></template>"#,
             ),
             (
                 "card-b.html",
-                r#"<template w-render="lazy" w-reserve-block-size="20px"><slot></slot></template>"#,
+                r#"<template w-render="lazy" w-reserve-block-size="20px"><div>b</div></template>"#,
             ),
         ]);
         let result = build(default_options(app.path())).unwrap();
@@ -2922,7 +3943,10 @@ mod tests {
     fn test_build_to_disk_returns_accurate_stats() {
         let app = create_app_dir(&[
             ("index.html", "<my-card>Hello</my-card><p>{{name}}</p>"),
-            ("my-card.html", "<div><slot></slot></div>"),
+            (
+                "my-card.html",
+                r#"<template shadowrootmode="open"><div><slot></slot></div></template>"#,
+            ),
             ("my-card.css", ".card { color: red; }"),
         ]);
         let out = TempDir::new().unwrap();
diff --git a/crates/webui/src/server.rs b/crates/webui/src/server.rs
index a1a058e77..13b7d4c3b 100644
--- a/crates/webui/src/server.rs
+++ b/crates/webui/src/server.rs
@@ -136,7 +136,22 @@ mod tests {
     use super::*;
     use serde_json::json;
     use std::collections::HashMap;
-    use webui_protocol::{FragmentList, WebUIFragment, WebUIProtocol};
+    use webui_protocol::{
+        ComponentStyleClosure, CssStrategy, FragmentList, WebUIFragment, WebUIProtocol,
+    };
+
+    fn add_page_style_closures(protocol: &mut WebUIProtocol) {
+        let closure = ComponentStyleClosure {
+            component_tags: vec!["my-page".to_string()],
+            style_chunks: Vec::new(),
+        };
+        protocol
+            .style_closures
+            .insert("index.html".to_string(), closure.clone());
+        protocol
+            .style_closures
+            .insert("my-page".to_string(), closure);
+    }
 
     fn response_json(response: ServeResponse) -> serde_json::Value {
         match response {
@@ -148,7 +163,7 @@ mod tests {
     }
 
     #[test]
-    fn serve_request_json_partial_preserves_template_styles() {
+    fn serve_request_json_partial_carries_module_component_styles() {
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
@@ -166,12 +181,14 @@ mod tests {
         );
 
         let mut protocol = WebUIProtocol::with_tokens(fragments, Vec::new());
+        protocol.set_css_strategy(webui_protocol::CssStrategy::Module);
         let component = protocol
             .components
             .entry("my-page".to_string())
             .or_default();
         component.template_json = r#"{"h":"<p>page</p>"}"#.to_string();
         component.css = ".page{color:red}".to_string();
+        add_page_style_closures(&mut protocol);
         let protocol = Protocol::new(protocol);
 
         let handler = WebUIHandler::new();
@@ -186,11 +203,13 @@ mod tests {
 
         let json = response_json(response);
 
-        // templateStyles must be present and non-empty for module-mode components
         assert_eq!(
-            json["templateStyles"].as_array().map(Vec::len),
-            Some(1),
-            "serve_request should include module template styles"
+            json["componentStyles"]["resources"]["my-page"],
+            json!({
+                "kind": "module",
+                "specifier": "my-page",
+                "css": ".page{color:red}"
+            })
         );
         // templates must not contain any style tags
         assert!(
@@ -203,7 +222,7 @@ mod tests {
     }
 
     #[test]
-    fn serve_request_link_strategy_returns_empty_template_styles() {
+    fn serve_request_link_strategy_returns_component_styles() {
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
@@ -227,7 +246,7 @@ mod tests {
             .or_default();
         comp.template_json = r#"{"h":"<p>page</p>"}"#.to_string();
         comp.css_href = "my-page.css".to_string();
-        // No css content — Link strategy
+        add_page_style_closures(&mut protocol);
         let protocol = Protocol::new(protocol);
 
         let handler = WebUIHandler::new();
@@ -242,11 +261,9 @@ mod tests {
 
         let json = response_json(response);
 
-        assert!(
-            json["templateStyles"]
-                .as_array()
-                .is_some_and(|a| a.is_empty()),
-            "Link strategy should return empty templateStyles"
+        assert_eq!(
+            json["componentStyles"]["resources"]["my-page"],
+            json!({"kind": "link", "href": "my-page.css"})
         );
         assert!(
             json["templates"].as_object().is_some_and(|a| a.len() == 1),
@@ -255,7 +272,7 @@ mod tests {
     }
 
     #[test]
-    fn serve_request_style_strategy_returns_empty_template_styles() {
+    fn serve_request_style_strategy_returns_component_styles() {
         let mut fragments = HashMap::new();
         fragments.insert(
             "index.html".to_string(),
@@ -273,12 +290,14 @@ mod tests {
         );
 
         let mut protocol = WebUIProtocol::with_tokens(fragments, Vec::new());
+        protocol.set_css_strategy(CssStrategy::Style);
         let comp = protocol
             .components
             .entry("my-page".to_string())
             .or_default();
-        // Style strategy: CSS is inlined in the template metadata
-        comp.template_json = r#"{"h":"<style>.p{color:red}</style><p/>"}"#.to_string();
+        comp.template_json = r#"{"h":"<p/>"}"#.to_string();
+        comp.css = ".p{color:red}".to_string();
+        add_page_style_closures(&mut protocol);
         let protocol = Protocol::new(protocol);
 
         let handler = WebUIHandler::new();
@@ -293,11 +312,9 @@ mod tests {
 
         let json = response_json(response);
 
-        assert!(
-            json["templateStyles"]
-                .as_array()
-                .is_some_and(|a| a.is_empty()),
-            "Style strategy should return empty templateStyles"
+        assert_eq!(
+            json["componentStyles"]["resources"]["my-page"],
+            json!({"kind": "style", "css": ".p{color:red}"})
         );
         assert!(
             json["templates"].as_object().is_some_and(|a| a.len() == 1),
diff --git a/crates/webui/src/style_bundle.rs b/crates/webui/src/style_bundle.rs
new file mode 100644
index 000000000..66582178a
--- /dev/null
+++ b/crates/webui/src/style_bundle.rs
@@ -0,0 +1,989 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+//! Build-time CSS bundling.
+//!
+//! Every component stylesheet is render-blocking, so shipping one file per
+//! component costs a request each and forfeits cross-file compression. Bundling
+//! merges component stylesheets into chunks, and splits chunks so a stylesheet
+//! reached from several CSS trees is downloaded and cached once instead of
+//! being duplicated into every route bundle.
+//!
+//! # Delivery is unchanged
+//!
+//! Bundling composes with the `CssStrategy` rather than replacing it: it decides
+//! *how stylesheets are grouped*, while the strategy decides *how they reach the
+//! page*. A Link build gets fewer `<link>` tags and a Style build fewer inline
+//! blocks. Module delivery is already inlined and therefore rejects bundling.
+//!
+//! # Cascade order is preserved exactly
+//!
+//! Merging stylesheets rewrites the order the browser sees rules in, which can
+//! silently change computed styles. Two rules make that impossible here.
+//!
+//! *Only components with an identical set of consuming CSS trees may merge.*
+//! Every tree that needs one member therefore needs all of them, so no tree ever
+//! receives a rule it would not have received unbundled.
+//!
+//! *A chunk's members must be contiguous and identically ordered in every
+//! consuming closure.* Walking a closure and emitting each chunk at its first
+//! member then reproduces the unbundled rule sequence exactly. Both properties
+//! are checked rather than assumed: any incompatible chunk is split back into
+//! single-component chunks. Correctness never depends on the grouping heuristic
+//! being clever.
+//!
+//! # Authored-Shadow stylesheets are never merged
+//!
+//! Parsing resolves an authored-Shadow component's own stylesheet into artifacts
+//! that address it by tag, long before chunks exist: the `css_href` a plugin
+//! injects into the shadow template it builds roots from, and the module
+//! specifier recorded on `shadowrootadoptedstylesheets`. Keeping those
+//! stylesheets in single-component chunks keeps both references correct, because
+//! such a chunk is named after its sole member and carries that member's exact
+//! bytes. Light components carry no such parse-time identity and merge freely,
+//! which under a Light-first default is nearly all of them.
+
+use std::collections::HashMap;
+
+use webui_parser::CssLinkOptions;
+use webui_protocol::{web_ui_fragment, CssStrategy, StyleChunk, WebUIProtocol};
+
+use crate::chunking::{group_runs, ConsumerMatrix};
+use crate::WebUIError;
+
+/// Plan, name, and install bundled CSS chunks on `protocol`.
+///
+/// `css_by_tag` supplies each component's compiled stylesheet. Link builds have
+/// already moved that text into standalone files, so it cannot be read back off
+/// the protocol.
+///
+/// Returns the chunk files a Link build must write. Style and Module builds
+/// carry chunk bytes in the protocol and return nothing.
+pub(crate) fn bundle_style_chunks(
+    protocol: &mut WebUIProtocol,
+    entry: &str,
+    css_by_tag: &HashMap<&str, &str>,
+    css_link_options: &CssLinkOptions,
+) -> Result<Vec<(String, String)>, WebUIError> {
+    let Some(plan) = plan_chunks(protocol, entry)? else {
+        return Ok(Vec::new());
+    };
+    for chunk in &plan.chunks {
+        for tag in &chunk.component_tags {
+            let css = css_by_tag
+                .get(tag.as_str())
+                .ok_or_else(|| missing_css(tag))?;
+            if contains_top_level_import(css) {
+                return Err(css_bundle_import(tag));
+            }
+        }
+    }
+
+    let emit_files = protocol.css_strategy() == CssStrategy::Link;
+    let mut files = Vec::new();
+    let mut chunks = Vec::with_capacity(plan.chunks.len());
+    for chunk in &plan.chunks {
+        let css = concatenate(&chunk.component_tags, css_by_tag)?;
+        let name = chunk_name(&chunk.component_tags);
+        let mut record = StyleChunk {
+            name,
+            css: String::new(),
+            css_href: String::new(),
+            component_tags: chunk.component_tags.clone(),
+        };
+        if emit_files {
+            let resolved = css_link_options.resolve_chunk(&record.name, &css);
+            record.css_href = resolved.href;
+            files.push((resolved.filename, css));
+        } else {
+            record.css = css;
+        }
+        chunks.push(record);
+    }
+
+    for (root, chunk_ids) in plan.root_chunks {
+        if let Some(closure) = protocol.style_closures.get_mut(&root) {
+            closure.style_chunks = chunk_ids;
+        }
+    }
+    protocol.style_chunks = chunks;
+    Ok(files)
+}
+
+struct ChunkDraft {
+    component_tags: Vec<String>,
+}
+
+struct BundlePlan {
+    chunks: Vec<ChunkDraft>,
+    root_chunks: Vec<(String, Vec<u32>)>,
+}
+
+/// Group every styled component into exactly one chunk.
+///
+/// Returns `None` when the build has no component stylesheets to bundle.
+fn plan_chunks(protocol: &WebUIProtocol, entry: &str) -> Result<Option<BundlePlan>, WebUIError> {
+    let roots = collect_roots(protocol, entry);
+    let components = collect_components(protocol, &roots);
+    if components.is_empty() {
+        return Ok(None);
+    }
+    // A component belongs to exactly one chunk, so bounding the component count
+    // bounds the chunk indices the protocol stores as `u32` handles.
+    u32::try_from(components.len()).map_err(|_| style_bundle_graph_too_large())?;
+
+    let index: HashMap<&str, usize> = components
+        .iter()
+        .enumerate()
+        .map(|(id, tag)| (*tag, id))
+        .collect();
+    let mut consumers = ConsumerMatrix::new(components.len(), roots.len())
+        .ok_or_else(style_bundle_graph_too_large)?;
+    for (root_id, root) in roots.iter().enumerate() {
+        for tag in closure_tags(protocol, root) {
+            if let Some(component) = index.get(tag.as_str()) {
+                consumers.insert(*component, root_id);
+            }
+        }
+    }
+
+    // Chunks form from closure order, so a chunk's members start out contiguous
+    // in the closure that formed them. Every other consuming closure still has
+    // to agree, which `split_interleaved_chunks` verifies.
+    let isolated: Vec<bool> = components
+        .iter()
+        .map(|tag| protocol.component_uses_shadow_dom(tag))
+        .collect();
+    let mut owner = vec![usize::MAX; components.len()];
+    let mut chunks: Vec<Vec<usize>> = Vec::new();
+    for root in &roots {
+        let unassigned: Vec<usize> = closure_tags(protocol, root)
+            .iter()
+            .filter_map(|tag| index.get(tag.as_str()).copied())
+            .filter(|component| owner[*component] == usize::MAX)
+            .collect();
+        assign_chunks(&unassigned, &isolated, &consumers, &mut owner, &mut chunks);
+    }
+
+    split_incompatible_chunks(protocol, &roots, &index, &mut owner, &mut chunks);
+
+    let chunk_drafts = chunks
+        .iter()
+        .map(|members| ChunkDraft {
+            component_tags: members
+                .iter()
+                .map(|component| components[*component].to_string())
+                .collect(),
+        })
+        .collect();
+    let root_chunks = roots
+        .iter()
+        .map(|root| {
+            (
+                (*root).to_string(),
+                chunk_sequence(protocol, root, &index, &owner),
+            )
+        })
+        .collect();
+
+    Ok(Some(BundlePlan {
+        chunks: chunk_drafts,
+        root_chunks,
+    }))
+}
+
+/// Assign every still-unowned component of one closure to a chunk.
+///
+/// Components marked `isolated` each get a chunk of their own; the stretches
+/// between them are grouped by identical consumer sets. Splitting on isolated
+/// members rather than filtering them out keeps the surviving members in closure
+/// order, so chunks stay contiguous and the cascade is preserved.
+fn assign_chunks(
+    unassigned: &[usize],
+    isolated: &[bool],
+    consumers: &ConsumerMatrix,
+    owner: &mut [usize],
+    chunks: &mut Vec<Vec<usize>>,
+) {
+    let mut start = 0;
+    while start < unassigned.len() {
+        let component = unassigned[start];
+        if isolated[component] {
+            owner[component] = chunks.len();
+            chunks.push(vec![component]);
+            start += 1;
+            continue;
+        }
+        let mut end = start;
+        while end < unassigned.len() && !isolated[unassigned[end]] {
+            end += 1;
+        }
+        let segment = &unassigned[start..end];
+        for run in group_runs(segment, consumers) {
+            let members = segment[run].to_vec();
+            for member in &members {
+                owner[*member] = chunks.len();
+            }
+            chunks.push(members);
+        }
+        start = end;
+    }
+}
+
+/// Break apart any chunk whose members are not contiguous and identically
+/// ordered in every closure that consumes it.
+///
+/// A chunk is contiguous in a closure exactly when walking that closure visits
+/// the chunk in one uninterrupted stretch. Member positions also have to advance
+/// from zero in the chunk's canonical order; a different relative order would
+/// silently change the cascade after concatenation.
+fn split_incompatible_chunks(
+    protocol: &WebUIProtocol,
+    roots: &[&str],
+    index: &HashMap<&str, usize>,
+    owner: &mut [usize],
+    chunks: &mut Vec<Vec<usize>>,
+) {
+    let mut incompatible = vec![false; chunks.len()];
+    let mut seen = vec![false; chunks.len()];
+    let mut next_member = vec![0usize; chunks.len()];
+    let mut member_position = vec![usize::MAX; owner.len()];
+    for members in chunks.iter() {
+        for (position, member) in members.iter().enumerate() {
+            member_position[*member] = position;
+        }
+    }
+
+    let mut touched = Vec::with_capacity(chunks.len());
+    for root in roots {
+        let mut current = usize::MAX;
+        touched.clear();
+        for tag in closure_tags(protocol, root) {
+            let Some(component) = index.get(tag.as_str()) else {
+                continue;
+            };
+            let chunk = owner[*component];
+            if chunk == usize::MAX {
+                continue;
+            }
+            if chunk != current {
+                if seen[chunk] {
+                    incompatible[chunk] = true;
+                } else {
+                    seen[chunk] = true;
+                    touched.push(chunk);
+                }
+                current = chunk;
+            }
+            if member_position[*component] != next_member[chunk] {
+                incompatible[chunk] = true;
+            }
+            next_member[chunk] += 1;
+        }
+        for &chunk in &touched {
+            seen[chunk] = false;
+            next_member[chunk] = 0;
+        }
+    }
+    if !incompatible.iter().any(|split| *split) {
+        return;
+    }
+
+    let mut rebuilt: Vec<Vec<usize>> = Vec::with_capacity(chunks.len());
+    for (chunk, members) in chunks.iter().enumerate() {
+        if incompatible[chunk] {
+            for member in members {
+                owner[*member] = rebuilt.len();
+                rebuilt.push(vec![*member]);
+            }
+        } else {
+            for member in members {
+                owner[*member] = rebuilt.len();
+            }
+            rebuilt.push(members.clone());
+        }
+    }
+    *chunks = rebuilt;
+}
+
+/// Map a closure's component order onto chunk indices, collapsing runs.
+fn chunk_sequence(
+    protocol: &WebUIProtocol,
+    root: &str,
+    index: &HashMap<&str, usize>,
+    owner: &[usize],
+) -> Vec<u32> {
+    let mut sequence: Vec<u32> = Vec::new();
+    for tag in closure_tags(protocol, root) {
+        let Some(component) = index.get(tag.as_str()) else {
+            continue;
+        };
+        let chunk = owner[*component];
+        if chunk == usize::MAX {
+            continue;
+        }
+        // `plan_chunks` bounds the component count, and chunks never outnumber
+        // components, so this conversion always succeeds.
+        let Ok(chunk) = u32::try_from(chunk) else {
+            continue;
+        };
+        if sequence.last() != Some(&chunk) {
+            sequence.push(chunk);
+        }
+    }
+    sequence
+}
+
+/// Order the CSS tree roots that chunks may be planned for.
+///
+/// Only closures the runtime installs *as a unit* qualify: the entry document,
+/// every Shadow component (which owns its own `ShadowRoot`), and every route
+/// root (installed at its route host into the inherited tree). A plain Light
+/// component also keeps a stored closure for independent loading, but it does
+/// not own a CSS tree: its normal ancestor tree installs the covering chunk
+/// before the host connects. Treating every Light fallback as a consumer would
+/// make every component unique and prevent all merging.
+///
+/// Excluded plain-Light closures keep an empty `style_chunks`; delivery resolves
+/// a chunk only when its complete ordered membership is present in that
+/// closure, otherwise it falls back to per-component resources. This prevents a
+/// partial closure from receiving unrelated bundled CSS.
+///
+/// The entry comes first because chunks are shaped by whichever closure claims
+/// their members first and the entry is what every request pays for. Remaining
+/// roots are sorted so a build is reproducible.
+fn collect_roots<'a>(protocol: &'a WebUIProtocol, entry: &'a str) -> Vec<&'a str> {
+    let mut roots: Vec<&str> = Vec::new();
+    for (tag, component) in &protocol.components {
+        if tag != entry && component.uses_shadow_dom && protocol.style_closures.contains_key(tag) {
+            roots.push(tag.as_str());
+        }
+    }
+    for fragments in protocol.fragments.values() {
+        for fragment in &fragments.fragments {
+            let Some(web_ui_fragment::Fragment::Route(route)) = fragment.fragment.as_ref() else {
+                continue;
+            };
+            collect_route_roots(protocol, route, entry, &mut roots);
+        }
+    }
+    roots.sort_unstable();
+    roots.dedup();
+    if protocol.style_closures.contains_key(entry) {
+        roots.insert(0, entry);
+    }
+    roots
+}
+
+/// Walk a route tree iteratively, collecting every component installed as its
+/// own closure: route bodies plus their pending and error boundaries.
+fn collect_route_roots<'a>(
+    protocol: &'a WebUIProtocol,
+    route: &'a webui_protocol::WebUIFragmentRoute,
+    entry: &str,
+    roots: &mut Vec<&'a str>,
+) {
+    let mut work = vec![route];
+    while let Some(route) = work.pop() {
+        for candidate in [
+            route.fragment_id.as_str(),
+            route.pending_component.as_str(),
+            route.error_component.as_str(),
+        ] {
+            if !candidate.is_empty()
+                && candidate != entry
+                && protocol.style_closures.contains_key(candidate)
+            {
+                roots.push(candidate);
+            }
+        }
+        work.extend(route.children.iter());
+    }
+}
+
+/// Collect every component reachable from a closure, in a stable order.
+fn collect_components<'a>(protocol: &'a WebUIProtocol, roots: &[&str]) -> Vec<&'a str> {
+    let mut components: Vec<&str> = roots
+        .iter()
+        .flat_map(|root| closure_tags(protocol, root))
+        .map(String::as_str)
+        .collect();
+    components.sort_unstable();
+    components.dedup();
+    components
+}
+
+fn closure_tags<'a>(protocol: &'a WebUIProtocol, root: &str) -> &'a [String] {
+    protocol
+        .style_closures
+        .get(root)
+        .map_or(&[], |closure| closure.component_tags.as_slice())
+}
+
+/// Name a chunk after its first member so emitted files stay attributable.
+///
+/// Multi-member IDs begin with `_`, which cannot begin a custom-element name, so
+/// they cannot collide with component resource IDs. A single-member chunk keeps
+/// its component's identity because authored-Shadow templates address it by tag.
+fn chunk_name(component_tags: &[String]) -> String {
+    match component_tags.first() {
+        Some(first) if component_tags.len() > 1 => {
+            format!("_chunk-{first}-{}", component_tags.len())
+        }
+        Some(first) => first.clone(),
+        None => "chunk".to_string(),
+    }
+}
+
+fn concatenate(
+    component_tags: &[String],
+    css_by_tag: &HashMap<&str, &str>,
+) -> Result<String, WebUIError> {
+    let mut total = 0usize;
+    for tag in component_tags {
+        let css = css_by_tag
+            .get(tag.as_str())
+            .ok_or_else(|| missing_css(tag))?;
+        total += css.len() + 1;
+    }
+    let mut bundled = String::with_capacity(total);
+    for tag in component_tags {
+        let css = css_by_tag
+            .get(tag.as_str())
+            .ok_or_else(|| missing_css(tag))?;
+        if !bundled.is_empty() && !bundled.ends_with('\n') {
+            bundled.push('\n');
+        }
+        bundled.push_str(css);
+    }
+    Ok(bundled)
+}
+
+fn contains_top_level_import(source: &str) -> bool {
+    let bytes = source.as_bytes();
+    let mut index = 0usize;
+    let mut paren_depth = 0usize;
+    let mut bracket_depth = 0usize;
+    let mut statement_has_token = false;
+    while index < bytes.len() {
+        match bytes[index] {
+            b'"' | b'\'' => {
+                statement_has_token = true;
+                index = skip_quoted(source, index);
+            }
+            b'/' if bytes.get(index + 1) == Some(&b'*') => {
+                index = skip_block_comment(source, index);
+            }
+            b'/' if bytes.get(index + 1) == Some(&b'/') => {
+                index = skip_line_comment(source, index);
+            }
+            b'\\' => {
+                statement_has_token = true;
+                index = (index + 2).min(bytes.len());
+            }
+            b'(' => {
+                statement_has_token = true;
+                paren_depth += 1;
+                index += 1;
+            }
+            b')' => {
+                paren_depth = paren_depth.saturating_sub(1);
+                index += 1;
+            }
+            b'[' => {
+                statement_has_token = true;
+                bracket_depth += 1;
+                index += 1;
+            }
+            b']' => {
+                bracket_depth = bracket_depth.saturating_sub(1);
+                index += 1;
+            }
+            b'@' if paren_depth == 0
+                && bracket_depth == 0
+                && !statement_has_token
+                && is_import_at_rule(bytes, index) =>
+            {
+                return true;
+            }
+            b';' | b'{' | b'}' if paren_depth == 0 && bracket_depth == 0 => {
+                statement_has_token = false;
+                index += 1;
+            }
+            byte if byte.is_ascii_whitespace() => index += 1,
+            _ => {
+                statement_has_token = true;
+                index += 1;
+            }
+        }
+    }
+    false
+}
+
+fn is_import_at_rule(bytes: &[u8], start: usize) -> bool {
+    const IMPORT: &[u8] = b"import";
+    let Some(end) = start.checked_add(1 + IMPORT.len()) else {
+        return false;
+    };
+    if end > bytes.len() {
+        return false;
+    }
+    if !bytes[start + 1..end]
+        .iter()
+        .zip(IMPORT)
+        .all(|(actual, expected)| actual.eq_ignore_ascii_case(expected))
+    {
+        return false;
+    }
+    !bytes
+        .get(end)
+        .is_some_and(|byte| byte.is_ascii_alphanumeric() || matches!(*byte, b'-' | b'_'))
+}
+
+fn skip_quoted(source: &str, start: usize) -> usize {
+    let bytes = source.as_bytes();
+    let quote = bytes[start];
+    let mut index = start + 1;
+    while index < bytes.len() {
+        if bytes[index] == b'\\' {
+            index = (index + 2).min(bytes.len());
+        } else if bytes[index] == quote {
+            return index + 1;
+        } else {
+            index += 1;
+        }
+    }
+    bytes.len()
+}
+
+fn skip_block_comment(source: &str, start: usize) -> usize {
+    source[start + 2..]
+        .find("*/")
+        .map_or(source.len(), |offset| start + offset + 4)
+}
+
+fn skip_line_comment(source: &str, start: usize) -> usize {
+    source[start + 2..]
+        .find('\n')
+        .map_or(source.len(), |offset| start + offset + 2)
+}
+
+#[cold]
+#[inline(never)]
+fn missing_css(tag: &str) -> WebUIError {
+    WebUIError::InvalidBuildOptions(format!(
+        "CSS bundling found no compiled stylesheet for <{tag}>, but its style closure requires one"
+    ))
+}
+
+#[cold]
+#[inline(never)]
+fn css_bundle_import(tag: &str) -> WebUIError {
+    WebUIError::InvalidBuildOptions(format!(
+        "CSS bundling cannot include @import in <{tag}>; move the import to entry CSS, inline the imported rules, or disable --css-bundle"
+    ))
+}
+
+#[cold]
+#[inline(never)]
+fn style_bundle_graph_too_large() -> WebUIError {
+    WebUIError::InvalidBuildOptions("CSS bundle graph is too large to index safely".to_string())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use webui_protocol::{ComponentData, ComponentStyleClosure, FragmentList, WebUIFragment};
+
+    /// Build a protocol whose non-entry roots are genuine CSS trees.
+    ///
+    /// Only closures the runtime installs as a unit are chunked, so each
+    /// non-entry root is declared as a route root off the entry — the shape a
+    /// real routed app produces.
+    fn protocol_with(closures: &[(&str, &[&str])], strategy: CssStrategy) -> WebUIProtocol {
+        let mut fragments = HashMap::new();
+        let mut entry_fragments = Vec::new();
+        for (root, tags) in closures {
+            if *root == "index.html" {
+                continue;
+            }
+            entry_fragments.push(WebUIFragment::route(format!("/{root}"), *root));
+            fragments.insert(
+                (*root).to_string(),
+                FragmentList {
+                    fragments: tags
+                        .iter()
+                        .map(|tag| WebUIFragment::component(*tag))
+                        .collect(),
+                    contains_boundary: false,
+                },
+            );
+        }
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: entry_fragments,
+                contains_boundary: false,
+            },
+        );
+        let mut protocol = WebUIProtocol::new(fragments);
+        protocol.set_css_strategy(strategy);
+        for (root, tags) in closures {
+            protocol.style_closures.insert(
+                (*root).to_string(),
+                ComponentStyleClosure {
+                    component_tags: tags.iter().map(|tag| (*tag).to_string()).collect(),
+                    style_chunks: Vec::new(),
+                },
+            );
+            for tag in *tags {
+                protocol
+                    .components
+                    .entry((*tag).to_string())
+                    .or_insert_with(|| ComponentData {
+                        css: format!(".{tag}{{}}"),
+                        ..Default::default()
+                    });
+            }
+        }
+        protocol
+    }
+
+    fn bundle(protocol: &mut WebUIProtocol) -> Vec<(String, String)> {
+        let css: HashMap<String, String> = protocol
+            .components
+            .iter()
+            .map(|(tag, data)| (tag.clone(), data.css.clone()))
+            .collect();
+        let borrowed: HashMap<&str, &str> = css
+            .iter()
+            .map(|(tag, value)| (tag.as_str(), value.as_str()))
+            .collect();
+        bundle_style_chunks(
+            protocol,
+            "index.html",
+            &borrowed,
+            &CssLinkOptions::default(),
+        )
+        .expect("bundle")
+    }
+
+    /// The delivered rule sequence for a root, flattened back to component tags.
+    fn delivered(protocol: &WebUIProtocol, root: &str) -> Vec<String> {
+        protocol
+            .style_closure_chunks(root)
+            .expect("closure")
+            .iter()
+            .flat_map(|chunk| {
+                protocol.style_chunks[*chunk as usize]
+                    .component_tags
+                    .clone()
+            })
+            .collect()
+    }
+
+    #[test]
+    fn merges_a_contiguous_run_that_shares_one_consumer() {
+        let mut protocol = protocol_with(
+            &[("index.html", &["page-header", "page-body", "page-footer"])],
+            CssStrategy::Style,
+        );
+
+        bundle(&mut protocol);
+
+        assert_eq!(protocol.style_chunks.len(), 1);
+        assert_eq!(
+            protocol.style_chunks[0].component_tags,
+            ["page-header", "page-body", "page-footer"]
+        );
+        assert_eq!(
+            protocol.style_chunks[0].css,
+            ".page-header{}\n.page-body{}\n.page-footer{}"
+        );
+        assert_eq!(
+            protocol.style_closure_chunks("index.html"),
+            Some([0].as_slice())
+        );
+    }
+
+    #[test]
+    fn splits_shared_components_away_from_route_local_ones() {
+        let mut protocol = protocol_with(
+            &[
+                ("index.html", &["app-shell", "home-hero"]),
+                ("about-page", &["app-shell", "about-body"]),
+            ],
+            CssStrategy::Style,
+        );
+
+        bundle(&mut protocol);
+
+        // app-shell is reached by both roots, so it cannot merge into either
+        // route's bundle without being downloaded twice.
+        let shared: Vec<&[String]> = protocol
+            .style_chunks
+            .iter()
+            .map(|chunk| chunk.component_tags.as_slice())
+            .collect();
+        assert!(shared.contains(&["app-shell".to_string()].as_slice()));
+        assert_eq!(
+            delivered(&protocol, "index.html"),
+            ["app-shell", "home-hero"]
+        );
+        assert_eq!(
+            delivered(&protocol, "about-page"),
+            ["app-shell", "about-body"]
+        );
+    }
+
+    #[test]
+    fn never_delivers_a_component_a_closure_did_not_ask_for() {
+        let mut protocol = protocol_with(
+            &[
+                ("index.html", &["app-shell", "home-hero", "home-list"]),
+                ("about-page", &["app-shell", "about-body"]),
+            ],
+            CssStrategy::Style,
+        );
+
+        bundle(&mut protocol);
+
+        for root in ["index.html", "about-page"] {
+            let expected = protocol.style_closure(root).expect("closure").to_vec();
+            assert_eq!(delivered(&protocol, root), expected);
+        }
+    }
+
+    #[test]
+    fn independently_loaded_light_closure_does_not_receive_partial_chunk() {
+        let mut protocol = WebUIProtocol::new(HashMap::new());
+        protocol.set_css_strategy(CssStrategy::Style);
+        protocol.style_closures.insert(
+            "index.html".to_string(),
+            ComponentStyleClosure {
+                component_tags: ["a-card", "b-card"]
+                    .into_iter()
+                    .map(str::to_string)
+                    .collect(),
+                style_chunks: Vec::new(),
+            },
+        );
+        protocol.style_closures.insert(
+            "lazy-panel".to_string(),
+            ComponentStyleClosure {
+                component_tags: vec!["a-card".to_string()],
+                style_chunks: Vec::new(),
+            },
+        );
+        for tag in ["a-card", "b-card"] {
+            protocol.components.insert(
+                tag.to_string(),
+                ComponentData {
+                    css: format!(".{tag}{{}}"),
+                    ..Default::default()
+                },
+            );
+        }
+        let css = HashMap::from([("a-card", ".a-card{}"), ("b-card", ".b-card{}")]);
+
+        bundle_style_chunks(
+            &mut protocol,
+            "index.html",
+            &css,
+            &CssLinkOptions::default(),
+        )
+        .expect("bundle");
+
+        let chunks: Vec<Vec<String>> = protocol
+            .style_chunks
+            .iter()
+            .map(|chunk| chunk.component_tags.clone())
+            .collect();
+        assert_eq!(
+            chunks,
+            vec![vec!["a-card".to_string(), "b-card".to_string()]]
+        );
+        assert_eq!(
+            protocol.style_closure_chunks("lazy-panel"),
+            Some([].as_slice())
+        );
+        let chunk_index = protocol.style_chunk_index();
+        let closure = protocol.style_closures.get("lazy-panel").unwrap();
+        let unit = protocol
+            .style_closure_unit(closure, &chunk_index, 0)
+            .expect("component closure unit");
+        assert_eq!(unit.name, "a-card");
+        assert_eq!(unit.chunk, None);
+        assert_eq!(
+            protocol.style_chunk_members(0),
+            Some(["a-card".to_string(), "b-card".to_string()].as_slice())
+        );
+    }
+
+    #[test]
+    fn preserves_cascade_order_when_a_shared_run_is_interleaved() {
+        // `index.html` orders the shared pair adjacently; `about-page` splits
+        // them around a local component, so the pair must not merge.
+        let mut protocol = protocol_with(
+            &[
+                ("index.html", &["shared-a", "shared-b"]),
+                ("about-page", &["shared-a", "about-body", "shared-b"]),
+            ],
+            CssStrategy::Style,
+        );
+
+        bundle(&mut protocol);
+
+        assert_eq!(delivered(&protocol, "index.html"), ["shared-a", "shared-b"]);
+        assert_eq!(
+            delivered(&protocol, "about-page"),
+            ["shared-a", "about-body", "shared-b"]
+        );
+    }
+
+    #[test]
+    fn preserves_cascade_order_when_consumers_reverse_a_shared_run() {
+        let mut protocol = protocol_with(
+            &[
+                ("index.html", &["shared-a", "shared-b"]),
+                ("about-page", &["shared-b", "shared-a"]),
+            ],
+            CssStrategy::Style,
+        );
+
+        bundle(&mut protocol);
+
+        assert_eq!(delivered(&protocol, "index.html"), ["shared-a", "shared-b"]);
+        assert_eq!(delivered(&protocol, "about-page"), ["shared-b", "shared-a"]);
+        assert!(
+            protocol
+                .style_chunks
+                .iter()
+                .all(|chunk| chunk.component_tags.len() == 1),
+            "oppositely ordered members cannot share a chunk"
+        );
+    }
+
+    #[test]
+    fn emits_one_file_per_chunk_for_link_builds() {
+        let mut protocol = protocol_with(
+            &[("index.html", &["page-header", "page-body"])],
+            CssStrategy::Link,
+        );
+
+        let files = bundle(&mut protocol);
+
+        assert_eq!(files.len(), 1);
+        assert_eq!(files[0].0, "_chunk-page-header-2.css");
+        assert_eq!(files[0].1, ".page-header{}\n.page-body{}");
+        assert!(protocol.style_chunks[0].css.is_empty());
+        assert_eq!(
+            protocol.style_chunks[0].css_href,
+            "_chunk-page-header-2.css"
+        );
+        assert_eq!(
+            protocol.style_chunk_resource(0),
+            Some(("_chunk-page-header-2", "_chunk-page-header-2.css"))
+        );
+    }
+
+    #[test]
+    fn rejects_top_level_imports_when_bundling() {
+        let mut protocol = protocol_with(
+            &[("index.html", &["page-header", "page-body"])],
+            CssStrategy::Style,
+        );
+        protocol.components.get_mut("page-header").unwrap().css =
+            "@import \"base.css\"; .header{}".to_string();
+        let css = HashMap::from([
+            ("page-header", "@import \"base.css\"; .header{}"),
+            ("page-body", ".body{}"),
+        ]);
+
+        let error = bundle_style_chunks(
+            &mut protocol,
+            "index.html",
+            &css,
+            &CssLinkOptions::default(),
+        )
+        .expect_err("bundled @import must fail");
+        assert!(error.to_string().contains("disable --css-bundle"));
+    }
+
+    #[test]
+    fn import_detection_ignores_values_and_comments() {
+        assert!(!contains_top_level_import(
+            ".card{--url:@import;content:\"@import\"}/* @import \"x\" */"
+        ));
+        assert!(contains_top_level_import("@IMPORT \"base.css\";"));
+    }
+
+    #[test]
+    fn names_a_single_component_chunk_after_that_component() {
+        let mut protocol = protocol_with(
+            &[
+                ("index.html", &["shared-card"]),
+                ("about-page", &["shared-card"]),
+            ],
+            CssStrategy::Link,
+        );
+
+        let files = bundle(&mut protocol);
+
+        assert_eq!(files.len(), 1);
+        assert_eq!(files[0].0, "shared-card.css");
+    }
+
+    #[test]
+    fn multi_member_chunk_ids_cannot_collide_with_component_tags() {
+        let mut protocol = protocol_with(
+            &[
+                ("index.html", &["a-card", "b-card", "chunk-a-card-2"]),
+                ("about-page", &["chunk-a-card-2"]),
+            ],
+            CssStrategy::Style,
+        );
+
+        bundle(&mut protocol);
+
+        let names: Vec<&str> = protocol
+            .style_chunks
+            .iter()
+            .map(|chunk| chunk.name.as_str())
+            .collect();
+        assert!(names.contains(&"_chunk-a-card-2"));
+        assert!(names.contains(&"chunk-a-card-2"));
+    }
+
+    #[test]
+    fn plans_nothing_when_no_component_has_a_stylesheet() {
+        let mut protocol = protocol_with(&[("index.html", &[])], CssStrategy::Style);
+
+        let files = bundle(&mut protocol);
+
+        assert!(files.is_empty());
+        assert!(protocol.style_chunks.is_empty());
+        assert_eq!(
+            protocol.style_closure_chunks("index.html"),
+            Some([].as_slice())
+        );
+    }
+
+    #[test]
+    fn produces_the_same_plan_on_every_run() {
+        let closures: &[(&str, &[&str])] = &[
+            ("index.html", &["app-shell", "home-hero"]),
+            ("about-page", &["app-shell", "about-body"]),
+            ("contact-page", &["app-shell", "about-body", "contact-form"]),
+        ];
+
+        let mut first = protocol_with(closures, CssStrategy::Style);
+        bundle(&mut first);
+        for _ in 0..8 {
+            let mut next = protocol_with(closures, CssStrategy::Style);
+            bundle(&mut next);
+            assert_eq!(next.style_chunks, first.style_chunks);
+            assert_eq!(next.style_closures, first.style_closures);
+        }
+    }
+}
diff --git a/docs/.webui-press/components/code-comparison/code-comparison.html b/docs/.webui-press/components/code-comparison/code-comparison.html
index 7d96c3cfa..32f6e07c9 100644
--- a/docs/.webui-press/components/code-comparison/code-comparison.html
+++ b/docs/.webui-press/components/code-comparison/code-comparison.html
@@ -1,10 +1,12 @@
-<div class="grid">
-  <div class="panel">
-    <div class="label">{{leftLabel}}</div>
-    <slot name="left"></slot>
+<template shadowrootmode="open">
+  <div class="grid">
+    <div class="panel">
+      <div class="label">{{leftLabel}}</div>
+      <slot name="left"></slot>
+    </div>
+    <div class="panel">
+      <div class="label">{{rightLabel}}</div>
+      <slot name="right"></slot>
+    </div>
   </div>
-  <div class="panel">
-    <div class="label">{{rightLabel}}</div>
-    <slot name="right"></slot>
-  </div>
-</div>
+</template>
diff --git a/docs/.webui-press/components/docs-playground/docs-playground.ts b/docs/.webui-press/components/docs-playground/docs-playground.ts
index ed74f0e25..9d15d15c4 100644
--- a/docs/.webui-press/components/docs-playground/docs-playground.ts
+++ b/docs/.webui-press/components/docs-playground/docs-playground.ts
@@ -23,7 +23,12 @@ import { json as jsonLang } from "@codemirror/lang-json";
 import { css as cssLang } from "@codemirror/lang-css";
 
 interface WasmModule {
-  build_protocol(files: Record<string, string>, entry: string): Uint8Array;
+  build_protocol(
+    files: Record<string, string>,
+    entry: string,
+    projectionManifests?: unknown[],
+    dom?: 'shadow' | 'light',
+  ): Uint8Array;
   Protocol: new (protocol: Uint8Array, plugin?: string) => {
     renderStream(
     state: string,
diff --git a/docs/.webui-press/config.json b/docs/.webui-press/config.json
index f56d055db..d92470964 100644
--- a/docs/.webui-press/config.json
+++ b/docs/.webui-press/config.json
@@ -292,7 +292,7 @@
       {
         "icon": "◇",
         "title": "webui-framework",
-        "description": "A tiny client runtime for Web Components, tuned for rendering speed and low memory. Built on Declarative Shadow DOM and native browser APIs. No virtual DOM, no proprietary component model, no JSX."
+        "description": "A tiny client runtime for Web Components, tuned for rendering speed and low memory. Built on authored global Light DOM, opt-in Declarative Shadow DOM, and native browser APIs. No virtual DOM, no proprietary component model, no JSX."
       },
       {
         "icon": "↗",
diff --git a/docs/ai/SKILL.md b/docs/ai/SKILL.md
index 14aeff7fc..2201b13fa 100644
--- a/docs/ai/SKILL.md
+++ b/docs/ai/SKILL.md
@@ -298,10 +298,13 @@ state that a template binding could express.
 
 ### The `<template>` tag
 
-The `<template shadowrootmode="open">` wrapper is **optional**. The build tool
-auto-injects it when absent.
+Unwrapped components default to Shadow. In a `--dom light` build they use
+authored/global Light DOM:
 
-Omit it for most components:
+A sole bare top-level `<template>` is also an explicit Light wrapper and is
+unwrapped, even when the build fallback is Shadow. Templates with attributes or
+`w-render`/`w-hydrate` are not mode selectors; nested templates remain inert
+template content.
 
 ```html
 <!-- my-card.html -->
@@ -309,7 +312,10 @@ Omit it for most components:
 <p>{{description}}</p>
 ```
 
-Include it only when you need root host events on the component root:
+In a Light build, use a sole top-level
+`<template shadowrootmode="open">` when the component must remain Shadow for a
+native `<slot>`, native isolation, CSS-heavy frequent restyling, or root host
+events:
 
 ```html
 <!-- todo-app.html -->
@@ -323,12 +329,17 @@ Include it only when you need root host events on the component root:
 </template>
 ```
 
-Root host events catch custom events bubbling up from child components. To arrive
-from a child, an event must bubble and - to cross the child's shadow boundary -
-be `composed`; `this.$emit()` sets both whenever the emitting component has a
-shadow root (the default), but a hand-built `new CustomEvent(name)` defaults to
-neither and will never reach the root - pass `{ bubbles: true, composed: true }`
-or bind it on the child element.
+The wrapper must contain the complete component. `closed`, a dynamic or invalid
+value, placement on another element, multiple declarations, or extra top-level
+content fails the build. `<slot>` is a build error only when the effective mode
+is Light.
+
+Root host events catch custom events bubbling up from child components. To
+cross any Shadow boundary between the child and the listener, an event must
+bubble and be `composed`; `this.$emit()` always sets both so Light components
+nested in a Shadow tree work too. A hand-built `new CustomEvent(name)` defaults
+to neither and will never reach the root - pass
+`{ bubbles: true, composed: true }` or bind it on the child element.
 
 The binding sits on the host element, so it also catches events targeted at the
 host itself - what host-interactive components (host `tabindex`, presentational
@@ -370,30 +381,40 @@ self-closing form is preferred.
 
 ## Styling
 
-CSS is scoped per component via Shadow DOM. No CSS-in-JS, no inline styles
-written from script, no runtime style injection.
+Keep ordinary paired component CSS. Light CSS is authored/global in its owning
+Document or ShadowRoot; selectors, keyframes, and cascade layers are not
+rewritten. Shadow components retain native Shadow CSS scoping. No CSS-in-JS or
+styles written from script.
 
 ```css
 /* my-component.css */
-:host {
+my-component {
   display: block;
   padding: 1rem;
 }
 
-:host([disabled]) {
+my-component[disabled] {
   opacity: 0.5;
   pointer-events: none;
 }
 
-:host([variant="primary"]) {
+my-component[variant="primary"] {
   background: var(--colorBrandBackground);
 }
 
 .header { font-weight: bold; }
 ```
 
-- `:host` styles the component root; `:host([attr])` styles by attribute.
-- Internal selectors are scoped to the shadow root. No styles leak in or out.
+- `:host` styles the component root only in Shadow DOM. In Light DOM, target
+  the component tag directly, for example `my-card` or `my-card[disabled]`.
+- Light DOM preserves normal inheritance and global cascade. Parent rules can
+  reach Light descendants and matching selectors can affect other Light
+  components in the same CSS tree.
+- `:host`, `:host-context`, and `::slotted` fail with
+  `unsupported-light-css` in effective Light components; use ordinary
+  selectors or author an open Shadow root.
+- `data-wl` and `data-wl-*` are ordinary author attributes; WebUI no longer
+  generates or reserves them for Light CSS.
 - Use CSS custom properties for theming. Nested fallbacks like
   `var(--primary, var(--fallback))` are also discovered as tokens.
 - Malformed CSS fails the build, including unterminated `var()` calls,
@@ -889,6 +910,14 @@ the router for routed components.
 - Child paths are relative to the parent (no leading `/`).
 - Use `exact` on leaf routes; omit it on parents that have `<outlet />`.
 - Path params: `:id` (required), `:query?` (optional), `*path` (catch-all).
+- Initial SSR delivers CSS only for the matched route chain; inactive route
+  styles remain deferred until navigation. Matched route CSS targeting the
+  Document is applied before `</head>`. ShadowRoot-targeted Link CSS is preloaded
+  from the head and applied inside its owning root. Static request-reachable
+  Shadow roots are preloaded the same way.
+- FAST 2/3 plugins require effective Shadow components. An unwrapped component
+  under `dom: "light"` fails with `fast-light-dom-unsupported`; use the WebUI
+  plugin for global Light DOM.
 
 | Attribute | Example | Description |
 |---|---|---|
@@ -1149,6 +1178,10 @@ Before emitting WebUI code, confirm:
 - [ ] `::view-transition-*` rules are in the entry template, not component CSS.
 - [ ] `prefers-reduced-motion` is honored wherever motion is used.
 - [ ] No conditions mix `&&` with `||`, use parentheses, or use a ternary.
+- [ ] Every native `<slot>` resolves to Shadow DOM; in a `--dom light` build its
+      component authors a sole top-level `<template shadowrootmode="open">`.
+- [ ] A sole bare top-level `<template>` is an explicit Light wrapper and is
+      unwrapped even when the build fallback is Shadow.
 
 ## Build and run
 
@@ -1164,10 +1197,17 @@ webui inspect ./dist/protocol.bin
 ```
 
 Common flags on both commands: `--entry`, `--css <link|style|module>`,
-`--dom <shadow|light>`, `--components`, `--theme`,
+`--dom <shadow|light>` (default `shadow`),
+`--css-bundle` (merge component stylesheets into shared chunks; not valid with
+`--css module`), `--components`, `--theme`,
 `--projection-manifest`, `--emit-component-assets`, `--metafile`,
 `--format json`.
 
+Unwrapped components default to Shadow. Under `--dom light`, they use
+authored/global Light DOM while a sole top-level
+`<template shadowrootmode="open">` remains a Shadow island. A sole bare
+`<template>` explicitly selects Light and is unwrapped.
+
 Authoring mistakes fail the build with a structured diagnostic carrying a stable
 code, source location, snippet, and a `help:` fix. Branch on the `code`, never
 the message. `--format json` emits one JSON object per error on stdout.
diff --git a/docs/guide/cli/index.md b/docs/guide/cli/index.md
index a02f39fb6..aa2b32dc5 100644
--- a/docs/guide/cli/index.md
+++ b/docs/guide/cli/index.md
@@ -33,7 +33,7 @@ Use `--format json` in editors, CI, or AI/agent tooling that needs to parse buil
 Build a WebUI application from an app folder.
 
 ```bash
-webui build [APP] --out <OUT> [--entry <FILE>] [--css <MODE>] [--plugin <NAME>] [--components <SOURCE>]... [--projection-manifest <PATH>]... [--emit-component-assets <TAGS>] [--metafile <PATH>] [--theme <VALUE>] [--asset-file-name-template <TEMPLATE>] [--css-public-base <BASE>] [--legal-comments <MODE>]
+webui build [APP] --out <OUT> [--entry <FILE>] [--css <MODE>] [--dom <MODE>] [--css-bundle] [--plugin <NAME>] [--components <SOURCE>]... [--projection-manifest <PATH>]... [--emit-component-assets <TAGS>] [--metafile <PATH>] [--theme <VALUE>] [--asset-file-name-template <TEMPLATE>] [--css-public-base <BASE>] [--legal-comments <MODE>]
 ```
 
 **Arguments:**
@@ -44,8 +44,9 @@ webui build [APP] --out <OUT> [--entry <FILE>] [--css <MODE>] [--plugin <NAME>]
 | `--out <OUT>` | Output folder for protocol and assets, or a `.bin` file path to set the protocol filename (e.g. `./dist/app1.bin`) | *(required)* |
 | `--entry <FILE>` | Entry HTML file name | `index.html` |
 | `--css <STRATEGY>` | CSS delivery strategy: `link`, `style`, or `module` | `link` |
+| `--dom <MODE>` | Fallback for components without an authored Shadow root: `shadow` or `light` | `shadow` |
+| `--css-bundle` | Merge component stylesheets into shared chunks. Composes with `--css`; rejected with `--css module`. | *(off)* |
 | `--plugin <NAME>` | Load a parser plugin | *(none)* |
-| `--dom <STRATEGY>` | DOM strategy: `shadow` or `light` | `shadow` |
 | `--components <SOURCE>` | Additional component sources (npm packages or local paths). Repeatable. | *(none)* |
 | `--projection-manifest <PATH>` | Bundler projection manifest fragment. Repeatable and valid only with `--plugin=webui`. | *(none; full state)* |
 | `--emit-component-assets <TAGS>` | Comma-separated root component tags to emit as static WebUI component assets in `--out` | *(none)* |
@@ -63,9 +64,20 @@ URI-style values.
 
 | Mode | Behavior |
 |------|----------|
-| `link` | Emits `<link>` tags referencing external `.css` files. CSS files are copied to the output folder. |
-| `style` | Embeds CSS content directly in `<style>` tags inside shadow DOM templates. No separate CSS files are written. |
-| `module` | Emits `<script type="importmap">{"imports":{"component":"data:text/css,..."}}</script>` tags that register each component's CSS under a data URI, and adds `shadowrootadoptedstylesheets` to `<template>` tags. The browser shares a single `CSSStyleSheet` across all shadow roots that adopt it. No separate CSS files are written. Based on the [Import Maps](https://html.spec.whatwg.org/multipage/webappapis.html#import-maps) and [CSS Module Scripts](https://github.com/whatwg/html/issues/9572) proposals. If a component supplies its own `<template>` wrapper (e.g. to attach `@event` handlers), WebUI preserves the wrapper attributes and appends `shadowrootadoptedstylesheets="component-name"` when it is missing. |
+| `link` | Emits external `.css` files and installs their `<link>` resources in compiler-defined cascade order. |
+| `style` | Installs compiled CSS in `<style>` elements. No separate CSS files are written. |
+| `module` | Delivers compiled CSS with an SSR fallback and shares imported CSS module stylesheets across component instances when supported. No separate CSS files are written. |
+
+All modes support Light and Shadow components. A component's ordinary paired
+CSS file remains authored/global CSS in Light DOM and remains native Shadow CSS
+in Shadow DOM. Resources are installed once per Document or ShadowRoot in
+first-discovery order, including partial navigation, streaming, and static
+component assets. Full-document SSR installs Document resources before
+`</head>`. When the document omits an explicit head, resources precede document
+content while remaining immediately after any leading doctype.
+Document fragment renders install resources before fragment content; a Shadow
+component rendered directly as the entry installs them inside
+its declarative root.
 
 For long-lived CDN/browser caching, include `[hash]` in
 `--asset-file-name-template`. `[hash]` is the emitted file's SHA-256 content hash
@@ -75,6 +87,60 @@ emitted in `<link>` tags. Templates must be ASCII filenames. URL delimiters
 (`#`, `%`, and `?`), path separators, whitespace, control characters, and
 Windows-reserved filename characters are rejected.
 
+**CSS bundling:**
+
+Every component stylesheet is render-blocking, so one file per component costs a
+request each and forfeits cross-file compression. `--css-bundle` merges component
+stylesheets into shared chunks:
+
+```bash
+webui build ./my-app --out ./dist --css link --css-bundle
+```
+
+It composes with `--css` rather than replacing it: bundling decides how
+stylesheets are *grouped*, `--css` decides how they *reach the page*. A Link
+build gets fewer `<link>` tags and requests, and a Style build gets fewer inline
+blocks.
+
+Chunks split rather than duplicate. Only components reached by an identical set
+of CSS trees share a chunk, so a stylesheet used by several routes lands in its
+own chunk and is downloaded and cached once instead of being copied into every
+route bundle. Cascade order is preserved exactly: a chunk's members must be
+adjacent and identically ordered in every closure that contains them. The
+compiler verifies both properties and splits any incompatible chunk.
+
+Chunks are named `_chunk-<first-member>-<count>`, or the component's own tag when
+a chunk has a single member. The leading underscore keeps multi-member resource
+IDs distinct from legal component tags. Link builds retain per-component files
+as independently loaded component and older-handler fallbacks, but current
+handlers link only chunks on the bundled path, so the fallbacks add no requests.
+
+Pair bundling with content-hashed filenames so chunks can be served immutably:
+
+```bash
+webui build ./my-app --out ./dist --css link --css-bundle \
+  --asset-file-name-template "[name]-[hash].[ext]"
+```
+
+The default template is `[name].[ext]`, which emits `_chunk-nav-4.css`. That name
+is stable across builds even when the CSS inside it changes, so it cannot carry a
+long `Cache-Control: max-age=…, immutable`. With `[hash]` the same chunk becomes
+`_chunk-nav-4-36c58ce5.css` and changes only when its bytes change, which is what
+makes a shared chunk worth sharing: it stays in cache across deploys and across
+routes.
+
+Measured on a 26-component example over HTTP/2 with Brotli, bundling is a byte
+and CSSOM optimization first: 14% fewer compressed CSS bytes (identical rules
+compress better in fewer, larger files) and 27% fewer `CSSStyleSheet` objects,
+both deterministic. Load-time metrics improve by low single-digit percentages.
+The win is substantially larger over HTTP/1.1, where request count is bounded by
+head-of-line blocking rather than multiplexed.
+
+`--css-bundle` is rejected with `--css module`, which already inlines every
+stylesheet as a data URI: there is no request to merge, and module specifiers are
+resolved per component at compile time. Bundling is off by default, so protocol
+size and emitted resource names are unchanged unless you opt in.
+
 **Component assets:**
 
 Use `--emit-component-assets` with the WebUI plugin to prebuild CDN-loadable
@@ -102,6 +168,10 @@ Dependencies shared by the same two or more roots are emitted once as
 chunks it needs. Requested-root order does not change ownership, bytes, or
 hashes. Asset-only records are removed from `protocol.bin`.
 
+Component assets use version 3 with a required, atomically registered
+`componentStyles` catalog. Other versions and assets without the catalog are
+rejected before registration.
+
 `--metafile` writes esbuild-compatible `inputs` and `outputs`, including every
 root-to-chunk `dynamic-import` edge and exact byte attribution. It can be opened
 directly in an esbuild bundle analyzer or consumed by build tooling. The
@@ -156,12 +226,31 @@ With the default `--legal-comments inline`, CSS comments that contain
 `@license` or `@preserve`, or start with `/*!` or `//!`, are preserved inline.
 Use `--legal-comments none` to strip all non-signal comments.
 
-**DOM Strategies:**
+**Component DOM ownership:**
 
-| Strategy | Behavior |
-|----------|----------|
-| `shadow` | Components render inside `<template shadowrootmode="open">`. Style encapsulation via Shadow DOM. Default. |
-| `light` | Components render as direct children. No shadow boundary. 26% faster FCP on high-component-count pages. |
+Shadow is the backward-compatible default: unwrapped component content receives
+a compiler-generated open Shadow root. Pass `--dom light` to render unwrapped
+components as direct Light DOM children with authored/global CSS in their
+owning CSS tree. Light CSS is not selector-rewritten or marker-scoped, so
+ordinary selectors can reach other Light DOM in that tree. In either build mode,
+a sole bare top-level `<template>` explicitly selects Light and is unwrapped.
+A sole top-level `<template shadowrootmode="open">` is authoritative and keeps
+that component Shadow, so either build can contain explicit Shadow islands.
+Templates with attributes and policy wrappers such as `w-render` remain
+ordinary/policy content rather than selecting a mode.
+
+`:host`, `:host(...)`, `:host-context(...)`, and `::slotted(...)` are Shadow-only
+and fail with `unsupported-light-css` in effective Light CSS. Use ordinary
+selectors such as the component tag, or author an open Shadow root.
+
+Closed roots and invalid values or placement always fail the build. Native
+`<slot>` is allowed in effective Shadow components and rejected in effective
+Light components.
+
+FAST 2/3 plugins currently require effective Shadow components. Combining
+`--plugin fast`, `fast-v2`, or `fast-v3` with an unwrapped component under
+`--dom light` fails with `fast-light-dom-unsupported` instead of allowing the
+FAST client runtime to replace Light SSR with a Shadow root.
 
 See [Performance - Light DOM vs Shadow DOM](/guide/concepts/performance#light-dom-vs-shadow-dom) for benchmarks and guidance.
 
@@ -177,6 +266,9 @@ webui build ./my-app --out ./dist
 # Use a custom entry file
 webui build ./my-app --out ./dist --entry home.html
 
+# Opt into mixed Light DOM with authored Shadow islands
+webui build ./my-app --out ./dist --dom light
+
 # Build with style CSS (no external CSS files)
 webui build ./my-app --out ./dist --css style
 
@@ -249,7 +341,7 @@ webui inspect dist/protocol.bin | jq '.fragments | keys | length'
 Start a development server that builds, renders, and serves a WebUI application. Enable live reload with `--watch`.
 
 ```bash
-webui serve [APP] --state <FILE> [--servedir <DIR>] [--watch] [--port <PORT>] [--entry <FILE>] [--css <MODE>] [--dom <MODE>] [--plugin <NAME>] [--components <SOURCE>]... [--projection-manifest <PATH>]... [--api-port <PORT>] [--emit-component-assets <TAGS>] [--metafile <PATH>] [--theme <VALUE>] [--asset-file-name-template <TEMPLATE>] [--css-public-base <BASE>] [--legal-comments <MODE>]
+webui serve [APP] --state <FILE> [--servedir <DIR>] [--watch] [--port <PORT>] [--entry <FILE>] [--css <MODE>] [--dom <MODE>] [--css-bundle] [--plugin <NAME>] [--components <SOURCE>]... [--projection-manifest <PATH>]... [--api-port <PORT>] [--emit-component-assets <TAGS>] [--metafile <PATH>] [--theme <VALUE>] [--asset-file-name-template <TEMPLATE>] [--css-public-base <BASE>] [--legal-comments <MODE>]
 ```
 
 **Arguments:**
@@ -263,8 +355,9 @@ webui serve [APP] --state <FILE> [--servedir <DIR>] [--watch] [--port <PORT>] [-
 | `--port <PORT>` | Port to bind the development server | `3000` |
 | `--entry <FILE>` | Entry HTML file name | `index.html` |
 | `--css <MODE>` | CSS delivery strategy: `link`, `style`, or `module` | `link` |
+| `--dom <MODE>` | Fallback for components without an authored Shadow root: `shadow` or `light` | `shadow` |
+| `--css-bundle` | Merge component stylesheets into shared chunks. Composes with `--css`; rejected with `--css module`. | *(off)* |
 | `--plugin <NAME>` | Load parser + handler plugins (e.g., `webui`) | *(none)* |
-| `--dom <STRATEGY>` | DOM strategy: `shadow` or `light` | `shadow` |
 | `--components <SOURCE>` | Additional component sources (npm packages or local paths). Repeatable. | *(none)* |
 | `--projection-manifest <PATH>` | Bundler projection manifest fragment. Repeatable and valid only with `--plugin=webui`. | *(none; full state)* |
 | `--api-port <PORT>` | Proxy route requests to your API server. JSON responses provide buffered state; `application/x-webui-stream` responses drive progressive boundary rendering. Encoded paths and queries are forwarded unchanged. | *(none)* |
diff --git a/docs/guide/concepts/best-practices.md b/docs/guide/concepts/best-practices.md
index 2fb94dab6..138fd3501 100644
--- a/docs/guide/concepts/best-practices.md
+++ b/docs/guide/concepts/best-practices.md
@@ -317,9 +317,11 @@ onThemeChanged(): void {
 ```
 
 ```html
-<div ?data-dark="{{theme == 'dark'}}">
-  <slot></slot>
-</div>
+<template shadowrootmode="open">
+  <div ?data-dark="{{theme == 'dark'}}">
+    <slot></slot>
+  </div>
+</template>
 ```
 
 ```css
@@ -371,43 +373,63 @@ This is roughly 15 KB - the handler renders faster, the network transfer is smal
 
 ## Light DOM vs Shadow DOM
 
-WebUI defaults to Shadow DOM for style encapsulation, but Light DOM is available when performance is the priority.
+Shadow is the default fallback for unwrapped component content. Build with
+`--dom light` to make unwrapped components Light with authored/global CSS in
+their owning CSS tree. Selectors and template elements receive no compiler
+ownership markers; normal CSS cascade and inheritance apply across Light
+components. Use deliberate
+tag/class names, `@layer`, and custom properties when composition needs
+predictable ordering.
+
+A sole bare top-level `<template>` is an explicit Light-mode wrapper even in a
+`--dom shadow` build; WebUI removes the wrapper before rendering. A template
+with attributes, a `w-render`/`w-hydrate` policy wrapper, or a nested template
+does not select a mode. Use `<template shadowrootmode="open">` for explicit
+Shadow DOM.
+
+`:host`, `:host(...)`, `:host-context(...)`, and `::slotted(...)` are Shadow-only
+and fail with `unsupported-light-css` in Light components. Use an ordinary
+selector such as the component tag, or keep that component Shadow. Raw
+`{{{html}}}` bindings do not change the CSS behavior.
 
 ### Performance Comparison
 
-| Metric | Shadow DOM | Light DOM | Improvement |
-|--------|-----------|-----------|-------------|
-| First Contentful Paint | Baseline | 26% faster | Fewer shadow roots to process |
-| Layout Operations | Baseline | 60% fewer | No shadow boundary recalculations |
+Light generally reduces ShadowRoot/stylesheet-object count and improves
+bundling, SSR throughput, and document completion. Shadow supplies a native CSS
+tree boundary and can be faster when large repeated components recalculate
+styles frequently. Choose based on workload rather than assuming either mode is
+always faster.
 | Memory per Component | Baseline | Lower | No shadow root overhead |
 
 ### When to Use Each
 
-**Shadow DOM** (default):
-
-- Components with styles that must not leak or be affected by the page
-- Third-party components embedded in unknown host pages
-- Design system components where style isolation is a requirement
+**Light DOM** (`--dom light`, unwrapped templates):
 
-**Light DOM**:
+- Mostly static or moderately styled application composition
+- Components that benefit from normal inheritance and a flatter DOM
+- Components that benefit from shared bundled CSS
 
-- High-component-count pages (tables with hundreds of rows, long lists)
-- Performance-critical rendering paths where FCP matters
-- Pages where global CSS is acceptable and preferred
+**Shadow DOM**:
 
-### Enabling Light DOM
+- Components that use native `<slot>` composition
+- Third-party components embedded in unknown host pages
+- Components that specifically require a native Shadow boundary
+- CSS-heavy, highly repeated components with frequent class/attribute changes
 
-```bash
-webui build ./src --out ./dist --dom=light
-```
+### Authoring Shadow DOM
 
-In Rust handler configuration, use `DomStrategy::Light`.
+Shadow is the default. In a `--dom light` build, wrap a component that should
+remain Shadow in the sole top-level element:
 
-<webui-blockquote appearance="tip" title="Tip" icon="💡">
-
-Start with Shadow DOM (the default). Switch individual components or pages to Light DOM only when profiling shows a measurable benefit.
+```html
+<template shadowrootmode="open">
+  <slot></slot>
+</template>
+```
 
-</webui-blockquote>
+Only `open` is supported. A closed root or invalid wrapper placement/value is a
+build error. Native `<slot>` is valid in effective Shadow components and fails
+in effective Light components.
 
 ## Summary
 
@@ -419,4 +441,6 @@ Start with Shadow DOM (the default). Switch individual components or pages to Li
 | Check `.length` for empty arrays | Server and client disagree on bare `[]`; `.length` of `0` is falsy on both |
 | Return route-scoped state | Smaller payloads, faster rendering |
 | Prefer declarative bindings over imperative DOM manipulation | Template bindings are reactive and SSR-compatible |
-| Use Light DOM for performance-critical pages | Measurably faster FCP and fewer layout operations |
+| Use `--dom light` only when its composition/network wins fit the app | Avoids trading native CSS isolation for the wrong workload |
+| Author an open wrapper for Shadow islands in a Light build | Keeps slots, encapsulation, and CSS-heavy components tree-local |
+| Put native `<slot>` only in an effective Shadow component | Native slots do not work in Light DOM |
diff --git a/docs/guide/concepts/components/index.md b/docs/guide/concepts/components/index.md
index b94552177..d3094fa13 100644
--- a/docs/guide/concepts/components/index.md
+++ b/docs/guide/concepts/components/index.md
@@ -32,9 +32,9 @@ decorators, or imperative APIs.
 
 ### The `<template>` Tag
 
-The `<template shadowrootmode="open">` wrapper is **optional** in component HTML files. The build tool auto-injects it when it is not present.
-
-Most components omit it and write just the content:
+Most components write only their content. Shadow is the default fallback for
+that unwrapped content; build with `--dom light` to render it directly in the
+host:
 
 ```html
 <!-- user-card.html -->
@@ -43,7 +43,14 @@ Most components omit it and write just the content:
 <p>{{email}}</p>
 ```
 
-Include it explicitly when you need **root host events** - event listeners on the component root that catch events bubbling up from children, including events targeted at the host element itself:
+A sole bare top-level `<template>` is an explicit Light-mode wrapper and is
+unwrapped even when the build fallback is Shadow. Templates with attributes or
+policy directives do not select a mode; use the `shadowrootmode` attribute for
+an explicit Shadow root.
+
+In a Light build, use a sole top-level
+`<template shadowrootmode="open">` when a component must remain Shadow for a
+native `<slot>`, native encapsulation, or root events on the host element:
 
 ```html
 <!-- task-list.html -->
@@ -57,7 +64,9 @@ Include it explicitly when you need **root host events** - event listeners on th
 </template>
 ```
 
-When you include the `<template>` tag, the framework uses yours instead of auto-injecting one.
+The wrapper must contain the complete component. Closed roots, invalid values
+or placement, additional top-level content, and `<slot>` in an unwrapped
+component fail the build. The compiler never generates this wrapper.
 
 Component templates must use browser-valid HTML nesting. WebUI recognizes native
 void tags case-insensitively and accounts for the `<colgroup>` and `<tbody>` that
@@ -77,7 +86,8 @@ When WebUI discovers components:
 
 2. **Runtime**:
    - The server-side handler renders components based on state
-   - Components are output as Declarative Shadow DOM elements
+   - Unwrapped components follow the build's Shadow/Light fallback
+   - Components with a valid sole open wrapper always output Declarative Shadow DOM
    - Dynamic content is injected according to the protocol
 
 ## Component Organization
@@ -165,7 +175,7 @@ The TypeScript file lives alongside the HTML and CSS:
 ```
 user-card/
 ├── user-card.html   ← Template (declarative)
-├── user-card.css    ← Styles (scoped via Shadow DOM)
+├── user-card.css    ← Styles (scoped at build time)
 └── user-card.ts     ← Behavior (TypeScript class)
 ```
 
@@ -174,7 +184,8 @@ user-card/
 WebUI intentionally keeps HTML, CSS, and TypeScript in separate files:
 
 - **HTML** defines structure and data bindings (`{{expr}}`, `<if>`, `<for>`)
-- **CSS** defines visual presentation (scoped via Shadow DOM)
+- **CSS** defines visual presentation. WebUI scopes Light CSS and preserves
+  native Shadow scoping for Shadow components
 - **TypeScript** defines interactive behavior (event handlers, state mutations)
 
 There is no JSX, no CSS-in-JS, and no template literals. This separation
diff --git a/docs/guide/concepts/directives/lazy.md b/docs/guide/concepts/directives/lazy.md
index fda90fee3..7b40b103d 100644
--- a/docs/guide/concepts/directives/lazy.md
+++ b/docs/guide/concepts/directives/lazy.md
@@ -59,9 +59,10 @@ Only these exact, case-sensitive values are recognized.
 
 ## Build and Runtime Behavior
 
-The policy wrapper is build-only. WebUI strips the policy attributes, turns the
-wrapper into the declarative shadow root for `--dom=shadow`, and unwraps it for
-`--dom=light`.
+The policy wrapper is build-only. WebUI strips the policy attributes. A
+component that authors `<template shadowrootmode="open">` keeps that wrapper as
+its declarative shadow root; every other component is Light, so the wrapper is
+unwrapped and its content renders directly in the host.
 
 For the full policy, the build emits one deterministic, nonce-aware
 `<style data-webui-render-policy>` in the document head. This lets
diff --git a/docs/guide/concepts/how-it-works.md b/docs/guide/concepts/how-it-works.md
index 503b8732b..2d9ef17aa 100644
--- a/docs/guide/concepts/how-it-works.md
+++ b/docs/guide/concepts/how-it-works.md
@@ -60,21 +60,27 @@ For each incoming request, the handler:
 - **No expression compilation** - expressions are pre-compiled to key lookups
 - **No JavaScript runtime** - the server is pure native code (Rust, C, or any FFI host)
 
-### Declarative Shadow DOM
+### Light DOM and Declarative Shadow DOM
 
-The rendered HTML includes [Declarative Shadow DOM](https://developer.chrome.com/docs/css-ui/declarative-shadow-dom) markup. This means the browser can display fully styled component content **before any JavaScript loads**:
+With `--dom light`, unwrapped components render directly into the custom-element
+host. Paired CSS and component-local `<style>` blocks remain authored/global in
+the owning CSS tree, then the handler installs them in cascade order before
+interactivity starts:
 
 ```html
 <my-card>
-  <template shadowrootmode="open">
-    <style>/* scoped styles */</style>
-    <h2>Card Title</h2>
-    <p>Content rendered on the server</p>
-  </template>
+  <h2>Card Title</h2>
+  <p>Content rendered on the server</p>
 </my-card>
 ```
 
-The user sees rendered content immediately - no blank page, no loading spinner.
+Shadow is the default fallback for unwrapped components. Components whose
+complete template is a sole bare `<template>` explicitly use Light and are
+unwrapped. Components whose complete template is a sole open declarative Shadow
+root use
+[Declarative Shadow DOM](https://developer.chrome.com/docs/css-ui/declarative-shadow-dom)
+even in a Light build. Both explicit forms display fully styled server content before
+JavaScript.
 
 ## Client Hydration Phase
 
@@ -85,7 +91,8 @@ server-rendered content unless later navigation or state updates need them.
 ### How hydration works
 
 1. **Custom elements upgrade** - the browser calls `connectedCallback` for each registered Web Component
-2. **Shadow root detection** - the framework finds the existing Declarative Shadow DOM root (it does **not** recreate the DOM)
+2. **Existing DOM detection** - the framework uses the rendered Light children
+   or Declarative Shadow DOM root without recreating the DOM
 3. **Bindings wired** - template expressions (`{{count}}`, `?disabled`) are connected to class properties
 4. **Events connected** - `@click`, `@keydown`, and other handlers are attached with their compiled argument scopes
 5. **Reactive state activated** - `@observable` properties become live; changes trigger targeted DOM updates
@@ -161,7 +168,7 @@ WebUI's architecture is designed so that the most common operation - rendering a
 | **Key-based dynamic resolution** | Simple hash map lookup against JSON state - no expression parsing |
 | **Loaded protocol reuse** | Decode protobuf and build deterministic indices once at startup |
 | **No JavaScript on the server** | Native code (Rust/C) handles rendering - no VM startup, no GC pauses |
-| **Declarative Shadow DOM** | Browser renders content before JS loads - no white flash |
+| **Light or Declarative Shadow DOM SSR** | Browser renders content before JS loads - no white flash |
 | **Islands Architecture** | Only interactive components ship JS - static content has zero client cost |
 | **Binary Protocol Buffer** | Compact build artifact with no runtime template parsing |
 
diff --git a/docs/guide/concepts/hydration.md b/docs/guide/concepts/hydration.md
index f8c747e7a..61f4c237f 100644
--- a/docs/guide/concepts/hydration.md
+++ b/docs/guide/concepts/hydration.md
@@ -85,10 +85,9 @@ can be deferred without removing the SSR DOM:
 2. It emits `content-visibility: auto` and
    `contain-intrinsic-block-size: auto 72px` for the component tag in a
    document-level `<style>` before first layout, plus a tag-qualified component
-   rule for Shadow DOM instances. For a `--dom=light` component placed inside an
-   authored shadow root, use the `style` CSS strategy or include the containment
-   rule in that root's stylesheet; document-scoped Link and Module styles do not
-   cross that boundary.
+   rule for Shadow DOM instances. A Light component nested inside an authored
+   shadow root receives the rule through its precomputed style closure, which
+   delivers the stylesheet into that root under every CSS strategy.
 
 The required reservation should approximate one instance's rendered block size.
 It preserves scroll geometry while the browser skips offscreen style, layout,
@@ -97,9 +96,10 @@ instance renders. Accepted values are single non-negative CSS lengths such as
 `72px`, `18rem`, `40dvh`, or `25cqb`; percentages, `auto`, negative values, and
 functions such as `calc()` are rejected at build time.
 
-The policy wrapper is build-only. WebUI removes its policy attributes, uses the
-wrapper as the declarative shadow root under `--dom=shadow`, and unwraps it under
-`--dom=light`.
+The policy wrapper is build-only. WebUI removes its policy attributes. A
+component that authors `<template shadowrootmode="open">` keeps that wrapper as
+its declarative shadow root; every other component is Light, so the wrapper is
+unwrapped.
 
 Import the optional entry once before registering policy-bearing components:
 
@@ -312,6 +312,24 @@ terminal. A malformed, truncated, out-of-order, or over-limit stream fails
 closed, suppresses successful completion, and releases discoverable deferred
 state within fixed bounds.
 
+At `body_end`, the handler emits one markerless empty terminal envelope:
+`[2,nextSequence,4,0,{}]`. Its flush also commits any preceding native or static
+tail HTML, but terminal records never repeat template metadata or state. A
+truncated or malformed stream, or one exceeding a client work bound such as the
+queued-boundary or marker-scan limit, logs an error, suppresses
+`webui:hydration-complete`, and releases discoverable deferred state within
+fixed bounds. Valid commits perform no document-wide scan; a bounded sweep is a
+fatal-cleanup fallback only.
+
+The client trusts records past three checks, because the same WebUI version
+wrote them: `JSON.parse` (which alone detects any truncation, since a cut-off
+record is never valid JSON), a five-element array, and the envelope `version`.
+Everything else is enforced where it is actually knowable — a sequence or
+boundary-target mismatch halts the stream, and a defective payload fails the
+commit closed. Unrecognized *additive* payload fields are ignored rather than
+fatal, so a cached older bundle keeps working against a newer server; anything
+incompatible bumps `version` instead.
+
 ### CSP and delivery
 
 Pass the request nonce with `RenderOptions::with_nonce`. The handler applies it
diff --git a/docs/guide/concepts/interactivity.md b/docs/guide/concepts/interactivity.md
index ab3d333be..e5e52bb3a 100644
--- a/docs/guide/concepts/interactivity.md
+++ b/docs/guide/concepts/interactivity.md
@@ -1,6 +1,11 @@
 # Interactivity
 
-WebUI uses **Islands Architecture** for client-side interactivity. Each Web Component is a self-contained island with its own HTML template, scoped CSS, and TypeScript behavior. Only components that need interactivity ship JavaScript - everything else stays as static server-rendered HTML.
+WebUI uses **Islands Architecture** for client-side interactivity. Each Web
+Component is a self-contained island with its own HTML template, authored CSS,
+and TypeScript behavior. Shadow components provide CSS isolation; Light
+components intentionally participate in the owning CSS tree's global cascade.
+Only components that need interactivity ship JavaScript - everything else stays
+as static server-rendered HTML.
 
 ## Component Files
 
@@ -9,12 +14,13 @@ Every interactive component consists of three separate files. Templates are decl
 ```
 my-counter/
 ├── my-counter.html   ← Template (structure and bindings)
-├── my-counter.css    ← Styles (scoped via Shadow DOM)
+├── my-counter.css    ← Authored styles
 └── my-counter.ts     ← Behavior (TypeScript class)
 ```
 
 - **HTML** defines what the component renders and where dynamic values appear
-- **CSS** styles the component in isolation - Shadow DOM prevents leaking
+- **CSS** styles the component. Light DOM uses the owning tree's global cascade;
+  Shadow components use the browser's native boundary
 - **TypeScript** defines JS-visible reactive properties, event handlers, and component logic
 
 Components that do not need client-side behavior can omit the TypeScript file:
@@ -93,10 +99,10 @@ The matching template (`my-counter.html`):
 </button>
 ```
 
-And scoped styles (`my-counter.css`):
+And authored Light DOM styles (`my-counter.css`):
 
 ```css
-:host {
+my-counter {
   display: inline-block;
 }
 
@@ -109,17 +115,25 @@ button {
 
 ## The `<template>` Tag
 
-The `<template shadowrootmode="open">` wrapper is **optional** in component HTML files. The build tool auto-injects it when it is not present.
+Unwrapped components default to Shadow DOM. Build with `--dom light` to render
+unwrapped content directly into the component host.
+
+A sole bare top-level `<template>` explicitly selects Light DOM and is unwrapped
+even when the build fallback is Shadow. A template with attributes or
+`w-render`/`w-hydrate` is not a mode selector; nested templates remain ordinary
+inert template content.
 
-**Without `<template>` (most components):**
+**Light DOM (`--dom light`):**
 ```html
 <!-- my-counter.html -->
 <button @click="{increment()}">{{label}}: {{count}}</button>
 ```
 
-The framework wraps this in a `<template shadowrootmode="open">` during build.
+The paired CSS remains authored/global in the owning CSS tree. Use ordinary
+selectors such as `my-counter`; Shadow-only `:host` and `::slotted` selectors
+fail in effective Light CSS.
 
-**With `<template>` (root host events):**
+**Authored Shadow island (including inside a Light build):**
 ```html
 <!-- todo-app.html -->
 <template shadowrootmode="open"
@@ -135,9 +149,15 @@ The framework wraps this in a `<template shadowrootmode="open">` during build.
 </template>
 ```
 
-When you include the `<template>` tag explicitly, the framework uses yours instead of auto-injecting one. The main reason to include it is to attach **root host events** - listeners on the component root that catch events bubbling up from child components (`@toggle-item`, `@delete-item` above).
+The open template must be the sole top-level element and wrap the complete
+component. Use it when the component needs native `<slot>` composition, a
+native Shadow boundary, or **root host events** - listeners on the component
+root that catch events bubbling up from child components (`@toggle-item`,
+`@delete-item` above). `closed`, another value, invalid placement, multiple
+wrappers, or extra top-level content fails the build. A native `<slot>` fails
+only when the component's effective mode is Light.
 
-To reach a root binding from a **child component**, an event must **bubble** and - because it has to cross the child's shadow boundary - be **composed**. `this.$emit()` sets both whenever the emitting component has a shadow root, which is the default. A hand-built `new CustomEvent('my-event')` defaults to neither and will never arrive - bind it on the child element instead, or pass `{ bubbles: true, composed: true }` yourself.
+To reach a root binding from a **child component**, an event must **bubble** and be **composed** whenever any Shadow boundary exists between the child and the listener. `this.$emit()` always sets both, including for a Light component nested in another component's Shadow tree. A hand-built `new CustomEvent('my-event')` defaults to neither and will never arrive - bind it on the child element instead, or pass `{ bubbles: true, composed: true }` yourself.
 
 A root binding lives on the **host element**, so it also catches events targeted at the host itself - what host-interactive components (host `tabindex`, presentational shadow content) rely on. It does not see non-composed events (`change`, `submit`, `select`, media events), which stop at the shadow boundary because they identify one specific inner element; bind those per element - `<input @change="{onChange(e)}">`.
 
@@ -556,11 +576,14 @@ is missing.
 
 ## Styling
 
-CSS is scoped to each component via Shadow DOM. Styles in one component cannot leak into or be affected by another.
+Keep styles in the ordinary paired `.css` file. For an effective Light
+component, CSS is authored/global in the owning CSS tree: selectors are not
+rewritten or marker-scoped. For effective Shadow roots, the browser provides
+native style scoping.
 
-### The `:host` Selector
+### The `:host` Selector (Shadow DOM only)
 
-Style the component's root element with `:host`:
+Style an effective Shadow component's root element with `:host`:
 
 ```css
 :host {
@@ -570,9 +593,18 @@ Style the component's root element with `:host`:
 }
 ```
 
+In effective Light DOM, target the component tag directly instead:
+
+```css
+my-card {
+  display: block;
+  padding: 1rem;
+}
+```
+
 ### Attribute-Based Styling
 
-Style the component differently based on its attributes with `:host([attr])`:
+In Shadow DOM, style component attributes with `:host([attr])`:
 
 ```css
 :host([variant="primary"]) {
@@ -586,10 +618,18 @@ Style the component differently based on its attributes with `:host([attr])`:
 }
 ```
 
-### Scoping Rules
+The equivalent global Light selector is `my-card[variant="primary"]` or
+`my-card[disabled]`. `:host`, `:host-context`, and `::slotted` in effective
+Light CSS fail with `unsupported-light-css`; use ordinary selectors or opt the
+component into Shadow DOM.
 
-- Styles defined in a component's `.css` file only apply inside that component's shadow root
-- External page styles do not penetrate into the component
+### CSS Ownership Rules
+
+- Light DOM uses authored/global selectors and normal inheritance/cascade
+- Light CSS can reach other Light DOM in the same Document or ShadowRoot
+- Use deliberate names, `@layer`, and custom properties for global composition
+- Shadow DOM provides a native style boundary
+- Shadow-only selectors in Light components fail the build
 - No CSS-in-JS - styles stay in `.css` files, separate from behavior
 - Use CSS custom properties (`--my-color`) to allow external theming
 
@@ -599,24 +639,26 @@ Understanding the lifecycle helps you write components that work correctly from
 
 ### 1. Server renders HTML
 
-The handler renders the component's template using JSON state data. No JavaScript runs. The output includes Declarative Shadow DOM:
+The handler renders the component's template using JSON state data. No
+JavaScript runs. In a Light build, unwrapped content is emitted directly:
 
 ```html
 <my-counter>
-  <template shadowrootmode="open">
-    <style>/* scoped styles */</style>
-    <button>Count: 0</button>
-  </template>
+  <button>Count: 0</button>
 </my-counter>
 ```
 
+The default build and authored Shadow islands emit Declarative Shadow DOM with
+styles installed inside the shadow root.
+
 ### 2. Browser displays content
 
 The browser parses the HTML and renders it immediately. The user sees fully styled content - no loading spinner, no blank page, no flash of unstyled content.
 
 ### 3. JavaScript loads and components hydrate
 
-The framework detects the existing Declarative Shadow DOM roots and upgrades elements in place:
+The framework detects the existing Light or Shadow SSR DOM and upgrades
+elements in place:
 
 - Bindings are wired to class properties
 - Event handlers are attached
diff --git a/docs/guide/concepts/performance.md b/docs/guide/concepts/performance.md
index 7642ec7bd..07307cafb 100644
--- a/docs/guide/concepts/performance.md
+++ b/docs/guide/concepts/performance.md
@@ -268,44 +268,55 @@ hide behind subtraction. These figures are workload and machine specific; use
 
 ## Light DOM vs Shadow DOM
 
-Shadow DOM provides style encapsulation but has a performance cost. Benchmark
-data from a 2,400-component email client:
-
-| Metric | Shadow DOM | Light DOM | Improvement |
-|--------|-----------|-----------|-------------|
-| First Contentful Paint | baseline | **26% faster** | fewer shadow root constructions |
-| Layout Operations | baseline | **60% fewer** | no shadow boundary recalculations |
+Neither mode is universally faster. Light removes ShadowRoot and per-instance
+stylesheet objects, enables aggressive CSS bundling, and can improve SSR
+throughput and document completion. Global Light CSS shares one large CSS tree,
+so broad or frequent class/attribute invalidations may cost more than native
+Shadow isolation. Shadow pays more parsing and stylesheet-instance overhead but
+can recalculate styles substantially faster in CSS-heavy repeated component
+trees.
 
 ### When to Use Each
 
-**Shadow DOM** (default) - use when:
-- Style encapsulation is important (shared component libraries)
-- Components are used in contexts where CSS conflicts are likely
-- You need slot-based composition
-
-**Light DOM** - use when:
-- Performance is critical (high-component-count pages)
-- Components are leaf nodes (list items, cards, badges)
-- You control the full page CSS and don't need encapsulation
-
-### Switching to Light DOM
-
-Build with the `--dom=light` flag:
-
-```bash
-webui build ./src --out ./dist --dom=light
-```
-
-In Rust handlers, use `DomStrategy::Light`:
-
-```rust
-let options = RenderOptions::new("index.html", "/")
-    .with_dom_strategy(DomStrategy::Light);
-```
-
-CSS differences:
-- Shadow DOM: `:host { display: block; }`
-- Light DOM: `my-component { display: block; }` (use the tag name)
+**Light DOM** - build with `--dom light` when:
+- Components are mostly static or moderately styled
+- Components benefit from normal CSS inheritance
+- CSS request/stylesheet consolidation matters
+- Global CSS composition is intentional
+- Native slot composition is not required
+
+**Shadow DOM** - use when:
+- You need native `<slot>` composition
+- Components run in unknown host pages
+- A native Shadow boundary is an explicit requirement
+- Components have large stylesheets, many repeated instances, or frequent host
+  class/attribute changes
+
+### Authoring Shadow DOM
+
+Shadow is the default fallback for unwrapped components. `--dom light` makes
+unwrapped components Light. A sole bare top-level `<template>` is also an
+explicit Light wrapper; `<template shadowrootmode="open">` explicitly remains
+Shadow in either build mode.
+Invalid or closed wrappers fail every build; `<slot>` fails only when the
+effective component mode is Light.
+
+Keep authoring ordinary paired CSS in both modes. Light CSS remains authored
+global CSS and rejects Shadow-only selectors such as `:host`; Shadow CSS keeps
+native selector semantics.
+
+Component resources can use the router's template inventory, but bundled chunks
+have distinct identities and are never inferred from component bits. Chunk
+metadata lists the component resources it covers, so claiming one SSR resource
+also prevents each Light descendant from reinstalling a fallback stylesheet.
+
+Progressive streaming keeps a separate request-local style resource inventory.
+Each closure and CSS definition is serialized at most once per response, even
+when later boundaries reuse a component or a resource arrived transitively
+through an earlier closure.
+
+In a Light build, add open wrappers to slot, encapsulation, or CSS-heavy
+frequently restyled components.
 
 ## Performance Rules
 
diff --git a/docs/guide/concepts/plugins/index.md b/docs/guide/concepts/plugins/index.md
index 23fa260f4..d4eed1223 100644
--- a/docs/guide/concepts/plugins/index.md
+++ b/docs/guide/concepts/plugins/index.md
@@ -109,17 +109,22 @@ To create a custom plugin, implement the `ParserPlugin` and/or `HandlerPlugin` t
 ### ParserPlugin Trait
 
 ```rust
+pub struct ComponentTemplateContext {
+    pub uses_shadow_dom: bool,
+}
+
 pub trait ParserPlugin {
     /// Called before parsing begins for a fragment.
     fn start_fragment(&mut self, fragment_id: &str) {}
 
-    /// Called with the plugin-facing component template. Authored root
-    /// `<template>` attributes are preserved for plugins.
+    /// Called with the plugin-facing template and Shadow ownership metadata.
+    /// Authored root `<template>` attributes are preserved for plugins.
     fn register_component_template(
         &mut self,
         tag_name: &str,
         component: &Component,
         processed_template: &str,
+        context: ComponentTemplateContext,
     ) -> Result<()>;
 
     /// Decide how a framework-owned attribute should be handled.
@@ -139,6 +144,10 @@ pub trait ParserPlugin {
 }
 ```
 
+When producing a `ComponentTemplateArtifact`, pass
+`context.uses_shadow_dom` to its constructor. This parser-derived boolean is
+required metadata and is not inferred after the plugin returns its artifacts.
+
 ### HandlerPlugin Trait
 
 ```rust
diff --git a/docs/guide/concepts/react-comparison.md b/docs/guide/concepts/react-comparison.md
index d643e28b1..8ce1dabe8 100644
--- a/docs/guide/concepts/react-comparison.md
+++ b/docs/guide/concepts/react-comparison.md
@@ -10,7 +10,7 @@ This guide compares common UI patterns written in React (imperative, JavaScript-
 | **Rendering** | Client-side or Node.js SSR | Build-time compiled protocol, server-rendered HTML |
 | **Template language** | JSX (JavaScript + HTML mixed) | Separate HTML, CSS, and TypeScript files |
 | **State management** | `useState`, `useReducer`, context | `@observable` properties with targeted DOM updates |
-| **Styling** | CSS-in-JS, CSS Modules, or external | Scoped CSS via Shadow DOM or Global Light DOM via `--dom` and `--css` args |
+| **Styling** | CSS-in-JS, CSS Modules, or external | Paired CSS scoped for unwrapped Light DOM or native Shadow DOM |
 | **Runtime** | React runtime + ReactDOM in browser | No framework runtime for static content; thin hydration for interactive islands |
 | **Interactivity** | Every component ships JavaScript | Only interactive islands ship JavaScript |
 
@@ -388,7 +388,9 @@ h3 {
 </div>
 </code-comparison>
 
-**What changed:** CSS-in-JS becomes a plain CSS file. Shadow DOM provides the style encapsulation that CSS-in-JS libraries simulate with generated class names. Styles cannot leak in or out of the component. No JavaScript runtime cost for styling.
+**What changed:** CSS-in-JS becomes a plain CSS file. WebUI scopes it at build
+time for unwrapped Light components, while opted-in Shadow components use native
+Shadow scoping. There is no JavaScript runtime cost for styling.
 
 ## Component Composition
 
diff --git a/docs/guide/concepts/routing.md b/docs/guide/concepts/routing.md
index eb28491f5..8503308a0 100644
--- a/docs/guide/concepts/routing.md
+++ b/docs/guide/concepts/routing.md
@@ -231,6 +231,8 @@ export class LiveDashboard extends WebUIElement {
 
 How it works:
 - The router checks each route component's constructor for a static `loader()` method
+- Results belong to the concrete route-chain entry, so separate declarations
+  that reuse one component tag keep independent params and state
 - Loaders run **before** the view transition — results are ready for synchronous DOM commit
 - The loader receives route `params`, `query`, and an `AbortSignal` tied to the navigation
 - If a loader fails, the router falls back to server-provided `data.state` with a console warning
@@ -274,6 +276,17 @@ JavaScript loader or empty class. Create a custom element only when the route
 component is interactive: event handlers, custom lifecycle code, imperative
 methods, or JavaScript-owned state.
 
+Initial SSR delivers component CSS only for the matched route chain. Styles for
+inactive routes remain deferred until navigation activates those components,
+including when an `<outlet />` is inside a Shadow component.
+
+Matched route styles that target the Document are emitted with the entry styles
+before `</head>`. Link-mode stylesheets are therefore render-blocking for first
+paint, including bundled chunks. A route rendered inside a ShadowRoot cannot use
+a Document stylesheet, so Link mode preloads that resource from the head and
+installs the applying stylesheet inside the owning ShadowRoot before the route
+host.
+
 ### Tagged Cache
 
 The router caches partial responses and tags them with server-provided cache tags for precise invalidation. Enable caching at startup:
@@ -687,7 +700,20 @@ When `Accept: application/json` or `application/x-ndjson`:
 ```json
 {
   "state": { "name": "Alice", "email": "alice@example.com" },
-  "templateStyles": ["<script type=\"importmap\">{\"imports\":{\"user-detail\":\"data:text/css,...\"}}</script>"],
+  "componentStyles": {
+    "version": 1,
+    "strategy": "module",
+    "resources": {
+      "user-detail": {
+        "kind": "module",
+        "specifier": "user-detail",
+        "css": ".detail { ... }"
+      }
+    },
+    "closures": {
+      "user-detail": ["user-detail"]
+    }
+  },
   "templates": {
     "user-detail": { "h": "<section></section>" }
   },
@@ -714,9 +740,9 @@ When `Accept: application/json` or `application/x-ndjson`:
 | Field | Description |
 |-------|-------------|
 | `state` | Active-route navigation state for reachable authored and scriptless components. `Protocol::render_partial` and all host bindings include it |
-| `templateStyles` | Module CSS definition tags (empty for Link/Style modes) |
+| `componentStyles` | Required versioned CSS resource and closure delta; bundled chunks carry their covered component IDs and are tracked independently from template inventory |
 | `templates` | Client template payloads filtered by inventory bitmask |
-| `inventory` | Updated hex bitmask of loaded templates |
+| `inventory` | Updated hex bitmask of loaded component template and style metadata |
 | `path` | The matched request path |
 | `chain` | Matched route chain - one entry per nesting level |
 | `cacheTags` | Resolved cache tags from the full chain (union of all levels) |
@@ -732,13 +758,13 @@ custom-element registration, not by a server `client` flag.
 | Header | Value | Purpose |
 |--------|-------|---------|
 | `Accept` | `application/x-ndjson, application/json` | Requests NDJSON streaming or JSON partial instead of HTML |
-| `X-WebUI-Inventory` | Hex bitmask | Templates the client already has — server skips re-sending them |
+| `X-WebUI-Inventory` | Hex bitmask | Component template and style metadata the client already has - server skips re-sending it |
 
 ### Full HTML (initial load)
 
 Without `Accept: application/json`, return the full SSR'd page. The handler
 includes the route chain, template inventory, and CSS list needed for client
-bootstrap.
+bootstrap. The CSS list contains the matched route chain, not inactive siblings.
 
 ### Partial Navigation
 
diff --git a/docs/guide/index.md b/docs/guide/index.md
index fe143c7db..1073ea130 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -20,7 +20,12 @@ Your backend handler loads the pre-compiled protocol, receives state data, and p
 
 ### 3. Hydrate - Interactive islands come alive
 
-On the client, only **Web Components marked as interactive** hydrate. Each component is an island - self-contained with its own Shadow DOM, styles, and behavior. A page with 10 components where only 2 need click handlers ships JavaScript for just those 2. The other 8 remain server-rendered HTML with zero client-side cost.
+On the client, only **Web Components marked as interactive** hydrate. Each
+component is an island with its own template, authored styles, and behavior.
+Unwrapped components default to Shadow; a build can opt into Light while
+retaining explicit Shadow islands. A page
+with 10 components where only 2 need click handlers ships JavaScript for just
+those 2. The other 8 remain server-rendered HTML with zero client-side cost.
 
 ## Key Concepts
 
diff --git a/docs/guide/integrations/node.md b/docs/guide/integrations/node.md
index 899550141..b61be29a8 100644
--- a/docs/guide/integrations/node.md
+++ b/docs/guide/integrations/node.md
@@ -161,7 +161,8 @@ render immediately and propagate to the caller.
 | `appDir` | `string` | - | Path to app folder |
 | `entry` | `string` | `"index.html"` | Entry file |
 | `css` | `"link" \| "style" \| "module"` | `"link"` | CSS delivery strategy |
-| `dom` | `"shadow" \| "light"` | `"shadow"` | DOM strategy for component rendering |
+| `dom` | `"shadow" \| "light"` | `"shadow"` | Fallback for unwrapped components; Light builds retain authored Shadow islands |
+| `cssBundle` | `boolean` | `false` | Merge component stylesheets into shared chunks. Composes with `css`; rejected with `css: "module"` |
 | `plugin` | `string` | - | Parser plugin name (see [Plugins](/guide/concepts/plugins/) for the available identifiers) |
 | `components` | `string[]` | - | External component sources |
 | `componentAssetRoots` | `string[]` | - | Root component tags emitted as static `.webui.js` ESM assets |
@@ -173,6 +174,11 @@ render immediately and propagate to the caller.
 | `legalComments` | `"inline" \| "none"` | `"inline"` | Preserve legal CSS comments inline, or strip all comments |
 | `theme` | `string` | - | Design token theme JSON path or npm package name. Missing required CSS tokens fail the build (literal `var()` fallbacks are exempt) |
 
+Unwrapped components default to generated open Shadow roots. Set `dom: "light"`
+to make them global Light DOM; authored sole open Shadow roots remain Shadow.
+Light CSS uses ordinary selectors, and `:host`, `:host-context`, and
+`::slotted` fail with `unsupported-light-css`.
+
 ```js
 const result = build({
   appDir: './src',
diff --git a/docs/guide/integrations/rust.md b/docs/guide/integrations/rust.md
index 2c112fc51..110f1d4c8 100644
--- a/docs/guide/integrations/rust.md
+++ b/docs/guide/integrations/rust.md
@@ -313,6 +313,14 @@ authoring and lifecycle contract. That application entry must import
 `@microsoft/webui-framework/streaming.js` before component registration
 modules. The default framework entry does not include the streaming coordinator.
 
+Each checkpoint carries state and templates for the component surface reachable
+from roots rendered since the previous checkpoint, including descendants behind
+initially false conditions or empty repeats. Unrelated later boundaries remain
+excluded. Template metadata is sent only when first reachable, inventory still
+tracks only rendered SSR roots, and repeated instances receive checkpoint-local
+state without duplicate metadata. The final terminal envelope is always
+`[2,nextSequence,4,0,{}]`; its flush also commits preceding static tail bytes.
+
 At `start`, WebUI freezes only projected top-level keys required to continue,
 plus lexical locals and route/component scope. Resume state overlays that frozen
 parent surface. Resolution order is lexical locals, resume state, then frozen
@@ -396,6 +404,7 @@ delivery from a cancelled or stalled stream.
 | `app_dir` | `PathBuf` | - | Path to app folder |
 | `entry` | `String` | `"index.html"` | Entry file |
 | `css` | `CssStrategy` | `Link` | CSS delivery: `Link`, `Style`, or `Module` |
+| `dom` | `DomStrategy` | `Shadow` | Fallback for unwrapped components: `Shadow` or global `Light` |
 | `plugin` | `Option<Plugin>` | `None` | Parser plugin (see [Plugins](/guide/concepts/plugins/) for the available identifiers) |
 | `components` | `Vec<String>` | `[]` | External component sources |
 | `component_asset_roots` | `Vec<String>` | `[]` | Root component tags emitted as static `.webui.js` ESM assets |
@@ -405,6 +414,12 @@ delivery from a cancelled or stalled stream.
 | `css_public_base` | `Option<String>` | `None` | Public URL/path prefix for Link-mode CSS hrefs |
 | `theme` | `Option<TokenFile>` | `None` | Loaded design-token theme used to validate unresolved CSS tokens during build |
 
+Unwrapped components default to generated open Shadow roots. Set
+`DomStrategy::Light` to make unwrapped components global Light DOM; authored
+sole open Shadow roots remain Shadow in either mode. Light CSS uses ordinary
+selectors, and `:host`, `:host-context`, and `::slotted` fail with
+`unsupported-light-css`.
+
 `BuildResult::component_asset_files` contains root and shared chunk modules.
 Entry-reachable dependencies remain in the protocol and are external
 prerequisites; single-root dependencies stay inline; dependencies with an
diff --git a/docs/guide/integrations/wasm.md b/docs/guide/integrations/wasm.md
index 916422308..e3629e6a8 100644
--- a/docs/guide/integrations/wasm.md
+++ b/docs/guide/integrations/wasm.md
@@ -117,7 +117,7 @@ await init();
 
 const files = {
   'index.html': '<h1>{{title}}</h1>',
-  'my-card.html': '<p><slot></slot></p>',
+  'my-card.html': '<template shadowrootmode="open"><p><slot></slot></p></template>',
   'my-card.css': 'p { color: red; }',
 };
 
@@ -125,10 +125,11 @@ const protocolBytes = build_protocol(
   files,
   'index.html',
   [projectionManifest],
+  'light',
 );
 ```
 
-### `build_protocol(files, entry, projectionManifests?)`
+### `build_protocol(files, entry, projectionManifests?, dom?)`
 
 Parse virtual files into a WebUI protocol without rendering.
 
@@ -137,6 +138,7 @@ Parse virtual files into a WebUI protocol without rendering.
 | `files` | `Record<string, string>` | Map of filenames to content |
 | `entry` | `string` | Entry HTML filename |
 | `projectionManifests` | `object[]` | Optional bundler manifest fragments |
+| `dom` | `"shadow" \| "light"` | Optional unwrapped-component fallback; defaults to `"shadow"` |
 
 Returns protobuf-serialized `WebUIProtocol` as a `Uint8Array`. Throws on missing entry files, invalid templates, invalid component authoring, or protocol serialization errors.
 
diff --git a/docs/guide/serverless-architecture.md b/docs/guide/serverless-architecture.md
index d9c881cd3..5a7c129ec 100644
--- a/docs/guide/serverless-architecture.md
+++ b/docs/guide/serverless-architecture.md
@@ -88,8 +88,8 @@ where the UI changes far less often than the state.
    then call `protocol.renderStream(stateJson, onChunk, options)`. Handler
    writes are coalesced around a 16 KiB target before `onChunk(html)`, and the
    service worker writes those chunks directly to a `ReadableStream`.
-5. **Light DOM fragments.** The example builds with `--dom light` because the
-   service worker appends independent fragments into a single document stream.
+5. **Light DOM fragments.** Components are unwrapped, so the service worker can
+   append independent fragments into a single document stream.
 6. **Shared theme tokens.** `scripts/inject-theme.ts` mirrors
    `webui serve --theme=@microsoft/webui-examples-theme` at build time. It reads
    `protocol.bin`, gets the protocol token list, and writes trusted token
diff --git a/docs/guide/why.md b/docs/guide/why.md
index e12e96095..7e5b862dd 100644
--- a/docs/guide/why.md
+++ b/docs/guide/why.md
@@ -44,11 +44,17 @@ Historically, frameworks existed because the web platform lacked key primitives.
 
 - **Web Components** - reusable custom elements with a standard lifecycle, no framework runtime required
 - **Declarative Shadow DOM** - server-renderable encapsulation without JavaScript
-- **CSS containment** - layout and paint isolation for predictable rendering performance
-- **Adopted stylesheets** - shared, constructable stylesheets across shadow roots
+- **CSS composition** - authored global Light CSS when composition is desired,
+  with native Shadow CSS boundaries when isolation is required
+- **Adopted stylesheets** - shared, constructable stylesheets when module
+  delivery is selected
 - **Navigation API** - client-side routing without framework abstractions
 
-WebUI builds directly on these platform primitives rather than wrapping them in an abstraction layer. Templates use standard HTML and native Web Components. The optional client-side router uses the Navigation API. Styling uses adopted stylesheets and CSS containment. No proprietary component model, no virtual DOM, no framework runtime in the browser.
+WebUI builds directly on these platform primitives rather than wrapping them in
+an abstraction layer. Templates use standard HTML and native Web Components.
+The optional client-side router uses the Navigation API. Styling uses ordinary
+paired CSS, authored/global in Light DOM and natively isolated in Shadow DOM. No
+proprietary component model or virtual DOM is required.
 
 When you build on the web platform, you inherit its improvements for free. Every browser performance optimization, every new CSS feature, every platform API lands in your app without a framework upgrade.
 
@@ -62,7 +68,11 @@ With WebUI's Islands Architecture:
 
 - **Static content** is server-rendered HTML. It arrives fully formed in the initial response. No JavaScript is shipped, no hydration occurs, no client-side processing is needed. It is just HTML and CSS - the fastest thing a browser can render.
 
-- **Interactive components** are Web Components that hydrate on the client. Each island is self-contained with its own Shadow DOM, encapsulated styles, and TypeScript behavior. Islands hydrate independently - they don't wait for each other or for a global framework to initialize.
+- **Interactive components** are Web Components that hydrate on the client.
+  Each island has its own template, authored styles, and TypeScript behavior.
+  Unwrapped components default to Shadow. Light builds keep explicit sole open
+  wrappers as Shadow islands for slots or native boundaries. Islands hydrate independently - they don't wait for
+  each other or for a global framework to initialize.
 
 - **You control the boundary.** The hydration plugin system lets you decide exactly which components are interactive islands and how they hydrate (on load, on visible, on interaction).
 
diff --git a/examples/app/commerce/server/src/app.rs b/examples/app/commerce/server/src/app.rs
index c225a7eed..632369aa4 100644
--- a/examples/app/commerce/server/src/app.rs
+++ b/examples/app/commerce/server/src/app.rs
@@ -24,8 +24,13 @@ pub(crate) struct AppState {
 }
 
 impl AppState {
-    pub(crate) fn load(app_root: &Path, css: webui::CssStrategy, base_path: &str) -> Result<Self> {
-        let frontend = FrontendRuntime::load(app_root, css)?;
+    pub(crate) fn load(
+        app_root: &Path,
+        css: webui::CssStrategy,
+        css_bundle: bool,
+        base_path: &str,
+    ) -> Result<Self> {
+        let frontend = FrontendRuntime::load(app_root, css, css_bundle)?;
         Self::with_frontend(app_root, base_path, frontend)
     }
 
diff --git a/examples/app/commerce/server/src/frontend.rs b/examples/app/commerce/server/src/frontend.rs
index 162a41018..1e7ded6ab 100644
--- a/examples/app/commerce/server/src/frontend.rs
+++ b/examples/app/commerce/server/src/frontend.rs
@@ -25,18 +25,19 @@ pub struct FrontendRuntime {
 }
 
 impl FrontendRuntime {
-    pub fn load(app_root: &Path, css: CssStrategy) -> Result<Self> {
-        Self::load_with_projection(app_root, css, true)
+    pub fn load(app_root: &Path, css: CssStrategy, css_bundle: bool) -> Result<Self> {
+        Self::load_with_projection(app_root, css, css_bundle, true)
     }
 
     #[cfg(test)]
     pub(crate) fn load_for_tests(app_root: &Path, css: CssStrategy) -> Result<Self> {
-        Self::load_with_projection(app_root, css, false)
+        Self::load_with_projection(app_root, css, false, false)
     }
 
     fn load_with_projection(
         app_root: &Path,
         css: CssStrategy,
+        css_bundle: bool,
         use_projection_manifest: bool,
     ) -> Result<Self> {
         let app_dir = app_root.join("src");
@@ -54,6 +55,7 @@ impl FrontendRuntime {
             app_dir,
             entry: "index.html".to_string(),
             css,
+            css_bundle,
             plugin: Some(Plugin::WebUI),
             projection_manifests,
             ..BuildOptions::default()
diff --git a/examples/app/commerce/server/src/main.rs b/examples/app/commerce/server/src/main.rs
index 0e5debd77..46be6845b 100644
--- a/examples/app/commerce/server/src/main.rs
+++ b/examples/app/commerce/server/src/main.rs
@@ -36,6 +36,11 @@ struct ApiArgs {
     #[arg(long, default_value = "link")]
     css: String,
 
+    /// Group component stylesheets into per-tree bundles, splitting shared
+    /// sheets into their own chunk. Not supported with `--css module`.
+    #[arg(long)]
+    css_bundle: bool,
+
     /// Disable TLS and serve plain HTTP.  Use behind a TLS-terminating
     /// reverse proxy (e.g. Azure Container Apps ingress).
     #[arg(long)]
@@ -69,7 +74,7 @@ fn main() -> Result<()> {
     };
     let app_root = std::env::current_dir().context("Failed to determine commerce app directory")?;
 
-    let app_state = AppState::load(&app_root, css, &args.base_path)?;
+    let app_state = AppState::load(&app_root, css, args.css_bundle, &args.base_path)?;
 
     eprintln!(
         "Commerce server: {} products, {} images ({} variants)",
diff --git a/examples/app/commerce/server/src/server.rs b/examples/app/commerce/server/src/server.rs
index 7dd425a31..36600e0b3 100644
--- a/examples/app/commerce/server/src/server.rs
+++ b/examples/app/commerce/server/src/server.rs
@@ -381,11 +381,13 @@ mod tests {
 
         assert!(html.contains("mp-page-search"));
         assert!(html.contains("mp-navbar"));
-        // CSS preloads are now emitted by the framework (via protocol strategy
-        // not the custom server. Verify the framework-emitted preload is present.
+        // Component CSS resources are emitted by the framework from the
+        // protocol strategy, not by the custom server.
         assert!(
-            html.contains(r#"data-webui-ssr-preload="style""#),
-            "Framework should emit CSS preload with data-webui-ssr-preload: {html}"
+            html.contains(
+                r#"<link rel="stylesheet" href="mp-page-search.css" data-webui-resource="mp-page-search" data-webui-strategy="link">"#,
+            ),
+            "Framework should emit the component stylesheet resource: {html}"
         );
         assert!(html.contains(r#"href="_image/t-shirt-1?w=640&q=75""#));
         assert!(
@@ -476,35 +478,28 @@ mod tests {
             Err(error) => panic!("{error}"),
         };
 
-        let template_styles = match json["templateStyles"].as_array() {
-            Some(template_styles) => template_styles,
-            None => panic!("templateStyles should be an array"),
+        let style_resources = match json["componentStyles"]["resources"].as_object() {
+            Some(style_resources) => style_resources,
+            None => panic!("componentStyles.resources should be an object"),
         };
         let templates = match json["templates"].as_object() {
             Some(templates) => templates,
             None => panic!("templates should be an object"),
         };
-        let combined_styles = template_styles
-            .iter()
-            .filter_map(serde_json::Value::as_str)
-            .collect::<String>();
         let combined_templates = match serde_json::to_string(templates) {
             Ok(value) => value,
             Err(error) => panic!("{error}"),
         };
 
-        assert!(
-            combined_styles.contains(r#""mp-product-card":"data:text/css,"#),
-            "module partials should return authored product-card CSS: {combined_styles}"
-        );
-        assert!(
-            combined_styles.contains(r#""mp-product-grid":"data:text/css,"#),
-            "module partials should return dormant product-grid CSS: {combined_styles}"
-        );
-        assert!(
-            combined_styles.contains(r#""mp-page-search":"data:text/css,"#),
-            "module partials should return dormant page-search CSS: {combined_styles}"
-        );
+        for tag in ["mp-product-card", "mp-product-grid", "mp-page-search"] {
+            let resource = &style_resources[tag];
+            assert_eq!(resource["kind"], "module", "{tag}: {resource}");
+            assert_eq!(resource["specifier"], tag, "{tag}: {resource}");
+            assert!(
+                resource["css"].as_str().is_some_and(|css| !css.is_empty()),
+                "module partials should carry {tag} CSS in componentStyles: {resource}"
+            );
+        }
         assert!(
             !combined_templates.contains(r#""mp-product-grid":"data:text/css,"#),
             "template metadata should not embed module CSS importmap entries: {combined_templates}"
diff --git a/examples/app/contact-book-manager/src/atoms/cb-button/cb-button.html b/examples/app/contact-book-manager/src/atoms/cb-button/cb-button.html
index 8e09afde9..8a7b5ab23 100644
--- a/examples/app/contact-book-manager/src/atoms/cb-button/cb-button.html
+++ b/examples/app/contact-book-manager/src/atoms/cb-button/cb-button.html
@@ -1,3 +1,5 @@
-<button class="btn" title="{{label}}">
-  <slot>{{label}}</slot>
-</button>
+<template shadowrootmode="open">
+  <button class="btn" title="{{label}}">
+    <slot>{{label}}</slot>
+  </button>
+</template>
diff --git a/examples/app/contact-book-manager/src/atoms/cb-icon-button/cb-icon-button.html b/examples/app/contact-book-manager/src/atoms/cb-icon-button/cb-icon-button.html
index f69d17fdd..fc7b9d4be 100644
--- a/examples/app/contact-book-manager/src/atoms/cb-icon-button/cb-icon-button.html
+++ b/examples/app/contact-book-manager/src/atoms/cb-icon-button/cb-icon-button.html
@@ -1,3 +1,5 @@
-<button class="icon-btn" title="{{title}}">
-  <slot>{{icon}}</slot>
-</button>
+<template shadowrootmode="open">
+  <button class="icon-btn" title="{{title}}">
+    <slot>{{icon}}</slot>
+  </button>
+</template>
diff --git a/examples/app/contact-book-manager/tests/contact-book.spec.ts b/examples/app/contact-book-manager/tests/contact-book.spec.ts
index bd2fdd5cd..c697fe85f 100644
--- a/examples/app/contact-book-manager/tests/contact-book.spec.ts
+++ b/examples/app/contact-book-manager/tests/contact-book.spec.ts
@@ -5,7 +5,7 @@
  * End-to-end tests for the Contact Book Manager app.
  *
  * Tests SSR rendering, client-side navigation, and visual regression.
- * The app uses shadow DOM components (cb-*) with WebUI Framework templating.
+ * The app uses WebUI Framework components with nested Shadow DOM boundaries.
  */
 
 import { test, expect, type Page } from '@playwright/test';
@@ -62,6 +62,69 @@ test.describe('SSR pages', () => {
     await expect(page.locator('cb-page-dashboard cb-contact-card').first()).toBeVisible();
   });
 
+  test('dashboard installs active route styles once per CSS tree', async ({ page }) => {
+    const stylesheetRequests = new Map<string, number>();
+    await page.route('**/*.css', async (route) => {
+      const path = new URL(route.request().url()).pathname;
+      stylesheetRequests.set(path, (stylesheetRequests.get(path) ?? 0) + 1);
+      const response = await route.fetch();
+      await route.fulfill({
+        response,
+        headers: { ...response.headers(), 'cache-control': 'no-store' },
+      });
+    });
+
+    await page.goto('/');
+    await expect(page.locator('cb-app')).toHaveJSProperty('$ready', true);
+    const resources = await page.locator('cb-app').evaluate((host) => {
+      const root = host.shadowRoot;
+      if (!root) throw new Error('cb-app ShadowRoot missing');
+      const roots: Array<{ name: string; resources: string[] }> = [];
+      const visit = (cssRoot: Document | ShadowRoot, name: string): void => {
+        roots.push({
+          name,
+          resources: Array.from(
+            cssRoot.querySelectorAll<HTMLElement>('[data-webui-resource]'),
+            element => element.dataset.webuiResource ?? '',
+          ),
+        });
+        for (const element of cssRoot.querySelectorAll<HTMLElement>('*')) {
+          if (element.shadowRoot) visit(element.shadowRoot, element.localName);
+        }
+      };
+      visit(root, 'cb-app');
+      const route = root.querySelector('webui-route[active]');
+      if (!route) throw new Error('active dashboard route missing');
+      return { roots };
+    });
+
+    expect(stylesheetRequests.has('/cb-contact-form.css')).toBe(false);
+    expect(stylesheetRequests.has('/cb-contact-detail.css')).toBe(false);
+    const initialDashboardRequests = stylesheetRequests.get('/cb-page-dashboard.css') ?? 0;
+    expect(initialDashboardRequests).toBe(1);
+    expect(stylesheetRequests.get('/cb-contact-card.css')).toBe(5);
+    expect(resources.roots).toEqual(expect.arrayContaining([
+      { name: 'cb-app', resources: ['cb-app'] },
+      { name: 'cb-header', resources: ['cb-header'] },
+      { name: 'cb-sidebar', resources: ['cb-sidebar'] },
+      { name: 'cb-page-dashboard', resources: ['cb-page-dashboard'] },
+    ]));
+    const cardRoots = resources.roots.filter(({ name }) => name === 'cb-contact-card');
+    expect(cardRoots).toHaveLength(5);
+    expect(cardRoots.every(({ resources: installed }) =>
+      installed.length === 1 && installed[0] === 'cb-contact-card')).toBe(true);
+    expect(resources.roots.every(({ resources: installed }) =>
+      new Set(installed).size === installed.length)).toBe(true);
+
+    await page.locator('cb-sidebar').getByRole('link', { name: 'All Contacts' }).click();
+    await expect(page.locator('cb-page-contacts .page-title')).toHaveText('All Contacts');
+    await page.locator('cb-sidebar').getByRole('link', { name: 'Dashboard' }).click();
+    await expect(page.locator('cb-page-dashboard .section-title')).toContainText('Recent Contacts');
+    await expect(page.locator('cb-page-dashboard cb-contact-card .card').first())
+      .toHaveCSS('display', 'flex');
+    expect(stylesheetRequests.get('/cb-page-dashboard.css')).toBe(initialDashboardRequests + 1);
+  });
+
   test('contacts page renders contact list', async ({ page }) => {
     await page.goto('/contacts');
     await expect(page.locator('cb-page-contacts .page-title')).toHaveText('All Contacts');
@@ -80,6 +143,19 @@ test.describe('SSR pages', () => {
   });
 });
 
+test.describe('SSR without JavaScript', () => {
+  test.use({ javaScriptEnabled: false });
+
+  test('dashboard styles are available inside its ShadowRoot', async ({ page }) => {
+    await page.goto('/');
+
+    const card = page.locator('cb-page-dashboard cb-contact-card .card').first();
+    await expect(card).toBeVisible();
+    await expect(card).toHaveCSS('display', 'flex');
+    await expect(card).toHaveCSS('align-items', 'center');
+  });
+});
+
 // ── Navigation tests ──────────────────────────────────────────────
 
 test.describe('client-side navigation', () => {
diff --git a/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/contact-detail-chromium.png b/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/contact-detail-chromium.png
index e2ba5d515..c0cc73655 100644
Binary files a/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/contact-detail-chromium.png and b/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/contact-detail-chromium.png differ
diff --git a/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/contacts-chromium.png b/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/contacts-chromium.png
index 4ef0faa42..8eae18be8 100644
Binary files a/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/contacts-chromium.png and b/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/contacts-chromium.png differ
diff --git a/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/dashboard-chromium.png b/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/dashboard-chromium.png
index 6b4354eb1..c8f24714a 100644
Binary files a/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/dashboard-chromium.png and b/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/dashboard-chromium.png differ
diff --git a/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/favorites-chromium.png b/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/favorites-chromium.png
index a6f9d89c7..b033e4664 100644
Binary files a/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/favorites-chromium.png and b/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/favorites-chromium.png differ
diff --git a/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/group-work-chromium.png b/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/group-work-chromium.png
index 41010132e..ff92f25d8 100644
Binary files a/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/group-work-chromium.png and b/examples/app/contact-book-manager/tests/contact-book.spec.ts-snapshots/group-work-chromium.png differ
diff --git a/examples/app/routes/tests/routes-webui.spec.ts b/examples/app/routes/tests/routes-webui.spec.ts
index 2d624ecd7..61496d711 100644
--- a/examples/app/routes/tests/routes-webui.spec.ts
+++ b/examples/app/routes/tests/routes-webui.spec.ts
@@ -262,18 +262,9 @@ test.describe('?active boolean attributes', () => {
     await page.getByRole('link', { name: 'Frontend' }).click();
     await expect(page.locator('main h2')).toContainText('Frontend');
 
-    // Check the nav link for Frontend has the active attribute
-    const hasActive = await page.evaluate(() => {
-      const app = document.querySelector('routes-app');
-      const links = app?.shadowRoot?.querySelectorAll('nav a');
-      for (const a of links ?? []) {
-        if (a.textContent?.includes('Frontend') && a.hasAttribute('active')) {
-          return true;
-        }
-      }
-      return false;
-    });
-    expect(hasActive).toBe(true);
+    // The unwrapped Light DOM nav link for Frontend has the active attribute.
+    const frontend = page.locator('routes-app > nav').getByRole('link', { name: /Frontend/ });
+    await expect(frontend).toHaveAttribute('active', '');
   });
 
   test('active attribute updates when navigating to different section', async ({ page }) => {
@@ -284,20 +275,10 @@ test.describe('?active boolean attributes', () => {
     await page.getByRole('link', { name: 'Backend' }).click();
     await expect(page.locator('main h2')).toContainText('Backend');
 
-    // Backend link should be active, Frontend should not
-    const activeStates = await page.evaluate(() => {
-      const app = document.querySelector('routes-app');
-      const links = app?.shadowRoot?.querySelectorAll('nav a');
-      const states: Record<string, boolean> = {};
-      for (const a of links ?? []) {
-        const text = a.textContent?.trim() ?? '';
-        if (text.includes('Frontend')) states['Frontend'] = a.hasAttribute('active');
-        if (text.includes('Backend')) states['Backend'] = a.hasAttribute('active');
-      }
-      return states;
-    });
-    expect(activeStates['Backend']).toBe(true);
-    expect(activeStates['Frontend']).toBe(false);
+    // Backend link should be active, Frontend should not.
+    const nav = page.locator('routes-app > nav');
+    await expect(nav.getByRole('link', { name: /Backend/ })).toHaveAttribute('active', '');
+    await expect(nav.getByRole('link', { name: /Frontend/ })).not.toHaveAttribute('active', '');
   });
 
   test('topic link active attribute updates on topic navigation', async ({ page }) => {
@@ -306,17 +287,8 @@ test.describe('?active boolean attributes', () => {
     await page.getByRole('link', { name: 'React' }).click();
     await expect(page.locator('main h3')).toContainText('React');
 
-    // React topic link should be active
-    const hasActive = await page.evaluate(() => {
-      const section = document.querySelector('routes-app')?.shadowRoot?.querySelector('section-page');
-      const links = section?.shadowRoot?.querySelectorAll('.topics a');
-      for (const a of links ?? []) {
-        if (a.textContent?.includes('React') && a.hasAttribute('active')) {
-          return true;
-        }
-      }
-      return false;
-    });
-    expect(hasActive).toBe(true);
+    // The unwrapped Light DOM topic link for React should be active.
+    const react = page.locator('section-page .topics').getByRole('link', { name: 'React' });
+    await expect(react).toHaveAttribute('active', '');
   });
 });
diff --git a/examples/app/service-worker/README.md b/examples/app/service-worker/README.md
index 2011bd1da..8df28cbf9 100644
--- a/examples/app/service-worker/README.md
+++ b/examples/app/service-worker/README.md
@@ -42,7 +42,7 @@ The build step:
 7. Renders every sample API payload once through the WASM handler.
 
 The streamed UI uses normal WebUI component files: every `src/*.html` fragment
-has a paired `src/*.css` file. The app is built with `--css style --dom light`,
+has a paired `src/*.css` file. The app is built with `--css style`,
 so component CSS is embedded in the rendered fragments and no standalone
 `public/styles.css` file is needed.
 
diff --git a/examples/app/service-worker/package.json b/examples/app/service-worker/package.json
index a16ea9e66..1f32fe758 100644
--- a/examples/app/service-worker/package.json
+++ b/examples/app/service-worker/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "pnpm run build:deps && pnpm run build:scripts && pnpm run copy:wasm && pnpm run typecheck && pnpm run build:client && pnpm run build:protocol && pnpm run inject:theme && pnpm run check:render",
     "build:deps": "pnpm --filter @microsoft/webui run build",
-    "build:protocol": "cargo run -p microsoft-webui-cli -- build ./src --out ./public/protocol.bin --plugin=webui --projection-manifest ./public/webui-projection.json --css style --dom light",
+    "build:protocol": "cargo run -p microsoft-webui-cli -- build ./src --out ./public/protocol.bin --plugin=webui --projection-manifest ./public/webui-projection.json --css style",
     "build:scripts": "esbuild scripts/copy-wasm.ts scripts/inject-theme.ts scripts/check-render.ts scripts/serve.ts --bundle --outdir=dist-scripts --platform=node --format=esm --target=node22 --external:../public/wasm/handler/webui_wasm_handler.js",
     "copy:wasm": "node dist-scripts/copy-wasm.js",
     "inject:theme": "node dist-scripts/inject-theme.js",
diff --git a/examples/app/service-worker/scripts/check-render.ts b/examples/app/service-worker/scripts/check-render.ts
index 3875a74c6..35108e909 100644
--- a/examples/app/service-worker/scripts/check-render.ts
+++ b/examples/app/service-worker/scripts/check-render.ts
@@ -70,6 +70,9 @@ while (!step.done) {
     JSON.stringify(payload.state),
   ) as WasmStreamStep;
   html += decoder.decode(step.bytes);
+  if (!html.includes('<style data-webui-resource="')) {
+    throw new Error(`Rendered boundary ${boundary.name} did not include component CSS`);
+  }
 }
 
 for (const name of apiFiles) {
diff --git a/examples/app/todo-webui/tests/todo-webui.spec.ts b/examples/app/todo-webui/tests/todo-webui.spec.ts
index 58dea0868..49a844e8d 100644
--- a/examples/app/todo-webui/tests/todo-webui.spec.ts
+++ b/examples/app/todo-webui/tests/todo-webui.spec.ts
@@ -5,7 +5,7 @@ import { test, expect } from '@playwright/test';
 
 // ─── Helper ────────────────────────────────────────────────────
 // Playwright locators already pierce shadow DOM by default, so
-// `page.locator('todo-item .title')` works in both light and shadow mode.
+// `page.locator('todo-item .title')` works for both Light and Shadow components.
 // For page.evaluate calls we use this helper to get the render root.
 
 /** Return the render root of a custom element (shadowRoot or the element). */
diff --git a/packages/webui-framework/README.md b/packages/webui-framework/README.md
index b37803ba3..b7e9beaf5 100644
--- a/packages/webui-framework/README.md
+++ b/packages/webui-framework/README.md
@@ -7,7 +7,7 @@ This package is the browser-side runtime used by `webui build --plugin=webui`. I
 - `WebUIElement` for SSR hydration and client-created elements
 - `@observable`, `@attr`, and `@volatile` decorators
 - direct DOM binding updates
-- light DOM or shadow DOM rendering (`--dom=light|shadow` flag)
+- Shadow-default components with opt-in global Light and authored Shadow islands
 - SSR state seeding
 
 If you are building WebUI apps in this repo, this is the component model used by examples like `examples/app/todo-webui`, `examples/app/commerce`, and `examples/app/contact-book-manager`.
@@ -79,7 +79,9 @@ CounterCard.define('counter-card');
 <button @click="{increment()}">Increment</button>
 ```
 
-Build with `--dom=shadow` (default) to wrap in a declarative shadow root, or `--dom=light` for light DOM rendering.
+Unwrapped components default to Shadow. A `dom: "light"` build renders them as
+Light while preserving any sole top-level
+`<template shadowrootmode="open">` component as Shadow.
 
 ### Use it from your page
 
@@ -128,10 +130,9 @@ rendered block size of one instance; WebUI emits it as
 `contain-intrinsic-block-size: auto 18rem` before first layout. The SSR DOM
 remains present, searchable, and accessible while the browser skips offscreen
 style, layout, and paint work. The generated policy applies to instances in the
-document, Light DOM, and standard Shadow DOM components. A `--dom=light`
-component inside an authored shadow root needs the `style` CSS strategy or an
-equivalent rule in that root's stylesheet because document styles cannot cross
-the boundary.
+document, Light DOM, and standard Shadow DOM components. A Light component
+inside a Shadow root receives the rule through its precomputed style
+closure, which delivers the stylesheet into that root under every CSS strategy.
 
 Import the optional coordinator entry once before component modules:
 
@@ -281,22 +282,29 @@ post-hydration signal. Descendants must not structurally mutate a containing
 component's SSR subtree before it hydrates, because hydration relies on stable
 compiled paths.
 
-### DOM strategy (`--dom`)
+### Light and Shadow DOM
 
-The `--dom` flag controls how the server renders component content:
-
-| Flag | Behavior |
-|------|----------|
-| `--dom=shadow` (default) | Wraps component HTML in `<template shadowrootmode="open">` |
-| `--dom=light` | Renders component content as direct children of the host element |
+An unwrapped component receives a generated open Shadow root by default. In a
+`dom: "light"` build it renders as direct children of its host. A component
+whose sole top-level element is a bare `<template>` explicitly renders as Light
+and is unwrapped, even under the Shadow fallback. A sole
+`<template shadowrootmode="open">` remains Shadow in either mode. Templates with
+attributes and policy wrappers do not select a mode. Closed roots and invalid
+values or placement are build errors; `<slot>` is rejected only for effective
+Light components.
 
 The runtime auto-detects which mode was used at hydration time:
 - If a `shadowRoot` already exists → shadow DOM SSR path
 - If `childNodes` exist but no shadow root → light DOM SSR path
 - If neither → client-created path (uses `meta.sd` to decide)
 
-Light DOM is useful for simpler styling (CSS inheritance works naturally) and
-better search-engine indexing.  Shadow DOM provides style encapsulation.
+Light components use authored/global ordinary CSS in the owning CSS tree.
+Shadow components keep native Shadow scoping. `:host`, `:host-context`, and
+`::slotted` fail in effective Light CSS.
+The Link, Style, and Module delivery strategies all support both modes.
+
+In a Light build, add open wrappers to slot, native-encapsulation, or CSS-heavy
+frequently restyled components.
 
 ---
 
@@ -346,6 +354,8 @@ The asset graph keeps entry-owned templates external, leaves single-root
 dependencies inline, and emits dependencies shared by multiple roots once as
 flat dynamic chunks. Component assets cannot be combined with `<route>`. Load
 the normal entry bundle first so external prerequisites are registered.
+Current assets require version 3 and an atomically validated
+`componentStyles` catalog; any other version is rejected as unsupported.
 
 The compiler records final Link stylesheet filenames in the protocol. For
 Shadow builds, the handler emits that finite manifest as inert JSON in the
@@ -713,7 +723,6 @@ interface TemplateMeta {
   r?: [collection, itemVar, blockIdx, slot][]; // Repeat blocks
   eg?: [event, [[handler, argSpecs, targetIndex, usesEvent?]]][]; // Events
   b?: TemplateBlockMeta[];             // Nested block metadata
-  sa?: string;                         // Adopted stylesheet specifier
   sd?: 1;                              // Shadow DOM flag for client-created
   re?: [event, handler, argSpecs][];    // Root-level events
   tr?: string[];                       // Template state roots
@@ -879,7 +888,7 @@ The framework supports three CSS delivery strategies:
 | Strategy | How it works |
 |----------|-------------|
 | **Link** | `<link>` tag baked into `meta.h`; the first client-created shadow instance authorizes shared constructable sheets through native loading, then warm instances adopt them before paint |
-| **Inline** | `<style>` tag baked into `meta.h` — no external request |
+| **Style** | `<style>` tag baked into `meta.h` — no external request |
 | **Module** | `<script type="importmap">{"imports":{"tag-name":"data:text/css,..."}}</script>` in the HTML payload registers the CSS as a module under `tag-name`. The framework imports it via `import(tag, { with: { type: 'css' } })` and applies the resulting `CSSStyleSheet` via `adoptedStyleSheets` for shadow DOM isolation |
 
 Link promotion is progressive enhancement. Registration performs a bounded
@@ -909,7 +918,7 @@ the pending mount, while a synchronous reconnect preserves it. A link error
 is reported, leaves the browser's native links in place, releases the temporary
 guard, and completes deferred hydration. The component may be unstyled after a
 definitive stylesheet failure, but it remains visible and usable. SSR hydration,
-Inline, Module, and Light DOM behavior are unchanged.
+Style, Module, and authored/global Light DOM behavior are unchanged.
 
 ### Intent-time Link preloading for component assets
 
diff --git a/packages/webui-framework/RENDERING.md b/packages/webui-framework/RENDERING.md
index 41edde5ec..a6284c939 100644
--- a/packages/webui-framework/RENDERING.md
+++ b/packages/webui-framework/RENDERING.md
@@ -133,7 +133,6 @@ The compiler emits one JSON-safe `TemplateMeta` per component plus a small compo
       "r": [["items", "item", 1, [[0], 0]]],
       "eg": [],
       "b": [],
-      "sa": "todo-app",
       "sd": 1,
       "re": []
     }
@@ -152,7 +151,6 @@ The matching executable payload is stored under `window.__webui.templateFns['tod
 | `r` | Repeat blocks with `[collection, itemVar, blockIndex, slot]`. |
 | `eg` | Event bindings grouped by event name, with handler argument specs and target paths. |
 | `b` | Nested block table (sub-templates for conditional/repeat bodies). |
-| `sa` | Adopted-stylesheet specifier (CSS module). |
 | `sd` | Truthy when client-created instances should attach a shadow root. |
 | `re` | Root-level host events (attached to the host element; observe events targeted at the host itself plus anything bubbling to it - `composed` is required only to cross a shadow boundary). |
 
@@ -382,24 +380,33 @@ Listener cleanup is automatic. `$destroy` (called from `disconnectedCallback` vi
 
 ## CSS strategies
 
-Three delivery modes, set by the compiler from `<link>` / `<style>` declarations in the source HTML:
+Three delivery modes are set by the compiler:
 
 | Strategy | How it works |
 |---|---|
-| **Link** | `<link rel="stylesheet">` baked into `meta.h`. The browser fetches it normally. |
-| **Inline** | `<style>` element baked into `meta.h`. No extra request. |
-| **Module** | A `<script type="importmap">{"imports":{"tag-name":"data:text/css,..."}}</script>` block in the page payload registers the CSS as a module. The framework retrieves the same `CSSStyleSheet` via `import(tag, { with: { type: 'css' } })` and applies it to every instance via `adoptedStyleSheets` (`meta.sa` carries the specifier). |
+| **Link** | Installs an external stylesheet resource |
+| **Style** | Installs compiled CSS in a `<style>` element |
+| **Module** | Starts with an SSR style fallback, then imports and adopts a shared `CSSStyleSheet` |
 
-Module sheets are cached, so each instance pays the cost of one `adoptedStyleSheets` push, not a full CSS parse.
+Compiler-ordered closures install resources once per Document or ShadowRoot.
+Partial navigation, progressive streaming, and component assets share the same
+required `componentStyles` catalog. Module resources carry their CSS directly;
+the catalog installs each specifier's import map once per owning Document
+before importing it, then reuses the cached parsed sheet for every target.
 
 ---
 
 ## Light DOM vs Shadow DOM
 
-Set by the compiler via `--dom` flag, surfaced as `meta.sd`:
+Unwrapped components follow the build fallback: Shadow by default, or Light with
+`dom: "light"`. A sole bare top-level `<template>` explicitly selects Light and
+is unwrapped; a sole top-level `<template shadowrootmode="open">` always selects
+Shadow. The effective result is surfaced as `meta.sd`:
 
 - **Shadow DOM** (`meta.sd` truthy): SSR uses Declarative Shadow DOM. Client-created instances call `attachShadow({ mode: 'open' })`. Slot content stays in light DOM and projects through.
-- **Light DOM**: SSR renders children directly into the host. Client-created instances populate the host's `appendChild` slot. No style isolation; CSS lives globally or on the host.
+- **Light DOM**: SSR renders children directly into the host. Client-created
+  instances populate the host. Authored/global CSS is installed in the owning
+  Document or ShadowRoot, and native `<slot>` is rejected at build time.
 
 `$mount` auto-detects:
 
@@ -408,6 +415,9 @@ Set by the compiler via `--dom` flag, surfaced as `meta.sd`:
 - `meta.sd` set, no shadow root → shadow DOM client-created (existing children become slot content).
 - Otherwise → light DOM client-created.
 
+Style resources follow compiler-ordered closures and install once per Document
+or ShadowRoot. A ShadowRoot is a closure cut point.
+
 ---
 
 ## Performance instrumentation
@@ -466,7 +476,8 @@ src/
 │   ├── markers.ts              Marker constants, collectItemMarkers,
 │   │                           buildSSRIndex (block-skipping pre-order walk)
 │   ├── diff.ts                 syncRepeat: positional + explicit-key reconciliation
-│   ├── styles.ts               injectModuleStyle (adopted CSS modules)
+│   ├── styles.ts               componentStyles catalog, installComponentStyles
+│   │                           (Link/Style/Module resources, import maps)
 │   └── types.ts                AttrBinding, CondBinding, RepeatBinding,
 │                               TextBinding, ScopeFrame, TemplateInstance
 ├── decorators.ts               @observable, @attr, attribute name registry,
diff --git a/packages/webui-framework/src/component-asset.test.ts b/packages/webui-framework/src/component-asset.test.ts
index ef1bb3fc1..238808ddb 100644
--- a/packages/webui-framework/src/component-asset.test.ts
+++ b/packages/webui-framework/src/component-asset.test.ts
@@ -7,6 +7,12 @@ import { describe, test } from 'node:test';
 import { takeGeneratedComponentAssetStyles } from './component-asset/generated-manifest.js';
 import { getTemplate, type TemplateMeta } from './template.js';
 import { defineComponentAssets } from './component-asset.js';
+import { validateAsset } from './component-asset/asset.js';
+import {
+  installComponentStyles,
+  registerComponentStyles,
+  setCssModuleLoaderForTests,
+} from './element/styles.js';
 
 type GlobalName = 'window' | 'document';
 
@@ -46,18 +52,22 @@ function componentAsset(templates: Record<string, TemplateMeta>): Record<string,
   const components = Object.keys(templates);
   return {
     type: 'webui-component-asset',
-    version: 2,
+    version: 3,
     kind: 'root',
     root: components[0],
     components,
     requiredComponents: components,
     externalComponents: [],
     imports: [],
-    templateStyles: [],
+    componentStyles: emptyComponentStyles(),
     templates,
   };
 }
 
+function emptyComponentStyles(): Record<string, unknown> {
+  return { version: 1, strategy: 'style', resources: {}, closures: {} };
+}
+
 describe('component asset helpers', () => {
   test('generated style metadata is a no-op without browser globals', () => {
     const previousWindow = setGlobal('window', undefined);
@@ -229,17 +239,172 @@ describe('component asset helpers', () => {
     }
   });
 
-  test('manifest preload registers templates and injects nonce importmaps', async () => {
+  test('enhanced asset styles install in closure order and deduplicate', async () => {
+    class StyleElement {
+      rel = '';
+      href = '';
+      textContent = '';
+      private readonly attributes = new Map<string, string>();
+
+      setAttribute(name: string, value: string): void {
+        this.attributes.set(name, value);
+      }
+
+      getAttribute(name: string): string | null {
+        return this.attributes.get(name) ?? null;
+      }
+    }
+
+    const markers: StyleElement[] = [];
+    const previousWindow = setGlobal('window', { __webui: {} });
+    const previousDocument = setGlobal('document', {
+      nodeType: 9,
+      baseURI: 'https://example.test/app/',
+      createElement() {
+        return new StyleElement();
+      },
+      head: {
+        children: markers,
+        insertBefore(marker: StyleElement, before: StyleElement | null) {
+          const index = before ? markers.indexOf(before) : -1;
+          if (index === -1) markers.push(marker);
+          else markers.splice(index, 0, marker);
+          return marker;
+        },
+      },
+      getElementById() {
+        return null;
+      },
+      querySelector() {
+        return null;
+      },
+    });
+
+    try {
+      const assets = defineComponentAssets({
+        'asset-parent': {
+          asset: assetObjectModule({
+            ...componentAsset({
+              'asset-parent': { h: '<asset-child></asset-child>' },
+              'asset-child': { h: '<p>Child</p>' },
+            }),
+            version: 3,
+            componentStyles: {
+              version: 1,
+              strategy: 'style',
+              resources: {
+                'asset-parent': { kind: 'style', css: '.parent{}' },
+                'asset-child': { kind: 'style', css: '.child{}' },
+              },
+              closures: {
+                'asset-parent': ['asset-parent', 'asset-child'],
+                'asset-child': ['asset-child'],
+              },
+            },
+          }),
+        },
+      });
+
+      await assets.preload('asset-parent').asset;
+      await installComponentStyles('asset-parent', document);
+      await installComponentStyles('asset-parent', document);
+
+      assert.deepEqual(
+        markers.map(marker => marker.getAttribute('data-webui-resource')),
+        ['asset-parent', 'asset-child'],
+      );
+    } finally {
+      restoreGlobal('window', previousWindow);
+      restoreGlobal('document', previousDocument);
+    }
+  });
+
+  test('validates the version boundary for componentStyles', () => {
+    const asset = componentAsset({ 'version-card': { h: '<p>Version</p>' } });
+    validateAsset(asset, 'root');
+
+    assert.throws(() => validateAsset({
+      ...asset,
+      version: 2,
+    }, 'root'), /Unsupported component asset version: 2/);
+
+    assert.throws(() => validateAsset({
+      ...asset,
+      componentStyles: undefined,
+    }, 'root'), /Version 3 component assets require componentStyles/);
+
+    assert.throws(() => validateAsset({
+      ...asset,
+      componentStyles: {
+        version: 1,
+        strategy: 'style',
+        resources: {
+          'version-card': { kind: 'link', href: '/wrong.css' },
+        },
+        closures: {
+          'version-card': ['version-card'],
+        },
+      },
+    }, 'root'), /Invalid component style resource/);
+  });
+
+  test('rejects invalid version 3 styles before registering templates', async () => {
+    const previousWindow = setGlobal('window', { __webui: {} });
+    const previousDocument = setGlobal('document', {
+      nodeType: 9,
+      baseURI: 'https://example.test/app/',
+      querySelector() {
+        return null;
+      },
+    });
+
+    try {
+      const assets = defineComponentAssets({
+        'invalid-v3-card': {
+          asset: assetObjectModule({
+            ...componentAsset({
+              'invalid-v3-card': { h: '<p>Must not register</p>' },
+            }),
+            version: 3,
+            componentStyles: {
+              version: 1,
+              strategy: 'style',
+              resources: {
+                'invalid-v3-card': { kind: 'link', href: '/wrong.css' },
+              },
+              closures: {
+                'invalid-v3-card': ['invalid-v3-card'],
+              },
+            },
+          }),
+        },
+      });
+
+      await assert.rejects(
+        assets.preload('invalid-v3-card').asset,
+        /Invalid component style resource/,
+      );
+      assert.equal(getTemplate('invalid-v3-card'), undefined);
+    } finally {
+      restoreGlobal('window', previousWindow);
+      restoreGlobal('document', previousDocument);
+    }
+  });
+
+  test('manifest preload registers templates and installs Module componentStyles with a nonce import map', async () => {
     const appended: ScriptMock[] = [];
     const template: TemplateMeta = { h: '<p>Lazy</p>' };
     const previousWindow = setGlobal('window', { __webui: { nonce: 'abc123' } });
     const previousDocument = setGlobal('document', {
+      nodeType: 9,
       baseURI: 'https://example.test/app/',
+      adoptedStyleSheets: [] as CSSStyleSheet[],
       createElement(tag: string) {
         assert.equal(tag, 'script');
         return { type: '', nonce: '', textContent: '' };
       },
       head: {
+        children: [] as unknown[],
         appendChild(script: ScriptMock) {
           appended.push(script);
           return script;
@@ -252,19 +417,28 @@ describe('component asset helpers', () => {
         return null;
       },
     });
+    setCssModuleLoaderForTests(() => Promise.resolve({ default: {} as CSSStyleSheet }));
 
     try {
       const assets = defineComponentAssets({
         'lazy-card': {
           asset: assetObjectModule({
             ...componentAsset({ 'lazy-card': template }),
-            templateStyles: [
-              '<script type="importmap">{"imports":{"lazy-card":"data:text/css,body%7B%7D"}}</script>',
-            ],
+            componentStyles: {
+              version: 1,
+              strategy: 'module',
+              resources: {
+                'lazy-card': { kind: 'module', specifier: 'lazy-card', css: 'body{}' },
+              },
+              closures: {
+                'lazy-card': ['lazy-card'],
+              },
+            },
           }),
         },
       });
       await assets.preload('lazy-card').asset;
+      await installComponentStyles('lazy-card', document);
 
       assert.equal(appended.length, 1);
       assert.equal(appended[0].type, 'importmap');
@@ -275,26 +449,20 @@ describe('component asset helpers', () => {
       );
       assert.deepEqual(getTemplate('lazy-card'), template);
     } finally {
+      setCssModuleLoaderForTests();
       restoreGlobal('window', previousWindow);
       restoreGlobal('document', previousDocument);
     }
   });
 
-  test('manifest preload rejects non-importmap template styles', async () => {
+  test('manifest preload rejects malformed Module componentStyles', async () => {
     const previousWindow = setGlobal('window', { __webui: {} });
     const previousDocument = setGlobal('document', {
+      nodeType: 9,
       baseURI: 'https://example.test/app/',
-      createElement() {
-        return { type: '', nonce: '', textContent: '' };
-      },
       getElementById() {
         return null;
       },
-      head: {
-        appendChild(script: ScriptMock) {
-          return script;
-        },
-      },
       querySelector() {
         return null;
       },
@@ -307,16 +475,23 @@ describe('component asset helpers', () => {
             ...componentAsset({
               'invalid-style-card': { h: '<p>Invalid style</p>' },
             }),
-            templateStyles: [
-              '<script type="application/json">{"imports":{"invalid-style-card":"data:text/css,body%7B%7D"}}</script>',
-            ],
+            componentStyles: {
+              version: 1,
+              strategy: 'module',
+              resources: {
+                'invalid-style-card': { kind: 'module', specifier: 'invalid-style-card' },
+              },
+              closures: {
+                'invalid-style-card': ['invalid-style-card'],
+              },
+            },
           }),
         },
       });
 
       await assert.rejects(
         assets.preload('invalid-style-card').asset,
-        /must be a <script type="importmap"> tag/,
+        /Invalid component style resource/,
       );
       assert.equal(window.__webui?.templates, undefined);
     } finally {
@@ -342,14 +517,14 @@ describe('component asset helpers', () => {
         'fn-card': {
           asset: assetModule(`{
             type: 'webui-component-asset',
-            version: 2,
+            version: 3,
             kind: 'root',
             root: 'fn-card',
             components: ['fn-card'],
             requiredComponents: ['fn-card'],
             externalComponents: [],
             imports: [],
-            templateStyles: [],
+            componentStyles: { version: 1, strategy: 'style', resources: {}, closures: {} },
             templates: { 'fn-card': { h: '<p>Fn</p>' } },
             templateFunctions: { 'fn-card': [function(v,s){return !!v('ready',s);}] }
           }`),
@@ -370,6 +545,7 @@ describe('component asset helpers', () => {
   test('manifest preload reuses in-flight work and starts module plus data', async () => {
     const previousWindow = setGlobal('window', { __webui: {} });
     const previousDocument = setGlobal('document', {
+      nodeType: 9,
       baseURI: 'https://example.test/app/',
       createElement() {
         return { type: '', nonce: '', textContent: '' };
@@ -392,12 +568,7 @@ describe('component asset helpers', () => {
     try {
       const assets = defineComponentAssets({
         'cached-card': {
-          asset: assetObjectModule({
-            ...componentAsset({ 'cached-card': { h: '<p>Cached</p>' } }),
-            templateStyles: [
-              '<script type="importmap">{"imports":{"cached-card":"data:text/css,body%7B%7D"}}</script>',
-            ],
-          }),
+          asset: assetObjectModule(componentAsset({ 'cached-card': { h: '<p>Cached</p>' } })),
           module: async () => {
             moduleCount += 1;
           },
@@ -657,14 +828,14 @@ describe('component asset helpers', () => {
         'empty-card': {
           asset: assetObjectModule({
             type: 'webui-component-asset',
-            version: 2,
+            version: 3,
             kind: 'root',
             root: 'empty-card',
             components: [],
             requiredComponents: [],
             externalComponents: [],
             imports: [],
-            templateStyles: [],
+            componentStyles: emptyComponentStyles(),
             templates: {},
           }),
         },
@@ -692,14 +863,14 @@ describe('component asset helpers', () => {
         'declared-card': {
           asset: assetObjectModule({
             type: 'webui-component-asset',
-            version: 2,
+            version: 3,
             kind: 'root',
             root: 'declared-card',
             components: ['declared-card'],
             requiredComponents: ['declared-card'],
             externalComponents: [],
             imports: [],
-            templateStyles: [],
+            componentStyles: emptyComponentStyles(),
             templates: { 'undeclared-card': { h: '<p>Wrong</p>' } },
           }),
         },
@@ -727,14 +898,14 @@ describe('component asset helpers', () => {
         'condition-card': {
           asset: assetModule(`{
             type: 'webui-component-asset',
-            version: 2,
+            version: 3,
             kind: 'root',
             root: 'condition-card',
             components: ['valid-child', 'condition-card'],
             requiredComponents: ['valid-child', 'condition-card'],
             externalComponents: [],
             imports: [],
-            templateStyles: [],
+            componentStyles: { version: 1, strategy: 'style', resources: {}, closures: {} },
             templates: {
               'valid-child': { h: '<p>Valid</p>' },
               'condition-card': {
@@ -778,14 +949,14 @@ describe('component asset helpers', () => {
         'stale-condition-card': {
           asset: assetObjectModule({
             type: 'webui-component-asset',
-            version: 2,
+            version: 3,
             kind: 'root',
             root: 'stale-condition-card',
             components: ['stale-condition-card'],
             requiredComponents: ['stale-condition-card'],
             externalComponents: [],
             imports: [],
-            templateStyles: [],
+            componentStyles: emptyComponentStyles(),
             templates: {
               'stale-condition-card': {
                 h: '<!--wc:0--><!--/wc-->',
@@ -855,21 +1026,22 @@ describe('component asset helpers', () => {
         return null;
       },
     });
+
     const chunkUrl = assetObjectModule({
       type: 'webui-component-asset',
-      version: 2,
+      version: 3,
       kind: 'chunk',
       components: ['shared-detail'],
       requiredComponents: ['shared-detail'],
       externalComponents: [],
       imports: [],
-      templateStyles: [],
+      componentStyles: emptyComponentStyles(),
       templates: { 'shared-detail': { h: '<p>Shared</p>' } },
     });
     const chunkUrlSource = JSON.stringify(chunkUrl);
     const rootModule = (root: string) => assetModule(`{
       type: 'webui-component-asset',
-      version: 2,
+      version: 3,
       kind: 'root',
       root: '${root}',
       components: ['${root}'],
@@ -884,7 +1056,7 @@ describe('component asset helpers', () => {
           return import(${chunkUrlSource});
         }
       }],
-      templateStyles: [],
+      componentStyles: { version: 1, strategy: 'style', resources: {}, closures: {} },
       templates: { '${root}': { h: '<shared-detail></shared-detail>' } }
     }`);
 
@@ -916,6 +1088,80 @@ describe('component asset helpers', () => {
     }
   });
 
+  test('accepts deferred closures with an exact external resource', async () => {
+    const document = {
+      nodeType: 9,
+      baseURI: 'https://example.test/app/',
+      querySelector() {
+        return null;
+      },
+    } as unknown as Document;
+    const previousWindow = setGlobal('window', { __webui: {} });
+    const previousDocument = setGlobal('document', document);
+
+    try {
+      registerComponentStyles({
+        version: 1,
+        strategy: 'style',
+        resources: {
+          'entry-bundle': {
+            kind: 'style',
+            css: '.entry{}',
+            members: ['entry-card', 'shared-card'],
+          },
+        },
+        closures: {
+          'index.html': ['entry-bundle'],
+        },
+      }, document);
+      const incomplete = {
+        ...componentAsset({ 'incomplete-lazy-card': { h: '<entry-card></entry-card>' } }),
+        componentStyles: {
+          version: 1,
+          strategy: 'style',
+          resources: {
+            'incomplete-lazy-card': { kind: 'style', css: '.lazy{}' },
+          },
+          closures: {
+            'incomplete-lazy-card': ['incomplete-lazy-card', 'entry-card'],
+          },
+        },
+      };
+      const incompleteAssets = defineComponentAssets({
+        'incomplete-lazy-card': { asset: assetObjectModule(incomplete) },
+      });
+      await assert.rejects(
+        incompleteAssets.preload('incomplete-lazy-card').asset,
+        /references missing resource "entry-card"/,
+      );
+
+      const asset = {
+        ...componentAsset({ 'lazy-card': { h: '<entry-card></entry-card>' } }),
+        componentStyles: {
+          version: 1,
+          strategy: 'style',
+          resources: {
+            'lazy-card': { kind: 'style', css: '.lazy{}' },
+            'entry-card': { kind: 'style', css: '.entry{}' },
+          },
+          closures: {
+            'lazy-card': ['lazy-card', 'entry-card'],
+          },
+        },
+      };
+      const assets = defineComponentAssets({
+        'lazy-card': { asset: assetObjectModule(asset) },
+      });
+
+      await assets.preload('lazy-card').asset;
+
+      assert.equal(getTemplate('lazy-card')?.h, '<entry-card></entry-card>');
+    } finally {
+      restoreGlobal('window', previousWindow);
+      restoreGlobal('document', previousDocument);
+    }
+  });
+
   test('missing entry prerequisites fail before root registration', async () => {
     const previousWindow = setGlobal('window', { __webui: {} });
     const previousDocument = setGlobal('document', {
diff --git a/packages/webui-framework/src/component-asset/asset.ts b/packages/webui-framework/src/component-asset/asset.ts
index fea821d4a..43eddebaa 100644
--- a/packages/webui-framework/src/component-asset/asset.ts
+++ b/packages/webui-framework/src/component-asset/asset.ts
@@ -5,9 +5,22 @@ import type {
   CompiledConditionFn,
   TemplateMeta,
 } from '../template.js';
+import {
+  requireComponentStyles,
+  type ComponentStyles,
+} from '../element/styles.js';
 
 const ASSET_TYPE = 'webui-component-asset';
-const ASSET_VERSION = 2;
+const COMPONENT_STYLES_ASSET_VERSION = 3;
+
+/**
+ * Detached style catalogs already produced by {@link validateAsset}.
+ *
+ * Preparing a catalog validates and deep-copies every resource and closure.
+ * Validation and payload preparation are separate steps that both need the
+ * result, so the first one keeps it instead of making the second redo the walk.
+ */
+const preparedAssetStyles = new WeakMap<object, ComponentStyles>();
 
 /** Dynamic import edge from a component asset root to a shared chunk. */
 export interface ComponentAssetImport {
@@ -22,20 +35,37 @@ export interface ComponentAssetImport {
 /** WebUI Framework component asset emitted by `webui build --emit-component-assets`. */
 export interface ComponentAsset {
   type: 'webui-component-asset';
-  version: 2;
+  /** Light-DOM-aware assets require an atomic component style catalog. */
+  version: 3;
   kind: 'root' | 'chunk';
   root?: string;
   components: string[];
   requiredComponents: string[];
   externalComponents: string[];
   imports: ComponentAssetImport[];
-  templateStyles: string[];
+  componentStyles: ComponentStyles;
   templates: Record<string, TemplateMeta>;
   templateFunctions?: Record<string, CompiledConditionFn[]>;
 }
 
-/** Read the default payload exported by an imported component asset module. */
-export function readComponentAssetModule(module: unknown): unknown {
+/**
+ * Validate and detach an asset's style catalog, remembering the result.
+ *
+ * Returns the same detached catalog on repeat calls for one raw payload, so
+ * validation and payload preparation share a single deep copy.
+ */
+export function prepareAssetComponentStyles(value: unknown): ComponentStyles {
+  if (typeof value === 'object' && value !== null) {
+    const cached = preparedAssetStyles.get(value);
+    if (cached) return cached;
+    const prepared = requireComponentStyles(value);
+    preparedAssetStyles.set(value, prepared);
+    return prepared;
+  }
+  return requireComponentStyles(value);
+}
+
+/** Read the default payload exported by an imported component asset module. */export function readComponentAssetModule(module: unknown): unknown {
   if (!isObject(module) || !isObject(module.default)) {
     throw new Error('[WebUI] Component asset module must default-export an asset object.');
   }
@@ -54,9 +84,12 @@ export function validateAsset(
   if (asset.type !== ASSET_TYPE) {
     throw new Error(`[WebUI] Invalid component asset type: ${String(asset.type)}`);
   }
-  if (asset.version !== ASSET_VERSION) {
+  if (asset.version !== COMPONENT_STYLES_ASSET_VERSION) {
     throw new Error(`[WebUI] Unsupported component asset version: ${String(asset.version)}`);
   }
+  if (asset.componentStyles === undefined) {
+    throw new Error('[WebUI] Version 3 component assets require componentStyles.');
+  }
   if (asset.kind !== expectedKind) {
     throw new Error(
       `[WebUI] Expected component asset kind "${expectedKind}", received "${String(asset.kind)}".`,
@@ -68,7 +101,7 @@ export function validateAsset(
   if (!Array.isArray(asset.imports)) {
     throw new Error('[WebUI] Component asset imports must be an array.');
   }
-  validateStringArray(asset.templateStyles, 'templateStyles');
+  prepareAssetComponentStyles(asset.componentStyles);
   if (!isObject(asset.templates)) {
     throw new Error('[WebUI] Component asset templates must be an object.');
   }
diff --git a/packages/webui-framework/src/component-asset/loader.ts b/packages/webui-framework/src/component-asset/loader.ts
index d787caff8..7c50b7942 100644
--- a/packages/webui-framework/src/component-asset/loader.ts
+++ b/packages/webui-framework/src/component-asset/loader.ts
@@ -7,6 +7,7 @@ import {
   registerTemplateData,
 } from '../template.js';
 import {
+  prepareAssetComponentStyles,
   readComponentAssetModule,
   sameComponents,
   validateAsset,
@@ -14,20 +15,26 @@ import {
   type ComponentAssetImport,
 } from './asset.js';
 import {
-  prepareAssetStyles,
-  readNonce,
-  registerAssetStyles,
-  type PreparedAssetStyles,
-} from './resources.js';
-import { prepareRegisteredLinkStyles } from '../element/link-styles.js';
+  hasRegisteredComponentStyleResource,
+  registerPreparedComponentStyles,
+  sameComponentStyleClosure,
+  sameComponentStyleResource,
+  validateComponentStylesRegistration,
+  type ComponentStyleResource,
+  type ComponentStyles,
+} from '../element/styles.js';
+import {
+  prepareComponentStyleLinks,
+  prepareRegisteredLinkStyles,
+} from '../element/link-styles.js';
 import type { ComponentAssetSource } from './manifest.js';
 
 const assetModulePromises = new Map<string, Promise<unknown>>();
 
 interface PreparedComponentAsset {
   asset: ComponentAsset;
+  componentStyles: ComponentStyles;
   linkStyles?: Promise<void>;
-  styles: PreparedAssetStyles;
 }
 
 /** Import, validate, and atomically register one component asset graph. */
@@ -66,10 +73,12 @@ async function registerRootAsset(
 
   const root = prepareComponentPayload(asset);
   const chunks = await prepareAssetImports(asset.imports);
+  const graph = [...chunks, root];
+  validatePreparedGraph(graph);
   for (let i = 0; i < chunks.length; i++) {
-    registerComponentPayload(chunks[i]);
+    registerComponentResources(chunks[i]);
   }
-  registerComponentPayload(root);
+  registerComponentResources(root);
   let pendingStyles: Promise<void>[] | undefined;
   for (let i = 0; i < chunks.length; i++) {
     const ready = chunks[i].linkStyles;
@@ -78,6 +87,10 @@ async function registerRootAsset(
   }
   if (root.linkStyles) (pendingStyles ??= []).push(root.linkStyles);
   if (pendingStyles) await Promise.all(pendingStyles);
+  for (let i = 0; i < chunks.length; i++) {
+    registerComponentTemplates(chunks[i]);
+  }
+  registerComponentTemplates(root);
 }
 
 function loadAssetModule(
@@ -126,21 +139,89 @@ function importAndPrepareChunk(
 }
 
 function prepareComponentPayload(asset: ComponentAsset): PreparedComponentAsset {
+  // `validateAsset` already produced this catalog; reuse it rather than
+  // validating and deep-copying the same payload a second time.
+  const componentStyles = prepareAssetComponentStyles(asset.componentStyles);
   prepareAssetTemplateData(asset.templates, asset.templateFunctions);
+  const templateLinkStyles = prepareRegisteredLinkStyles(asset.templates);
+  const componentStyleLinks = prepareComponentStyleLinks(componentStyles);
+  let linkStyles = templateLinkStyles;
+  if (templateLinkStyles && componentStyleLinks) {
+    linkStyles = Promise.all([templateLinkStyles, componentStyleLinks]).then(() => {});
+  } else {
+    linkStyles = templateLinkStyles ?? componentStyleLinks;
+  }
   return {
     asset,
-    linkStyles: prepareRegisteredLinkStyles(asset.templates),
-    styles: prepareAssetStyles(asset.templateStyles),
+    componentStyles,
+    linkStyles,
   };
 }
 
-function registerComponentPayload(prepared: PreparedComponentAsset): void {
-  const { asset, styles } = prepared;
-  if (componentsAlreadyRegistered(asset.components)) return;
+function registerComponentResources(prepared: PreparedComponentAsset): void {
+  registerPreparedComponentStyles(prepared.componentStyles);
+}
 
-  registerAssetStyles(styles, readNonce());
+function registerComponentTemplates(prepared: PreparedComponentAsset): void {
+  const { asset } = prepared;
+  if (componentsAlreadyRegistered(asset.components)) return;
   registerTemplateData(asset.templates, asset.templateFunctions);
-  validateRequiredComponents(asset);
+}
+
+function validatePreparedGraph(graph: readonly PreparedComponentAsset[]): void {
+  const resources = new Map<string, ComponentStyleResource>();
+  const closures = new Map<string, readonly string[]>();
+  const provided = new Set<string>();
+  for (let i = 0; i < graph.length; i++) {
+    const prepared = graph[i];
+    validateComponentStylesRegistration(prepared.componentStyles);
+    for (const component of prepared.asset.components) provided.add(component);
+    const styles = prepared.componentStyles;
+    for (const id of Object.keys(styles.resources)) {
+      const resource = styles.resources[id];
+      const current = resources.get(id);
+      if (current && !sameComponentStyleResource(current, resource)) {
+        throw new Error(`[WebUI] Conflicting component style resource "${id}".`);
+      }
+      resources.set(id, resource);
+    }
+    for (const root of Object.keys(styles.closures)) {
+      const closure = styles.closures[root];
+      const current = closures.get(root);
+      if (current && !sameComponentStyleClosure(current, closure)) {
+        throw new Error(`[WebUI] Conflicting component style closure "${root}".`);
+      }
+      closures.set(root, closure);
+    }
+  }
+  for (let i = 0; i < graph.length; i++) {
+    const styles = graph[i].componentStyles;
+    for (const root of Object.keys(styles.closures)) {
+      for (const id of styles.closures[root]) {
+        if (
+          !resources.has(id) &&
+          !hasRegisteredComponentStyleResource(id)
+        ) {
+          throw new Error(
+            `[WebUI] Component style closure "${root}" references missing resource "${id}".`,
+          );
+        }
+      }
+    }
+  }
+  const missing: string[] = [];
+  for (let i = 0; i < graph.length; i++) {
+    const asset = graph[i].asset;
+    for (const required of asset.requiredComponents) {
+      if (provided.has(required) || getTemplate(required)) continue;
+      if (missing.indexOf(required) < 0) missing.push(required);
+    }
+  }
+  if (missing.length === 0) return;
+
+  throw new Error(
+    `[WebUI] Component asset is missing required templ${missing.length === 1 ? 'ate' : 'ates'} ${missing.map(tag => `<${tag}>`).join(', ')}. Load the application entry bundle and protocol before deferred component assets.`,
+  );
 }
 
 function componentsAlreadyRegistered(components: readonly string[]): boolean {
@@ -163,16 +244,3 @@ function validateExternalComponents(asset: ComponentAsset): void {
     `[WebUI] Component asset requires entr${missing.length === 1 ? 'y template' : 'y templates'} ${missing.map(tag => `<${tag}>`).join(', ')}. Load the application entry bundle and protocol before deferred component assets.`,
   );
 }
-
-function validateRequiredComponents(asset: ComponentAsset): void {
-  const missing: string[] = [];
-  for (let i = 0; i < asset.requiredComponents.length; i++) {
-    const component = asset.requiredComponents[i];
-    if (!getTemplate(component)) missing.push(component);
-  }
-  if (missing.length === 0) return;
-
-  throw new Error(
-    `[WebUI] Component asset is missing required template${missing.length === 1 ? '' : 's'}: ${missing.map(tag => `<${tag}>`).join(', ')}. Ensure the application entry bundle and protocol are loaded before deferred component assets.`,
-  );
-}
diff --git a/packages/webui-framework/src/component-asset/resources.ts b/packages/webui-framework/src/component-asset/resources.ts
deleted file mode 100644
index 4cfee89af..000000000
--- a/packages/webui-framework/src/component-asset/resources.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-
-const injectedAssetStyles = new Set<string>();
-let assetStylesSeeded = false;
-
-interface WebUIAssetGlobal {
-  nonce?: string;
-  styles?: string[];
-  [key: string]: unknown;
-}
-
-/** Parsed import maps that can be committed without further validation. */
-export type PreparedAssetStyles = Record<string, string>[];
-
-/** Validate and parse all import maps without mutating browser state. */
-export function prepareAssetStyles(templateStyles: readonly string[]): PreparedAssetStyles {
-  const prepared = new Array<Record<string, string>>(templateStyles.length);
-  for (let i = 0; i < templateStyles.length; i++) {
-    prepared[i] = parseImportMap(templateStyles[i]);
-  }
-  return prepared;
-}
-
-/** Read the configured CSP nonce used by component asset resources. */
-export function readNonce(): string {
-  const nonce = assetGlobal()?.nonce;
-  if (nonce) return nonce;
-  const meta = document.querySelector('meta[name="webui-nonce"]') as HTMLMetaElement | null;
-  return meta?.content ?? '';
-}
-
-/** Commit import maps that were parsed during graph prevalidation. */
-export function registerAssetStyles(
-  preparedStyles: readonly Record<string, string>[],
-  nonce: string,
-): void {
-  if (preparedStyles.length === 0) return;
-  seedAssetStyleSet();
-
-  for (let i = 0; i < preparedStyles.length; i++) {
-    const imports = preparedStyles[i];
-    const nextImports: Record<string, string> = {};
-    let hasNewImport = false;
-    const specifiers = Object.keys(imports);
-    for (let j = 0; j < specifiers.length; j++) {
-      const specifier = specifiers[j];
-      if (injectedAssetStyles.has(specifier)) continue;
-      injectedAssetStyles.add(specifier);
-      nextImports[specifier] = imports[specifier];
-      hasNewImport = true;
-    }
-    if (!hasNewImport) continue;
-
-    const script = document.createElement('script');
-    script.type = 'importmap';
-    if (nonce) script.nonce = nonce;
-    script.textContent = JSON.stringify({ imports: nextImports });
-    document.head.appendChild(script);
-  }
-}
-
-function assetGlobal(): WebUIAssetGlobal | undefined {
-  return window.__webui as WebUIAssetGlobal | undefined;
-}
-
-function seedAssetStyleSet(): void {
-  if (assetStylesSeeded) return;
-  assetStylesSeeded = true;
-  const styles = assetGlobal()?.styles;
-  if (!styles) return;
-  for (let i = 0; i < styles.length; i++) {
-    injectedAssetStyles.add(styles[i]);
-  }
-}
-
-function parseImportMap(scriptMarkup: string): Record<string, string> {
-  const trimmed = scriptMarkup.trim();
-  if (!trimmed.startsWith('<script type="importmap"')) {
-    throw new Error('[WebUI] Component asset templateStyles entry must be a <script type="importmap"> tag.');
-  }
-  const openTagEnd = trimmed.indexOf('>');
-  const closeTagStart = trimmed.lastIndexOf('</script>');
-  if (openTagEnd < 0 || closeTagStart <= openTagEnd) {
-    throw new Error('[WebUI] Component asset importmap tag is malformed.');
-  }
-
-  const parsed = JSON.parse(trimmed.substring(openTagEnd + 1, closeTagStart)) as {
-    imports?: Record<string, unknown>;
-  };
-  if (!parsed.imports || typeof parsed.imports !== 'object') {
-    throw new Error('[WebUI] Component asset importmap is missing an imports object.');
-  }
-
-  const imports: Record<string, string> = {};
-  const specifiers = Object.keys(parsed.imports);
-  for (let i = 0; i < specifiers.length; i++) {
-    const specifier = specifiers[i];
-    const uri = parsed.imports[specifier];
-    if (typeof uri !== 'string' || !uri.startsWith('data:text/css,')) {
-      throw new Error(`[WebUI] Component asset importmap entry "${specifier}" must be a data:text/css URI.`);
-    }
-    imports[specifier] = uri;
-  }
-  return imports;
-}
diff --git a/packages/webui-framework/src/element.ts b/packages/webui-framework/src/element.ts
index 2c4a82809..d902c3861 100644
--- a/packages/webui-framework/src/element.ts
+++ b/packages/webui-framework/src/element.ts
@@ -207,13 +207,13 @@ export class WebUIElement extends TemplateElement {
     syncAttrProperties(this, this.constructor as Function);
   }
 
-  /** Dispatch a bubbling custom event. Uses composed:true when in shadow DOM. */
+  /** Dispatch a bubbling, composed custom event for parent communication. */
   $emit(name: string, detail?: unknown): boolean {
     return this.dispatchEvent(
       new CustomEvent(name, {
         bubbles: true,
         cancelable: true,
-        composed: !!this.shadowRoot,
+        composed: true,
         detail,
       }),
     );
diff --git a/packages/webui-framework/src/element/link-styles.test.ts b/packages/webui-framework/src/element/link-styles.test.ts
index 72965fb5e..700c32637 100644
--- a/packages/webui-framework/src/element/link-styles.test.ts
+++ b/packages/webui-framework/src/element/link-styles.test.ts
@@ -147,4 +147,54 @@ describe('Link stylesheet scanning', () => {
       restoreGlobal('document', previousDocument);
     }
   });
+
+  test('does not duplicate an SSR stylesheet preload', () => {
+    class MockCssStyleSheet {
+      replaceSync(): void {}
+    }
+    class MockShadowRoot {}
+    Object.defineProperty(MockShadowRoot.prototype, 'adoptedStyleSheets', {
+      value: [],
+      configurable: true,
+      writable: true,
+    });
+
+    const previousCssStyleSheet = setGlobal('CSSStyleSheet', MockCssStyleSheet);
+    const previousShadowRoot = setGlobal('ShadowRoot', MockShadowRoot);
+    const previousDocument = setGlobal('document', {
+      baseURI: 'https://example.test/app/',
+      createElement() {
+        return {
+          as: '',
+          crossOrigin: '',
+          href: '',
+          integrity: '',
+          onerror: null,
+          onload: null,
+          referrerPolicy: '',
+          rel: '',
+          remove() {},
+        };
+      },
+      head: {
+        querySelectorAll() {
+          return [{ href: 'https://example.test/dashboard.css' }];
+        },
+        appendChild() {
+          assert.fail('an existing SSR preload should be reused');
+        },
+      },
+    });
+
+    try {
+      assert.equal(
+        preloadComponentAssetStyles(['/dashboard.css']),
+        undefined,
+      );
+    } finally {
+      restoreGlobal('CSSStyleSheet', previousCssStyleSheet);
+      restoreGlobal('ShadowRoot', previousShadowRoot);
+      restoreGlobal('document', previousDocument);
+    }
+  });
 });
diff --git a/packages/webui-framework/src/element/link-styles.ts b/packages/webui-framework/src/element/link-styles.ts
index 540433158..f1540d196 100644
--- a/packages/webui-framework/src/element/link-styles.ts
+++ b/packages/webui-framework/src/element/link-styles.ts
@@ -7,6 +7,7 @@ import {
   type TemplateStylesheetDescriptor,
 } from '../template-content.js';
 import type { TemplateBlockMeta, TemplateMeta } from '../template-types.js';
+import type { ComponentStyles } from './styles.js';
 
 interface LinkStyleFailure {
   readonly href: string;
@@ -85,15 +86,44 @@ export function prepareRegisteredLinkStyles(
   return pending ? Promise.all(pending).then(ignorePromiseResults) : undefined;
 }
 
+/** Prepare every Link-mode component stylesheet in a registered catalog. */
+export function prepareComponentStyleLinks(
+  styles: ComponentStyles,
+): Promise<void> | undefined {
+  if (styles.strategy !== 'link') return undefined;
+  const ids = Object.keys(styles.resources);
+  if (ids.length === 0) return undefined;
+  const hrefs: string[] = [];
+  const seen = new Set<string>();
+  for (let i = 0; i < ids.length; i++) {
+    const resource = styles.resources[ids[i]];
+    if (resource.kind !== 'link' || seen.has(resource.href)) continue;
+    seen.add(resource.href);
+    hrefs.push(resource.href);
+  }
+  return preloadComponentAssetStyles(hrefs);
+}
+
 /** Start compiler-owned component asset styles before importing the root module. */
-export function preloadComponentAssetStyles(hrefs: readonly string[]): void {
-  if (hrefs.length === 0 || !supportsConstructableStylesheets()) return;
+export function preloadComponentAssetStyles(
+  hrefs: readonly string[],
+): Promise<void> | undefined {
+  if (hrefs.length === 0 || !supportsConstructableStylesheets()) return undefined;
 
   const preloads = (speculativeStylesheetPreloads ??= new Map());
+  let pending: Promise<LinkStyleFailure | undefined>[] | undefined;
   for (let i = 0; i < hrefs.length; i++) {
     if (hrefs[i].length === 0) continue;
     const href = resolveHref(hrefs[i]);
-    if (preloads.has(href)) continue;
+    const existing = preloads.get(href);
+    if (existing) {
+      (pending ??= []).push(existing.ready);
+      continue;
+    }
+    // SSR emits equivalent document preloads before the client registry is
+    // initialized. Reusing them avoids a second request when the router
+    // announces the initial component catalog.
+    if (hasDocumentStylesheetPreload(href)) continue;
 
     const link = createStylesheetPreload(href);
     const startedAt = performanceNow();
@@ -104,10 +134,116 @@ export function preloadComponentAssetStyles(hrefs: readonly string[]): void {
       startedAt,
     };
     preloads.set(href, preload);
+    (pending ??= []).push(preload.ready);
     preload.cleanupTimer = setTimeout(() => {
       releaseStylesheetPreload(link);
     }, SPECULATIVE_PRELOAD_TTL_MS);
   }
+  return pending ? Promise.all(pending).then(ignorePromiseResults) : undefined;
+}
+
+/**
+ * Promote compiler-owned component links after their native loads complete.
+ *
+ * Component style links are installed before a client template is wired, so
+ * they cannot use the staging-root path below. Keep the host guarded while
+ * the cache-warmed native links become readable, then adopt their CSSOM and
+ * disable the links just like template-owned styles.
+ */
+export function installComponentLinkStyles(
+  host: HTMLElement,
+  root: ShadowRoot,
+  links: readonly HTMLLinkElement[],
+): void {
+  if (links.length === 0 || !supportsConstructableStylesheets()) return;
+
+  const mountStartedAt = performanceNow();
+  let timingStartedAt = mountStartedAt;
+  const preloads: SpeculativeStylesheetPreload[] = [];
+  const pendingPreloads: Promise<LinkStyleFailure | undefined>[] = [];
+  for (let i = 0; i < links.length; i++) {
+    const speculative = speculativeStylesheetPreloads?.get(resolveHref(links[i].href));
+    if (!speculative) continue;
+    speculative.claimed = true;
+    preloads.push(speculative);
+    pendingPreloads.push(speculative.ready);
+    timingStartedAt = Math.min(timingStartedAt, speculative.startedAt);
+  }
+
+  const guard = installGuard(host, root);
+  const settled = new Uint8Array(links.length);
+  const loadHandlers = new Array<() => void>(links.length);
+  const errorHandlers = new Array<() => void>(links.length);
+  let remaining = 0;
+  let cancelled = false;
+
+  const releasePreloads = (): void => {
+    for (let i = 0; i < preloads.length; i++) {
+      releaseStylesheetPreload(preloads[i].link);
+    }
+  };
+  const cleanup = (): void => {
+    for (let i = 0; i < links.length; i++) {
+      const onLoad = loadHandlers[i];
+      const onError = errorHandlers[i];
+      if (onLoad) links[i].removeEventListener('load', onLoad);
+      if (onError) links[i].removeEventListener('error', onError);
+    }
+    releasePreloads();
+  };
+  const fail = (): void => {
+    if (cancelled) return;
+    cancelled = true;
+    cleanup();
+    guard.release();
+  };
+  const finish = (): void => {
+    if (cancelled || remaining !== 0) return;
+    void Promise.all(pendingPreloads).then(results => {
+      if (cancelled || results.some(result => result !== undefined)) {
+        fail();
+        return;
+      }
+      const sheets = constructComponentStylesheets(links, timingStartedAt);
+      if (!sheets || !adoptPreparedSheets(root, sheets)) {
+        fail();
+        return;
+      }
+      deactivatePromotedLinks(links);
+      cancelled = true;
+      cleanup();
+      guard.release();
+    });
+  };
+  const settle = (index: number): void => {
+    if (cancelled || settled[index] !== 0) return;
+    settled[index] = 1;
+    remaining -= 1;
+    const onLoad = loadHandlers[index];
+    const onError = errorHandlers[index];
+    if (onLoad) links[index].removeEventListener('load', onLoad);
+    if (onError) links[index].removeEventListener('error', onError);
+    finish();
+  };
+
+  for (let i = 0; i < links.length; i++) {
+    if (!requiresNativeLoad(links[i])) {
+      settled[i] = 1;
+      continue;
+    }
+    if (links[i].sheet) {
+      settled[i] = 1;
+      continue;
+    }
+    remaining += 1;
+    const onLoad = (): void => settle(i);
+    const onError = (): void => fail();
+    loadHandlers[i] = onLoad;
+    errorHandlers[i] = onError;
+    links[i].addEventListener('load', onLoad, { once: true });
+    links[i].addEventListener('error', onError, { once: true });
+  }
+  if (remaining === 0) finish();
 }
 
 /** Return whether a template can create a stylesheet link after bindings run. */
@@ -582,6 +718,18 @@ function releaseStylesheetPreload(preload: HTMLLinkElement): void {
   preload.remove();
 }
 
+function hasDocumentStylesheetPreload(href: string): boolean {
+  const head = document.head;
+  if (typeof head.querySelectorAll !== 'function') return false;
+  const candidates = head.querySelectorAll<HTMLLinkElement>(
+    'link[rel="preload"][as="style"]',
+  );
+  for (let i = 0; i < candidates.length; i++) {
+    if (resolveHref(candidates[i].href) === href) return true;
+  }
+  return false;
+}
+
 function hasDefaultPreloadAttributes(
   descriptor: TemplateStylesheetDescriptor,
 ): boolean {
@@ -745,6 +893,25 @@ function constructNativeStylesheets(
   return sheets;
 }
 
+function constructComponentStylesheets(
+  links: readonly HTMLLinkElement[],
+  mountStartedAt: number,
+): CSSStyleSheet[] | undefined {
+  const sheets = new Array<CSSStyleSheet>(links.length);
+  for (let i = 0; i < links.length; i++) {
+    const cssText = readNativeStylesheet(links[i], mountStartedAt);
+    if (cssText === undefined) return undefined;
+    try {
+      const sheet = new CSSStyleSheet({ baseURL: links[i].href });
+      sheet.replaceSync(cssText);
+      sheets[i] = sheet;
+    } catch {
+      return undefined;
+    }
+  }
+  return sheets;
+}
+
 function readNativeStylesheet(
   link: HTMLLinkElement,
   mountStartedAt: number,
diff --git a/packages/webui-framework/src/element/markers.test.ts b/packages/webui-framework/src/element/markers.test.ts
index 2e3392ec8..83baf3432 100644
--- a/packages/webui-framework/src/element/markers.test.ts
+++ b/packages/webui-framework/src/element/markers.test.ts
@@ -19,6 +19,7 @@ interface MockNode {
   nodeType: number;
   data?: string;
   nextSibling: MockNode | null;
+  hasAttribute?(name: string): boolean;
 }
 
 const ELEMENT = 1;
@@ -263,6 +264,44 @@ describe('findByOrdinal', () => {
     assert.strictEqual(findByOrdinal(parent as unknown as Node, ELEMENT, 1), div);
   });
 
+  test('skips compiler-emitted style fallbacks when counting elements', () => {
+    const style = {
+      nodeType: ELEMENT,
+      nextSibling: null,
+      localName: 'style',
+      getAttribute: (name: string) =>
+        name === 'data-webui-resource' ? 'card' :
+          name === 'data-webui-strategy' ? 'style' : null,
+    } as MockNode;
+    const button = el('button');
+    const parent = makeParent(style, button);
+
+    assert.strictEqual(
+      findByOrdinal(parent as unknown as Node, ELEMENT, 0),
+      button,
+    );
+  });
+
+  test('does not skip authored data-webui-resource attributes', () => {
+    const authored = {
+      nodeType: ELEMENT,
+      nextSibling: null,
+      localName: 'div',
+      getAttribute: (name: string) => name === 'data-webui-resource' ? 'authored' : null,
+    } as MockNode;
+    const button = el('button');
+    const parent = makeParent(authored, button);
+
+    assert.strictEqual(
+      findByOrdinal(parent as unknown as Node, ELEMENT, 0),
+      authored,
+    );
+    assert.strictEqual(
+      findByOrdinal(parent as unknown as Node, ELEMENT, 1),
+      button,
+    );
+  });
+
   test('skips conditional block content when counting elements', () => {
     // Simulates:  <link> <!--wc--> <p>no results</p> <!--/wc--> <div.grid>
     // Template only has <link> and <div.grid>, so <div.grid> = element ordinal 1.
@@ -504,6 +543,75 @@ describe('buildSSRIndex', () => {
     assert.strictEqual(index.elements[2], ssrB);
   });
 
+  test('skips a compiler-emitted style fallback the template never contained', () => {
+    // Inline-CSS components render a `<style data-webui-resource>` into the
+    // render root that `meta.h` has no counterpart for. Counting it shifts
+    // every binding onto the previous element's node.
+    const tplA = el('A');
+    const tplB = el('B');
+    const tpl = el('ROOT', tplA, tplB);
+    const style = {
+      nodeType: ELEMENT,
+      tagName: 'STYLE',
+      localName: 'style',
+      firstChild: null,
+      nextSibling: null,
+      getAttribute: (name: string) =>
+        name === 'data-webui-resource' ? 'card' :
+          name === 'data-webui-strategy' ? 'style' : null,
+    } as unknown as TreeNode;
+    const ssrA = el('A');
+    const ssrB = el('B');
+    const ssr = el('ROOT', style, ssrA, ssrB);
+
+    const index = build(tpl, ssr);
+
+    assert.strictEqual(index.elements[1], ssrA);
+    assert.strictEqual(index.elements[2], ssrB);
+  });
+
+  test('skips a compiler-emitted CSS import map the template never contained', () => {
+    const tplA = el('A');
+    const tplB = el('B');
+    const tpl = el('ROOT', tplA, tplB);
+    const importMap = {
+      nodeType: ELEMENT,
+      tagName: 'SCRIPT',
+      localName: 'script',
+      firstChild: null,
+      nextSibling: null,
+      getAttribute: (name: string) =>
+        name === 'type' ? 'importmap' :
+          name === 'data-webui-resource' ? 'card' : null,
+    } as unknown as TreeNode;
+    const ssrA = el('A');
+    const ssrB = el('B');
+    const ssr = el('ROOT', importMap, ssrA, ssrB);
+
+    const index = build(tpl, ssr);
+
+    assert.strictEqual(index.elements[1], ssrA);
+    assert.strictEqual(index.elements[2], ssrB);
+  });
+
+  test('indexes authored elements that use data-webui-resource', () => {
+    const tplAuthored = el('DIV');
+    const tplButton = el('BUTTON');
+    const tpl = el('ROOT', tplAuthored, tplButton);
+    const ssrAuthored = {
+      ...el('DIV'),
+      localName: 'div',
+      getAttribute: (name: string) => name === 'data-webui-resource' ? 'authored' : null,
+    } as unknown as TreeNode;
+    const ssrButton = el('BUTTON');
+    const ssr = el('ROOT', ssrAuthored, ssrButton);
+
+    const index = build(tpl, ssr);
+
+    assert.strictEqual(index.elements[1], ssrAuthored);
+    assert.strictEqual(index.elements[2], ssrButton);
+  });
+
   test('collects block markers in document order across depths', () => {
     // <!--wc-->A  <section><!--wc-->C</section>  <!--wc-->B
     // A and B sit at the root, C inside a static element; the compiled
diff --git a/packages/webui-framework/src/element/markers.ts b/packages/webui-framework/src/element/markers.ts
index 322a179d4..fb10d677f 100644
--- a/packages/webui-framework/src/element/markers.ts
+++ b/packages/webui-framework/src/element/markers.ts
@@ -19,6 +19,8 @@
  *   <!--/wN-->  raw HTML binding end
  */
 
+import { isComponentStyleResourceMarker } from './styles.js';
+
 // Marker data constants matching the handler plugin output.
 export const MARKER_REPEAT_START = 'wr';
 export const MARKER_REPEAT_END = '/wr';
@@ -266,7 +268,11 @@ export function buildSSRIndex(
           continue;
         }
       } else if (type === 1 /* ELEMENT_NODE */) {
-        break;
+        // A compiler-emitted style fallback is server-only: `meta.h` never
+        // contains it, so counting it would pair every following template
+        // element with its predecessor's node. `findByOrdinal` skips it for
+        // the same reason.
+        if (!isComponentStyleResourceMarker(s as Element)) break;
       }
       s = s.nextSibling;
     }
@@ -318,8 +324,9 @@ export function buildSSRIndex(
  *
  * This function walks `parent.firstChild` → siblings, counting only
  * children of the requested `nodeType` that are NOT inside a structural
- * block range.  Nested blocks of the same type are handled via depth
- * tracking.  Returns the child at the given `ordinal`, or null.
+ * block range or compiler-emitted style fallback. Nested blocks of the same
+ * type are handled via depth tracking. Returns the child at the given
+ * `ordinal`, or null.
  *
  * Used by `$findSSRText` to keep SSR text ordinals aligned with the template.
  * Elements are addressed by pre-order index instead (see `buildSSRIndex`);
@@ -344,7 +351,9 @@ export function findByOrdinal(parent: Node, nodeType: number, ordinal: number):
         continue;
       }
     }
-    if (child.nodeType === nodeType) {
+    const isStyleResource = child.nodeType === 1 &&
+      isComponentStyleResourceMarker(child as Element);
+    if (child.nodeType === nodeType && !isStyleResource) {
       if (count === ordinal) return child;
       count++;
     }
diff --git a/packages/webui-framework/src/element/styles.test.ts b/packages/webui-framework/src/element/styles.test.ts
new file mode 100644
index 000000000..3d2d87d35
--- /dev/null
+++ b/packages/webui-framework/src/element/styles.test.ts
@@ -0,0 +1,728 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { strict as assert } from 'node:assert';
+import { describe, test } from 'node:test';
+import {
+  claimSsrComponentStyles,
+  installComponentStyles,
+  registerComponentStyles,
+  setCssModuleLoaderForTests,
+  type ComponentStyles,
+} from './styles.js';
+
+class FakeElement {
+  localName: string;
+  type = '';
+  rel = '';
+  href = '';
+  nonce = '';
+  textContent = '';
+  removed = false;
+  parent?: FakeParent;
+  private readonly attributes = new Map<string, string>();
+
+  constructor(localName = '') {
+    this.localName = localName;
+  }
+
+  setAttribute(name: string, value: string): void {
+    this.attributes.set(name, value);
+  }
+
+  getAttribute(name: string): string | null {
+    return this.attributes.get(name) ?? null;
+  }
+
+  remove(): void {
+    this.removed = true;
+    this.parent?.detach(this);
+  }
+}
+
+class FakeParent {
+  private readonly childElements: FakeElement[] = [];
+  private readonly nestedElements: FakeElement[] = [];
+  markerScans = 0;
+
+  get children(): FakeElement[] {
+    this.markerScans++;
+    return this.childElements;
+  }
+
+  /** Mirrors the DOM property, which reading must not count as a scan. */
+  get childElementCount(): number {
+    return this.childElements.length;
+  }
+
+  querySelectorAll(): FakeElement[] {
+    return this.childElements.concat(this.nestedElements).filter(child =>
+      child.getAttribute('data-webui-resource') !== null
+    );
+  }
+
+  appendChild(child: FakeElement): FakeElement {
+    child.parent?.detach(child);
+    this.childElements.push(child);
+    child.parent = this;
+    return child;
+  }
+
+  insertBefore(child: FakeElement, before: FakeElement | null): FakeElement {
+    child.parent?.detach(child);
+    const index = before ? this.childElements.indexOf(before) : -1;
+    if (index < 0) this.childElements.push(child);
+    else this.childElements.splice(index, 0, child);
+    child.parent = this;
+    return child;
+  }
+
+  appendNested(child: FakeElement): FakeElement {
+    child.parent?.detach(child);
+    this.nestedElements.push(child);
+    child.parent = this;
+    return child;
+  }
+
+  detach(child: FakeElement): void {
+    let index = this.childElements.indexOf(child);
+    if (index >= 0) this.childElements.splice(index, 1);
+    index = this.nestedElements.indexOf(child);
+    if (index >= 0) this.nestedElements.splice(index, 1);
+    if (child.parent === this) child.parent = undefined;
+  }
+}
+
+function fakeDocument(globalNonce = '', metaNonce = ''): Document {
+  const head = new FakeParent();
+  return {
+    nodeType: 9,
+    head,
+    createElement: (name: string) => new FakeElement(name),
+    defaultView: globalNonce ? { __webui: { nonce: globalNonce } } : null,
+    querySelector: () => metaNonce ? { content: metaNonce } : null,
+    querySelectorAll: () => head.querySelectorAll(),
+  } as unknown as Document;
+}
+
+function fakeShadow(ownerDocument: Document): ShadowRoot {
+  const root = new FakeParent() as FakeParent & {
+    nodeType: number;
+    ownerDocument: Document;
+    adoptedStyleSheets: CSSStyleSheet[];
+  };
+  root.nodeType = 11;
+  root.ownerDocument = ownerDocument;
+  root.adoptedStyleSheets = [];
+  return root as unknown as ShadowRoot;
+}
+
+function styles(closures: Record<string, string[]>): ComponentStyles {
+  return {
+    version: 1,
+    strategy: 'style',
+    resources: {
+      first: { kind: 'style', css: '.first{}' },
+      second: { kind: 'style', css: '.second{}' },
+    },
+    closures,
+  };
+}
+
+describe('component style resources', () => {
+  test('rejects registration without componentStyles', () => {
+    assert.throws(
+      () => registerComponentStyles(undefined, fakeDocument()),
+      /componentStyles is required/,
+    );
+  });
+
+  test('installs once per Document in closure order', async () => {
+    const document = fakeDocument();
+    registerComponentStyles(styles({ root: ['second', 'first'] }), document);
+
+    await installComponentStyles('root', document);
+    await installComponentStyles('root', document);
+
+    const children = (document.head as unknown as FakeParent).children;
+    assert.deepEqual(
+      children.map(child => child.getAttribute('data-webui-resource')),
+      ['second', 'first'],
+    );
+    assert.deepEqual(
+      children.map(child => child.getAttribute('data-webui-strategy')),
+      ['style', 'style'],
+    );
+  });
+
+  test('a bundled resource covers its member component closures', async () => {
+    const document = fakeDocument();
+    registerComponentStyles({
+      version: 1,
+      strategy: 'style',
+      resources: {
+        '_chunk-first-2': {
+          kind: 'style',
+          css: '.first{}.second{}',
+          members: ['first', 'second'],
+        },
+        first: { kind: 'style', css: '.first{}' },
+        second: { kind: 'style', css: '.second{}' },
+      },
+      closures: {
+        root: ['_chunk-first-2'],
+        first: ['first'],
+        second: ['second'],
+      },
+    }, document);
+
+    await installComponentStyles('root', document);
+    await installComponentStyles('first', document);
+    await installComponentStyles('second', document);
+
+    assert.deepEqual(
+      (document.head as unknown as FakeParent).children
+        .map(child => child.getAttribute('data-webui-resource')),
+      ['_chunk-first-2'],
+    );
+  });
+
+  test('claims nested SSR route styles before a descendant installs', async () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    const parent = root as unknown as FakeParent;
+    for (const id of ['first', 'second']) {
+      const marker = new FakeElement('style');
+      marker.setAttribute('data-webui-resource', id);
+      marker.setAttribute('data-webui-strategy', 'style');
+      parent.appendNested(marker);
+    }
+    registerComponentStyles(styles({
+      route: ['first', 'second'],
+      descendant: ['second'],
+    }), document);
+
+    await installComponentStyles('descendant', root);
+    await installComponentStyles('route', root);
+
+    assert.equal(parent.children.length, 0, 'nested SSR markers must prevent direct duplicates');
+    assert.deepEqual(
+      parent.querySelectorAll().map(child => child.getAttribute('data-webui-resource')),
+      ['first', 'second'],
+    );
+  });
+
+  test('claims route markers added after the CSS tree was first scanned', async () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    registerComponentStyles(styles({
+      empty: [],
+      lateRoute: ['first'],
+    }), document);
+    await installComponentStyles('empty', root);
+
+    const marker = new FakeElement('style');
+    marker.setAttribute('data-webui-resource', 'first');
+    marker.setAttribute('data-webui-strategy', 'style');
+    claimSsrComponentStyles({
+      parentElement: {
+        localName: 'webui-route',
+        children: [marker],
+      },
+    } as unknown as Element, root);
+    await installComponentStyles('lateRoute', root);
+
+    assert.equal(
+      (root as unknown as FakeParent).children.length,
+      0,
+      'a streamed route marker must prevent a direct duplicate',
+    );
+  });
+
+  test('adopts nested Module markers in route order when a descendant installs first', async () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    const parent = root as unknown as FakeParent;
+    const firstSheet = {} as CSSStyleSheet;
+    const secondSheet = {} as CSSStyleSheet;
+    for (const id of ['first', 'second']) {
+      const marker = new FakeElement('style');
+      marker.setAttribute('data-webui-resource', id);
+      marker.setAttribute('data-webui-strategy', 'module');
+      parent.appendNested(marker);
+    }
+    registerComponentStyles({
+      version: 1,
+      strategy: 'module',
+      resources: {
+        first: { kind: 'module', specifier: 'first', css: '.first{}' },
+        second: { kind: 'module', specifier: 'second', css: '.second{}' },
+      },
+      closures: {
+        route: ['first', 'second'],
+        descendant: ['second'],
+      },
+    }, document);
+    setCssModuleLoaderForTests((specifier) => Promise.resolve({
+      default: specifier === 'first' ? firstSheet : secondSheet,
+    }));
+
+    await Promise.all([
+      installComponentStyles('descendant', root),
+      installComponentStyles('route', root),
+    ]);
+    setCssModuleLoaderForTests();
+
+    assert.deepEqual(root.adoptedStyleSheets, [firstSheet, secondSheet]);
+    assert.equal(parent.querySelectorAll().length, 0, 'adopted SSR fallbacks must be removed');
+  });
+
+  test('installs around existing markers synchronously and caches the completed closure', () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    const parent = root as unknown as FakeParent;
+    const second = new FakeElement('style');
+    second.setAttribute('data-webui-resource', 'second');
+    parent.appendChild(second);
+    registerComponentStyles(styles({ root: ['first', 'second'] }), document);
+
+    assert.equal(installComponentStyles('root', root), undefined);
+    assert.equal(parent.markerScans, 1);
+    assert.equal(installComponentStyles('root', root), undefined);
+    assert.equal(parent.markerScans, 1, 'a completed closure should not rescan markers');
+    assert.deepEqual(
+      parent.children.map(child => child.getAttribute('data-webui-resource')),
+      ['first', 'second'],
+    );
+  });
+
+  test('successive closures reuse cached markers instead of rescanning', async () => {
+    const document = fakeDocument();
+    const head = document.head as unknown as FakeParent;
+    registerComponentStyles(
+      styles({ 'root-a': ['first'], 'root-b': ['first', 'second'] }),
+      document,
+    );
+
+    await installComponentStyles('root-a', document);
+    const afterFirst = head.markerScans;
+    await installComponentStyles('root-b', document);
+
+    assert.equal(
+      head.markerScans,
+      afterFirst,
+      'the second closure must reuse the marker cache the first install updated',
+    );
+    assert.deepEqual(
+      head.children.map(child => child.getAttribute('data-webui-resource')),
+      ['first', 'second'],
+      'reused markers must still anchor the new resource in closure order',
+    );
+  });
+
+  test('external mutation of the style scope invalidates the marker cache', async () => {
+    const document = fakeDocument();
+    const head = document.head as unknown as FakeParent;
+    registerComponentStyles(
+      styles({ 'root-a': ['second'], 'root-b': ['first', 'second'] }),
+      document,
+    );
+
+    await installComponentStyles('root-a', document);
+    // Somebody else drops our marker. The cached anchor is now stale, so the
+    // next install has to notice and rescan rather than insert before a
+    // detached element.
+    head.children[0].remove();
+    await installComponentStyles('root-b', document);
+
+    assert.deepEqual(
+      head.children.map(child => child.getAttribute('data-webui-resource')),
+      ['first'],
+      'only the resource that was not already installed should be appended',
+    );
+  });
+
+  test('installs once in each ShadowRoot without a global proxy', async () => {
+    const document = fakeDocument();
+    const firstRoot = fakeShadow(document);
+    const secondRoot = fakeShadow(document);
+    registerComponentStyles(styles({ root: ['first'] }), document);
+
+    await installComponentStyles('root', firstRoot);
+    await installComponentStyles('root', firstRoot);
+    await installComponentStyles('root', secondRoot);
+
+    assert.equal((firstRoot as unknown as FakeParent).children.length, 1);
+    assert.equal((secondRoot as unknown as FakeParent).children.length, 1);
+  });
+
+  test('applies the owning Document nonce to Document and ShadowRoot styles', async () => {
+    const document = fakeDocument('document-nonce');
+    const root = fakeShadow(document);
+    registerComponentStyles(styles({ root: ['first'] }), document);
+
+    await installComponentStyles('root', document);
+    await installComponentStyles('root', root);
+
+    assert.equal(
+      (document.head as unknown as FakeParent).children[0].nonce,
+      'document-nonce',
+    );
+    assert.equal(
+      (root as unknown as FakeParent).children[0].nonce,
+      'document-nonce',
+    );
+
+    const metaDocument = fakeDocument('', 'meta-nonce');
+    const metaRoot = fakeShadow(metaDocument);
+    registerComponentStyles(styles({ root: ['first'] }), metaDocument);
+    await installComponentStyles('root', metaRoot);
+    assert.equal(
+      (metaRoot as unknown as FakeParent).children[0].nonce,
+      'meta-nonce',
+    );
+  });
+
+  test('claims only an exact SSR resource marker', async () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    const nearMatch = new FakeElement('style');
+    nearMatch.setAttribute('data-webui-resource', 'first-child');
+    const exact = new FakeElement('style');
+    exact.setAttribute('data-webui-resource', 'first');
+    (root as unknown as FakeParent).appendChild(nearMatch);
+    (root as unknown as FakeParent).appendChild(exact);
+    registerComponentStyles(styles({ root: ['first'] }), document);
+
+    await installComponentStyles('root', root);
+
+    assert.equal((root as unknown as FakeParent).children.length, 2);
+  });
+
+  test('rejects conflicting definitions before publishing their closure', async () => {
+    const document = fakeDocument();
+    registerComponentStyles(styles({ root: ['first'] }), document);
+
+    assert.doesNotThrow(() => registerComponentStyles({
+      version: 1,
+      strategy: 'style',
+      resources: { first: { css: '.first{}', kind: 'style' } },
+      closures: { root: ['first'] },
+    }, document));
+    assert.throws(() => registerComponentStyles({
+      version: 1,
+      strategy: 'style',
+      resources: { first: { kind: 'style', css: '.conflict{}' } },
+      closures: { conflicting: ['first'] },
+    }, document), /Conflicting component style resource/);
+
+    await installComponentStyles('conflicting', document);
+    assert.equal((document.head as unknown as FakeParent).children.length, 0);
+  });
+
+  test('keeps unrelated adopted sheets and clears failed Module work for retry', async () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    const unrelated = {} as CSSStyleSheet;
+    const componentSheet = {} as CSSStyleSheet;
+    root.adoptedStyleSheets = [unrelated];
+    const marker = new FakeElement('style');
+    marker.setAttribute('data-webui-resource', 'module');
+    (root as unknown as FakeParent).appendChild(marker);
+    registerComponentStyles({
+      version: 1,
+      strategy: 'module',
+      resources: {
+        module: { kind: 'module', specifier: 'module', css: '.retry{}' },
+      },
+      closures: { root: ['module'] },
+    }, document);
+    let attempts = 0;
+    setCssModuleLoaderForTests(() => {
+      attempts++;
+      return attempts === 1
+        ? Promise.reject(new Error('not registered yet'))
+        : Promise.resolve({ default: componentSheet });
+    });
+
+    const failedInstall = installComponentStyles('root', root);
+    assert.ok(failedInstall);
+    await assert.rejects(failedInstall);
+    assert.equal(marker.removed, false);
+    const retry = installComponentStyles('root', root);
+    assert.ok(retry);
+    await retry;
+    setCssModuleLoaderForTests();
+
+    assert.equal(attempts, 2);
+    assert.deepEqual(root.adoptedStyleSheets, [unrelated, componentSheet]);
+    assert.equal(marker.removed, true);
+
+    const importMaps = (document.head as unknown as FakeParent).children.filter(
+      (child) => (child as unknown as { type: string }).type === 'importmap',
+    );
+    assert.equal(importMaps.length, 1);
+  });
+
+  test('keeps a successful Module prefix and retries only the rejected suffix', async () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    const dependencySheet = {} as CSSStyleSheet;
+    const componentSheet = {} as CSSStyleSheet;
+    registerComponentStyles({
+      version: 1,
+      strategy: 'module',
+      resources: {
+        dependency: { kind: 'module', specifier: 'dependency', css: '.dependency{}' },
+        component: { kind: 'module', specifier: 'component', css: '.component{}' },
+      },
+      closures: { component: ['dependency', 'component'] },
+    }, document);
+    const loaded: string[] = [];
+    let componentAttempts = 0;
+    setCssModuleLoaderForTests((specifier) => {
+      loaded.push(specifier);
+      if (specifier === 'dependency') {
+        return Promise.resolve({ default: dependencySheet });
+      }
+      componentAttempts++;
+      return componentAttempts === 1
+        ? Promise.reject(new Error('component failed'))
+        : Promise.resolve({ default: componentSheet });
+    });
+
+    const failedInstall = installComponentStyles('component', root);
+    assert.ok(failedInstall);
+    await assert.rejects(failedInstall);
+    assert.deepEqual(root.adoptedStyleSheets, [dependencySheet]);
+
+    const retry = installComponentStyles('component', root);
+    assert.ok(retry);
+    await retry;
+    setCssModuleLoaderForTests();
+
+    assert.deepEqual(loaded, ['dependency', 'component', 'component']);
+    assert.deepEqual(root.adoptedStyleSheets, [dependencySheet, componentSheet]);
+  });
+
+  test('adopts concurrent closures in reserved order when a descendant resolves first', async () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    const parentSheet = {} as CSSStyleSheet;
+    const childSheet = {} as CSSStyleSheet;
+    registerComponentStyles({
+      version: 1,
+      strategy: 'module',
+      resources: {
+        parent: { kind: 'module', specifier: 'parent', css: '.parent{}' },
+        child: { kind: 'module', specifier: 'child', css: '.child{}' },
+      },
+      closures: { parent: ['parent', 'child'], child: ['child'] },
+    }, document);
+    let releaseParent: (() => void) | undefined;
+    const parentGate = new Promise<void>((resolve) => {
+      releaseParent = resolve;
+    });
+    setCssModuleLoaderForTests((specifier) =>
+      specifier === 'parent'
+        ? parentGate.then(() => ({ default: parentSheet }))
+        : Promise.resolve({ default: childSheet }));
+
+    // The parent reserves both slots first, then the child closure resolves
+    // ahead of it.
+    const parentInstall = installComponentStyles('parent', root);
+    const childInstall = installComponentStyles('child', root);
+    await childInstall;
+    releaseParent?.();
+    await parentInstall;
+    setCssModuleLoaderForTests();
+
+    assert.deepEqual(root.adoptedStyleSheets, [parentSheet, childSheet]);
+  });
+
+  test('releases adopted Module fallback markers', async () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    const parent = root as unknown as FakeParent;
+    const sheet = {} as CSSStyleSheet;
+    const marker = new FakeElement('style');
+    marker.setAttribute('data-webui-resource', 'component');
+    marker.setAttribute('data-webui-strategy', 'module');
+    parent.appendNested(marker);
+    registerComponentStyles({
+      version: 1,
+      strategy: 'module',
+      resources: { component: { kind: 'module', specifier: 'component', css: '.component{}' } },
+      closures: { component: ['component'] },
+    }, document);
+    setCssModuleLoaderForTests(() => Promise.resolve({ default: sheet }));
+
+    await installComponentStyles('component', root);
+    setCssModuleLoaderForTests();
+
+    assert.equal(marker.removed, true);
+    assert.equal(marker.parent, undefined, 'adopted marker must not stay reachable');
+    assert.deepEqual(root.adoptedStyleSheets, [sheet]);
+  });
+
+  test('loads and adopts Module resources in closure order', async () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    registerComponentStyles({
+      version: 1,
+      strategy: 'module',
+      resources: {
+        dependency: { kind: 'module', specifier: 'dependency', css: '.dependency{}' },
+        component: { kind: 'module', specifier: 'component', css: '.component{}' },
+      },
+      closures: { component: ['dependency', 'component'] },
+    }, document);
+    const loaded: string[] = [];
+    setCssModuleLoaderForTests((specifier) => {
+      loaded.push(specifier);
+      return Promise.resolve({ default: {} as CSSStyleSheet });
+    });
+
+    await installComponentStyles('component', root);
+    setCssModuleLoaderForTests();
+
+    assert.deepEqual(loaded, ['dependency', 'component']);
+    assert.equal(root.adoptedStyleSheets.length, 2);
+  });
+
+  test('starts Module loads concurrently, dedupes pending loads, and adopts once in closure order', async () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    const dependencySheet = {} as CSSStyleSheet;
+    const componentSheet = {} as CSSStyleSheet;
+    registerComponentStyles({
+      version: 1,
+      strategy: 'module',
+      resources: {
+        dependency: { kind: 'module', specifier: 'dependency', css: '.dependency{}' },
+        component: { kind: 'module', specifier: 'component', css: '.component{}' },
+      },
+      closures: { component: ['dependency', 'component'] },
+    }, document);
+
+    let adopted: CSSStyleSheet[] = [];
+    let assignments = 0;
+    Object.defineProperty(root, 'adoptedStyleSheets', {
+      get: () => adopted,
+      set: (value: CSSStyleSheet[]) => {
+        assignments++;
+        adopted = value;
+      },
+      configurable: true,
+    });
+    const loaded: string[] = [];
+    const resolvers = new Map<
+      string,
+      (module: { default: CSSStyleSheet }) => void
+    >();
+    setCssModuleLoaderForTests((specifier) => {
+      loaded.push(specifier);
+      return new Promise(resolve => {
+        resolvers.set(specifier, resolve);
+      });
+    });
+
+    const firstInstall = installComponentStyles('component', root);
+    const duplicateInstall = installComponentStyles('component', root);
+    assert.ok(firstInstall);
+    assert.ok(duplicateInstall);
+    assert.deepEqual(loaded, ['dependency', 'component']);
+
+    const resolveComponent = resolvers.get('component');
+    const resolveDependency = resolvers.get('dependency');
+    assert.ok(resolveComponent);
+    assert.ok(resolveDependency);
+    resolveComponent({ default: componentSheet });
+    await Promise.resolve();
+    assert.deepEqual(adopted, []);
+    resolveDependency({ default: dependencySheet });
+
+    await Promise.all([firstInstall, duplicateInstall]);
+    setCssModuleLoaderForTests();
+
+    assert.deepEqual(adopted, [dependencySheet, componentSheet]);
+    assert.equal(assignments, 1);
+    assert.equal(installComponentStyles('component', root), undefined);
+  });
+
+  test('installs one import map per Module specifier per Document', async () => {
+    const document = fakeDocument();
+    const firstRoot = fakeShadow(document);
+    const secondRoot = fakeShadow(document);
+    registerComponentStyles({
+      version: 1,
+      strategy: 'module',
+      resources: {
+        first: { kind: 'module', specifier: 'shared-specifier', css: 'body{}' },
+        second: { kind: 'module', specifier: 'shared-specifier', css: 'body{}' },
+      },
+      closures: { first: ['first'], second: ['second'] },
+    }, document);
+    setCssModuleLoaderForTests(() => Promise.resolve({ default: {} as CSSStyleSheet }));
+
+    await installComponentStyles('first', firstRoot);
+    await installComponentStyles('second', secondRoot);
+    setCssModuleLoaderForTests();
+
+    const importMaps = (document.head as unknown as FakeParent).children.filter(
+      (child) => (child as unknown as { type: string }).type === 'importmap',
+    );
+    assert.equal(importMaps.length, 1);
+    assert.equal(
+      (importMaps[0] as unknown as { textContent: string }).textContent,
+      '{"imports":{"shared-specifier":"data:text/css,body%7B%7D"}}',
+    );
+  });
+
+  test('applies the owning Document nonce to the module import map', async () => {
+    const document = fakeDocument('document-nonce');
+    const root = fakeShadow(document);
+    registerComponentStyles({
+      version: 1,
+      strategy: 'module',
+      resources: {
+        themed: { kind: 'module', specifier: 'themed-specifier', css: '.themed{}' },
+      },
+      closures: { root: ['themed'] },
+    }, document);
+    setCssModuleLoaderForTests(() => Promise.resolve({ default: {} as CSSStyleSheet }));
+
+    await installComponentStyles('root', root);
+    setCssModuleLoaderForTests();
+
+    const importMap = (document.head as unknown as FakeParent).children.find(
+      (child) => (child as unknown as { type: string }).type === 'importmap',
+    );
+    assert.equal((importMap as unknown as { nonce: string } | undefined)?.nonce, 'document-nonce');
+  });
+
+  test('does not redefine module specifiers already seeded by the SSR bootstrap', async () => {
+    const document = fakeDocument();
+    (document as unknown as { defaultView: { __webui: { styles: string[] } } }).defaultView = {
+      __webui: { styles: ['seeded-specifier'] },
+    };
+    const root = fakeShadow(document);
+    registerComponentStyles({
+      version: 1,
+      strategy: 'module',
+      resources: {
+        seeded: { kind: 'module', specifier: 'seeded-specifier', css: 'body{}' },
+      },
+      closures: { root: ['seeded'] },
+    }, document);
+    setCssModuleLoaderForTests(() => Promise.resolve({ default: {} as CSSStyleSheet }));
+
+    await installComponentStyles('root', root);
+    setCssModuleLoaderForTests();
+
+    const importMaps = (document.head as unknown as FakeParent).children.filter(
+      (child) => (child as unknown as { type: string }).type === 'importmap',
+    );
+    assert.equal(importMaps.length, 0);
+  });
+});
diff --git a/packages/webui-framework/src/element/styles.ts b/packages/webui-framework/src/element/styles.ts
index cd532c1ee..628d34af8 100644
--- a/packages/webui-framework/src/element/styles.ts
+++ b/packages/webui-framework/src/element/styles.ts
@@ -1,6 +1,43 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
+import { installComponentLinkStyles } from './link-styles.js';
+
+// `__WEBUI_DEV__` is a compile-time constant a bundler folds to a literal, so
+// the `if (DEV)` diagnostics below become dead code in production builds. See
+// the longer note in `template-element.ts`; the flag is declared module-locally
+// on purpose, because esbuild does not inline an imported constant.
+declare const __WEBUI_DEV__: boolean;
+const DEV: boolean = typeof __WEBUI_DEV__ === 'undefined' || __WEBUI_DEV__;
+
+/** One addressable component stylesheet definition. */
+export type ComponentStyleResource = (
+  | { kind: 'link'; href: string }
+  | { kind: 'style'; css: string }
+  | { kind: 'module'; specifier: string; css: string }
+) & {
+  /** Component resource IDs whose rules this bundled resource covers. */
+  members?: string[];
+};
+
+/** Versioned stylesheet catalog shared by server and client registration paths. */
+export interface ComponentStyles {
+  version: 1;
+  strategy: 'link' | 'style' | 'module';
+  resources: Record<string, ComponentStyleResource>;
+  closures: Record<string, string[]>;
+}
+
+interface DocumentCatalog {
+  readonly resources: Map<string, ComponentStyleResource>;
+  readonly closures: Map<string, readonly string[]>;
+}
+
+interface SsrStyleMarkerState {
+  moduleIds?: string[];
+  moduleElements?: Map<string, Element>;
+}
+
 /**
  * Stylesheet management for WebUI components.
  *
@@ -31,51 +68,876 @@
  */
 
 /**
- * Specifiers already injected into `<head>` via the light DOM path.
- * Prevents duplicate `<style>` elements for non-shadow components.
+ * Cached anchor elements for one CSS tree's direct resource markers.
+ *
+ * `count` is the `childElementCount` observed when `markers` was last known to
+ * be accurate. Every install we perform updates both fields, so the common case
+ * — repeated closure installs into a head we are the only writer of — never
+ * rescans. A count that no longer matches means somebody else mutated the tree,
+ * and the scan is redone.
  */
-const headInjected = new Set<string>();
+interface ResourceMarkerCache {
+  count: number;
+  markers: Map<string, Element>;
+}
+
+/**
+ * Module adoption bookkeeping for one CSS tree.
+ *
+ * `order` is the closure request order, so a descendant closure whose network
+ * load resolves first cannot adopt ahead of the caller that reserved earlier.
+ */
+interface ModuleAdoptionState {
+  readonly order: string[];
+  readonly reserved: Set<string>;
+  readonly sheets: Map<string, CSSStyleSheet>;
+}
+
+type StyleTarget = Document | ShadowRoot;
+type CssModule = { default: CSSStyleSheet };
+type CssModuleLoader = (specifier: string) => Promise<CssModule>;
+
+interface WebUIStyleGlobal {
+  nonce?: string;
+  styles?: string[];
+  [key: string]: unknown;
+}
+
+const catalogs = new WeakMap<Document, DocumentCatalog>();
+const installed = new WeakMap<StyleTarget, Set<string>>();
+const completedClosures = new WeakMap<StyleTarget, Set<string>>();
+const pending = new WeakMap<StyleTarget, Map<string, Promise<CSSStyleSheet>>>();
+const ssrMarkers = new WeakMap<StyleTarget, SsrStyleMarkerState>();
+const resourceMarkers = new WeakMap<StyleTarget, ResourceMarkerCache>();
+const moduleAdoption = new WeakMap<StyleTarget, ModuleAdoptionState>();
+const moduleImportsInstalled = new WeakMap<Document, Set<string>>();
+const moduleImportsSeeded = new WeakSet<Document>();
+const defaultCssModuleLoader: CssModuleLoader = (specifier) =>
+  import(specifier, { with: { type: 'css' } });
+let loadCssModule = defaultCssModuleLoader;
+
+/** Override CSS module loading in unit tests. */
+export function setCssModuleLoaderForTests(loader?: CssModuleLoader): void {
+  loadCssModule = loader ?? defaultCssModuleLoader;
+}
+
+function catalogFor(document: Document): DocumentCatalog {
+  let catalog = catalogs.get(document);
+  if (!catalog) {
+    catalog = {
+      resources: new Map(),
+      closures: new Map(),
+    };
+    catalogs.set(document, catalog);
+  }
+  return catalog;
+}
+
+function isDocument(target: StyleTarget): target is Document {
+  return target.nodeType === 9;
+}
+
+function owningDocument(target: StyleTarget): Document {
+  return isDocument(target) ? target : target.ownerDocument;
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function styleGlobal(owner: Document): WebUIStyleGlobal | undefined {
+  const configured: WebUIStyleGlobal | undefined = owner.defaultView?.__webui;
+  if (configured || owner !== globalThis.document || typeof window === 'undefined') {
+    return configured;
+  }
+  return window.__webui;
+}
+
+/** Read the owning document's configured CSP nonce for dynamic resources. */
+function readNonce(target: StyleTarget = document): string {
+  const owner = owningDocument(target);
+  const nonce = styleGlobal(owner)?.nonce;
+  if (nonce) return nonce;
+  const meta = owner.querySelector<HTMLMetaElement>('meta[name="webui-nonce"]');
+  return meta?.content ?? '';
+}
+
+/** Compare prepared resources without allocating serialized copies. */
+export function sameComponentStyleResource(
+  current: ComponentStyleResource,
+  next: ComponentStyleResource,
+): boolean {
+  if (current === next) return true;
+  const currentMembers = current.members;
+  const nextMembers = next.members;
+  if (
+    currentMembers?.length !== nextMembers?.length ||
+    currentMembers?.some((member, index) => member !== nextMembers?.[index])
+  ) {
+    return false;
+  }
+  switch (current.kind) {
+    case 'link':
+      return next.kind === 'link' && current.href === next.href;
+    case 'style':
+      return next.kind === 'style' && current.css === next.css;
+    case 'module':
+      return next.kind === 'module' &&
+        current.specifier === next.specifier &&
+        current.css === next.css;
+  }
+}
+
+/** Compare closures without allocating serialized copies. */
+export function sameComponentStyleClosure(
+  current: readonly string[],
+  next: readonly string[],
+): boolean {
+  return current === next ||
+    (current.length === next.length && current.every((id, index) => id === next[index]));
+}
+
+/** Validate and detach a componentStyles payload before any registry mutation. */
+export function prepareComponentStyles(value: unknown): ComponentStyles | undefined {
+  if (value === undefined) return undefined;
+  if (!isObject(value) || value.version !== 1) {
+    throw new Error('[WebUI] componentStyles must use version 1.');
+  }
+  if (value.strategy !== 'link' && value.strategy !== 'style' && value.strategy !== 'module') {
+    throw new Error('[WebUI] componentStyles strategy must be "link", "style", or "module".');
+  }
+  if (!isObject(value.resources) || !isObject(value.closures)) {
+    throw new Error('[WebUI] componentStyles resources and closures must be objects.');
+  }
+
+  const strategy = value.strategy;
+  const resources: Record<string, ComponentStyleResource> = {};
+  for (const id of Object.keys(value.resources)) {
+    const resource = value.resources[id];
+    if (!id || !isObject(resource) || resource.kind !== strategy) {
+      throw new Error(`[WebUI] Invalid component style resource "${id}".`);
+    }
+    let members: string[] | undefined;
+    if (resource.members !== undefined) {
+      if (
+        !Array.isArray(resource.members) ||
+        resource.members.length < 2 ||
+        resource.members.some(member => typeof member !== 'string' || !member) ||
+        new Set(resource.members).size !== resource.members.length
+      ) {
+        throw new Error(`[WebUI] Invalid component style resource members "${id}".`);
+      }
+      members = [...resource.members] as string[];
+    }
+    if (resource.kind === 'link' && typeof resource.href === 'string' && resource.href) {
+      resources[id] = members
+        ? { kind: 'link', href: resource.href, members }
+        : { kind: 'link', href: resource.href };
+    } else if (resource.kind === 'style' && typeof resource.css === 'string') {
+      resources[id] = members
+        ? { kind: 'style', css: resource.css, members }
+        : { kind: 'style', css: resource.css };
+    } else if (
+      resource.kind === 'module' &&
+      typeof resource.specifier === 'string' && resource.specifier &&
+      typeof resource.css === 'string'
+    ) {
+      resources[id] = members
+        ? { kind: 'module', specifier: resource.specifier, css: resource.css, members }
+        : { kind: 'module', specifier: resource.specifier, css: resource.css };
+    } else {
+      throw new Error(`[WebUI] Invalid component style resource "${id}".`);
+    }
+  }
+
+  const closures: Record<string, string[]> = {};
+  for (const root of Object.keys(value.closures)) {
+    const closure = value.closures[root];
+    if (!root || !Array.isArray(closure)) {
+      throw new Error(`[WebUI] Invalid component style closure "${root}".`);
+    }
+    closures[root] = closure.map((id) => {
+      if (typeof id !== 'string' || !id) {
+        throw new Error(`[WebUI] Invalid resource ID in component style closure "${root}".`);
+      }
+      return id;
+    });
+  }
+  return { version: 1, strategy, resources, closures };
+}
+
+/** Validate a required componentStyles payload. */
+export function requireComponentStyles(value: unknown): ComponentStyles {
+  const styles = prepareComponentStyles(value);
+  if (!styles) {
+    throw new Error('[WebUI] componentStyles is required.');
+  }
+  return styles;
+}
+
+/** Check a prepared payload for conflicts without publishing any definitions. */
+export function validateComponentStylesRegistration(
+  styles: ComponentStyles | undefined,
+  document: Document = globalThis.document,
+): void {
+  if (!styles) return;
+  const catalog = catalogFor(document);
+  for (const id of Object.keys(styles.resources)) {
+    const current = catalog.resources.get(id);
+    if (current && !sameComponentStyleResource(current, styles.resources[id])) {
+      throw new Error(`[WebUI] Conflicting component style resource "${id}".`);
+    }
+  }
+  for (const root of Object.keys(styles.closures)) {
+    const current = catalog.closures.get(root);
+    const next = styles.closures[root];
+    if (current && !sameComponentStyleClosure(current, next)) {
+      throw new Error(`[WebUI] Conflicting component style closure "${root}".`);
+    }
+  }
+}
 
 /**
- * Adopt a CSS module stylesheet onto a shadow root, or inject into `<head>`
- * for light DOM components.
+ * Publish a prepared payload after its conflicts have been validated.
  *
- * For shadow DOM: uses `import(specifier, { with: { type: "css" } })` to
- * retrieve the browser-registered CSSStyleSheet from the module registry.
- * The browser caches the sheet internally — no application-level cache needed.
+ * Internal registration paths use this to avoid cloning the payload again.
+ */
+export function registerPreparedComponentStyles(
+  styles: ComponentStyles,
+  document: Document = globalThis.document,
+): void {
+  const catalog = catalogFor(document);
+  for (const id of Object.keys(styles.resources)) {
+    if (catalog.resources.has(id)) continue;
+    const resource = styles.resources[id];
+    catalog.resources.set(id, resource);
+  }
+  for (const root of Object.keys(styles.closures)) {
+    if (!catalog.closures.has(root)) {
+      catalog.closures.set(root, styles.closures[root]);
+    }
+  }
+}
+
+/** Validate and publish definitions and ordered closures for one owning Document. */
+export function registerComponentStyles(
+  value: ComponentStyles | unknown,
+  document: Document = globalThis.document,
+): void {
+  const styles = requireComponentStyles(value);
+  validateComponentStylesRegistration(styles, document);
+  registerPreparedComponentStyles(styles, document);
+}
+
+/** Return whether one owning Document already knows an exact resource ID. */
+export function hasRegisteredComponentStyleResource(
+  id: string,
+  document: Document = globalThis.document,
+): boolean {
+  return catalogFor(document).resources.has(id);
+}
+
+function targetInstalledResources(target: StyleTarget): Set<string> {
+  let targetInstalled = installed.get(target);
+  if (!targetInstalled) {
+    targetInstalled = new Set();
+    installed.set(target, targetInstalled);
+  }
+  return targetInstalled;
+}
+
+function markResourceInstalled(
+  targetInstalled: Set<string>,
+  id: string,
+  resource: ComponentStyleResource,
+): void {
+  targetInstalled.add(id);
+  const members = resource.members;
+  if (!members) return;
+  for (let i = 0; i < members.length; i++) targetInstalled.add(members[i]);
+}
+
+function isMatchingResourceMarker(
+  candidate: Element,
+  resource: ComponentStyleResource,
+): boolean {
+  const strategy = candidate.getAttribute('data-webui-strategy');
+  if (strategy !== null && strategy !== resource.kind) return false;
+  return resource.kind === 'link'
+    ? candidate.localName === 'link'
+    : candidate.localName === 'style';
+}
+
+/** Whether an element is a compiler-owned Link/Style resource marker. */
+export function isComponentStyleMarker(element: Element): boolean {
+  if (typeof element.getAttribute !== 'function') return false;
+  if (element.getAttribute('data-webui-resource') === null) return false;
+  const strategy = element.getAttribute('data-webui-strategy');
+  return (element.localName === 'link' && strategy === 'link') ||
+    (element.localName === 'style' && (strategy === 'style' || strategy === 'module'));
+}
+
+/** Whether an element is any compiler-owned style resource marker. */
+export function isComponentStyleResourceMarker(element: Element): boolean {
+  if (isComponentStyleMarker(element)) return true;
+  return element.localName === 'script' &&
+    element.getAttribute('type') === 'importmap' &&
+    element.getAttribute('data-webui-resource') !== null;
+}
+
+function scanSsrMarkerElements(
+  candidates: ArrayLike<Element>,
+  catalog: DocumentCatalog,
+  targetInstalled: Set<string>,
+  state: SsrStyleMarkerState,
+): void {
+  for (let i = 0; i < candidates.length; i++) {
+    const candidate = candidates[i];
+    const id = candidate.getAttribute('data-webui-resource');
+    if (id === null) continue;
+    const resource = catalog.resources.get(id);
+    if (!resource || !isMatchingResourceMarker(candidate, resource)) continue;
+    if (resource.kind !== 'module') {
+      markResourceInstalled(targetInstalled, id, resource);
+      continue;
+    }
+    let moduleElements = state.moduleElements;
+    let moduleIds = state.moduleIds;
+    if (!moduleElements || !moduleIds) {
+      moduleElements = new Map();
+      moduleIds = [];
+      state.moduleElements = moduleElements;
+      state.moduleIds = moduleIds;
+    }
+    if (!moduleElements.has(id)) {
+      moduleElements.set(id, candidate);
+      moduleIds.push(id);
+    }
+  }
+}
+
+function ensureSsrMarkers(
+  target: StyleTarget,
+  catalog: DocumentCatalog,
+  targetInstalled: Set<string>,
+): SsrStyleMarkerState {
+  let state = ssrMarkers.get(target);
+  if (state) return state;
+  state = {};
+  ssrMarkers.set(target, state);
+  const candidates = target.querySelectorAll?.(
+    'link[data-webui-resource],style[data-webui-resource]',
+  );
+  if (candidates) {
+    scanSsrMarkerElements(candidates, catalog, targetInstalled, state);
+  }
+  return state;
+}
+
+/**
+ * Claim compiler-emitted SSR styles before installing a component closure.
  *
- * For light DOM: appends a `<style>` element to `<head>` (once per specifier).
+ * The first call scans the complete CSS tree so definition order cannot make a
+ * descendant install ahead of an active route root. Streaming route markers
+ * arrive later, so their generated `<webui-route>` parent is rescanned when
+ * that route host activates.
  */
-export function injectModuleStyle(
+export function claimSsrComponentStyles(source: Element, target: StyleTarget): void {
+  const catalog = catalogFor(owningDocument(target));
+  const targetInstalled = targetInstalledResources(target);
+  const state = ensureSsrMarkers(target, catalog, targetInstalled);
+  const route = source.parentElement;
+  if (route?.localName === 'webui-route') {
+    scanSsrMarkerElements(route.children, catalog, targetInstalled, state);
+  }
+}
+
+function markerScope(target: StyleTarget): Element | ShadowRoot {
+  return isDocument(target) ? target.head : target;
+}
+
+/**
+ * Anchor elements for the resources already present in a CSS tree.
+ *
+ * `installElements` uses these to insert new resources in closure order without
+ * re-searching the tree per resource. The result is cached and kept current by
+ * {@link appendResource}, because otherwise every closure install re-reads
+ * `data-webui-resource` from every element in a head that we ourselves keep
+ * growing — quadratic in the number of installed resources.
+ */
+function directResourceMarkers(
+  target: StyleTarget,
+  catalog: DocumentCatalog,
+): Map<string, Element> | undefined {
+  const scope = markerScope(target);
+  const cached = resourceMarkers.get(target);
+  if (cached && cached.count === scope.childElementCount) {
+    return cached.markers.size > 0 ? cached.markers : undefined;
+  }
+  const candidates = scope.children;
+  const markers = new Map<string, Element>();
+  for (let i = 0; i < candidates.length; i++) {
+    const id = candidates[i].getAttribute('data-webui-resource');
+    if (id === null) continue;
+    const resource = catalog.resources.get(id);
+    if (!resource || !isMatchingResourceMarker(candidates[i], resource)) continue;
+    if (!markers.has(id)) markers.set(id, candidates[i]);
+  }
+  resourceMarkers.set(target, { count: candidates.length, markers });
+  return markers.size > 0 ? markers : undefined;
+}
+
+/** Keep the marker cache current for a resource element we just inserted. */
+function noteMarkerInserted(target: StyleTarget, id: string, element: Element): void {
+  const cached = resourceMarkers.get(target);
+  if (!cached) return;
+  // Exactly one element was inserted into the scanned scope, so the expected
+  // child count advances by one without re-reading the live collection.
+  cached.count++;
+  if (!cached.markers.has(id)) cached.markers.set(id, element);
+}
+
+function appendResource(
+  target: StyleTarget,
+  id: string,
+  resource: ComponentStyleResource,
+  before?: Element,
+): Element {
+  const document = owningDocument(target);
+  const parent: ParentNode = isDocument(target) ? target.head : target;
+  if (resource.kind === 'link') {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = resource.href;
+    link.setAttribute('data-webui-resource', id);
+    link.setAttribute('data-webui-strategy', 'link');
+    parent.insertBefore(link, before ?? null);
+    noteMarkerInserted(target, id, link);
+    return link;
+  }
+  if (resource.kind === 'style') {
+    const style = document.createElement('style');
+    const nonce = readNonce(target);
+    if (nonce) style.nonce = nonce;
+    style.textContent = resource.css;
+    style.setAttribute('data-webui-resource', id);
+    style.setAttribute('data-webui-strategy', 'style');
+    parent.insertBefore(style, before ?? null);
+    noteMarkerInserted(target, id, style);
+    return style;
+  }
+  throw new Error(`[WebUI] Module resource "${id}" cannot be installed as an element.`);
+}
+
+/** Specifiers already emitted in an owning Document's SSR bootstrap payload. */
+function seededModuleSpecifiers(owner: Document): Set<string> {
+  let installedSpecifiers = moduleImportsInstalled.get(owner);
+  if (!installedSpecifiers) {
+    installedSpecifiers = new Set();
+    moduleImportsInstalled.set(owner, installedSpecifiers);
+  }
+  if (moduleImportsSeeded.has(owner)) return installedSpecifiers;
+  moduleImportsSeeded.add(owner);
+  const styles = styleGlobal(owner)?.styles;
+  if (!styles) return installedSpecifiers;
+  for (let i = 0; i < styles.length; i++) {
+    installedSpecifiers.add(styles[i]);
+  }
+  return installedSpecifiers;
+}
+
+/** Install one Module resource's import-map entry once per owning Document. */
+function installModuleImportMap(
+  target: StyleTarget,
   specifier: string,
-  shadowRoot: ShadowRoot | null,
+  css: string,
 ): void {
-  if (shadowRoot) {
-    // SSR hydration: the browser already adopted the sheet from
-    // shadowrootadoptedstylesheets on the declarative shadow root.
-    if (shadowRoot.adoptedStyleSheets.length > 0) return;
-
-    // SPA path: import the CSS module from the browser's registry.
-    // The specifier was registered via a `<script type="importmap">` tag
-    // (either inlined at SSR time or appended to <head> by the router during
-    // partial navigation). The import resolves to the same CSSStyleSheet the
-    // browser registered.
-    import(specifier, { with: { type: 'css' } }).then(
-      (mod: { default: CSSStyleSheet }) => {
-        shadowRoot.adoptedStyleSheets.push(mod.default);
-      },
-      () => {
-        // Specifier not registered — component has no CSS module definition.
-        // This is expected for Link/Style strategies or components without CSS.
-      },
-    );
-  } else if (!headInjected.has(specifier)) {
-    headInjected.add(specifier);
-    import(specifier, { with: { type: 'css' } }).then(
-      (mod: { default: CSSStyleSheet }) => {
-        document.adoptedStyleSheets.push(mod.default);
-      },
-      () => {},
+  const owner = owningDocument(target);
+  const installedSpecifiers = seededModuleSpecifiers(owner);
+  if (installedSpecifiers.has(specifier)) return;
+
+  const script = owner.createElement('script');
+  script.type = 'importmap';
+  const nonce = readNonce(target);
+  if (nonce) script.nonce = nonce;
+  script.textContent = JSON.stringify({
+    imports: { [specifier]: `data:text/css,${encodeURIComponent(css)}` },
+  });
+  owner.head.appendChild(script);
+  installedSpecifiers.add(specifier);
+}
+
+function loadModule(
+  target: StyleTarget,
+  id: string,
+  resource: { specifier: string; css: string },
+): Promise<CSSStyleSheet> {
+  let targetPending = pending.get(target);
+  if (!targetPending) {
+    targetPending = new Map();
+    pending.set(target, targetPending);
+  }
+  const existing = targetPending.get(id);
+  if (existing) return existing;
+
+  installModuleImportMap(target, resource.specifier, resource.css);
+
+  const loads = targetPending;
+  const promise = loadCssModule(resource.specifier)
+    .then((module: CssModule) => module.default);
+  loads.set(id, promise);
+  // Keep successful loads for another caller to adopt; only failures retry.
+  void promise.catch(() => {
+    if (loads.get(id) === promise) loads.delete(id);
+  });
+  return promise;
+}
+
+function markClosureComplete(target: StyleTarget, rootId: string): void {
+  let roots = completedClosures.get(target);
+  if (!roots) {
+    roots = new Set();
+    completedClosures.set(target, roots);
+  }
+  roots.add(rootId);
+}
+
+function installElementRange(
+  target: StyleTarget,
+  catalog: DocumentCatalog,
+  closure: readonly string[],
+  targetInstalled: Set<string>,
+  start: number,
+  end: number,
+  before?: Element,
+  linkElements?: HTMLLinkElement[],
+): void {
+  for (let i = start; i < end; i++) {
+    const id = closure[i];
+    if (targetInstalled.has(id)) continue;
+    const resource = catalog.resources.get(id);
+    if (!resource || resource.kind === 'module') continue;
+    const element = appendResource(target, id, resource, before);
+    if (linkElements && resource.kind === 'link') {
+      linkElements.push(element as HTMLLinkElement);
+    }
+    markResourceInstalled(targetInstalled, id, resource);
+  }
+}
+
+/**
+ * Warn when a closure asks for an order the tree has already contradicted.
+ *
+ * Resources are installed once and shared, so the first closure to run fixes
+ * their relative order. A later closure that wants the opposite order gets
+ * silently ignored — its rules cascade the wrong way with no signal. Detect it
+ * by checking that every anchor we found still appears in closure order.
+ */
+function warnOnContradictoryOrder(
+  rootId: string,
+  closure: readonly string[],
+  markers: Map<string, Element>,
+): void {
+  let previousId: string | undefined;
+  let previous: Element | undefined;
+  for (let i = 0; i < closure.length; i++) {
+    const marker = markers.get(closure[i]);
+    if (!marker) continue;
+    if (
+      previous &&
+      typeof previous.compareDocumentPosition === 'function' &&
+      // Bit 4 is DOCUMENT_POSITION_FOLLOWING: `marker` comes after `previous`,
+      // which is what closure order requires.
+      (previous.compareDocumentPosition(marker) & 4) === 0
+    ) {
+      console.warn(
+        `[WebUI] Closure "${rootId}" wants "${previousId}" before "${closure[i]}", but they are already installed in the opposite order. The first closure to install decides, so these rules cascade against this closure's intent.`,
+      );
+      return;
+    }
+    previousId = closure[i];
+    previous = marker;
+  }
+}
+
+function installElements(
+  target: StyleTarget,
+  catalog: DocumentCatalog,
+  closure: readonly string[],
+  targetInstalled: Set<string>,
+  markers: Map<string, Element> | undefined,
+  rootId: string,
+  linkElements?: HTMLLinkElement[],
+): void {
+  // Existing markers delimit ranges that can be inserted in closure order
+  // without searching the target again for every resource.
+  let segmentEnd = closure.length;
+  let before: Element | undefined;
+  if (markers) {
+    if (DEV) warnOnContradictoryOrder(rootId, closure, markers);
+    for (let i = closure.length - 1; i >= 0; i--) {
+      const marker = markers.get(closure[i]);
+      if (!marker) continue;
+      installElementRange(
+        target,
+        catalog,
+        closure,
+        targetInstalled,
+        i + 1,
+        segmentEnd,
+        before,
+        linkElements,
+      );
+      const resource = catalog.resources.get(closure[i]);
+      if (resource && resource.kind !== 'module') {
+        markResourceInstalled(targetInstalled, closure[i], resource);
+      }
+      before = marker;
+      segmentEnd = i;
+    }
+  }
+  installElementRange(
+    target,
+    catalog,
+    closure,
+    targetInstalled,
+    0,
+    segmentEnd,
+    before,
+    linkElements,
+  );
+}
+
+function moduleAdoptionState(target: StyleTarget): ModuleAdoptionState {
+  let state = moduleAdoption.get(target);
+  if (!state) {
+    state = { order: [], reserved: new Set(), sheets: new Map() };
+    moduleAdoption.set(target, state);
+  }
+  return state;
+}
+
+/** Reserve a stored-order slot before the module load starts. */
+function reserveModuleSlot(target: StyleTarget, id: string): void {
+  const state = moduleAdoptionState(target);
+  if (state.reserved.has(id)) return;
+  state.reserved.add(id);
+  state.order.push(id);
+}
+
+/**
+ * Rewrite `adoptedStyleSheets` so framework sheets follow reserved order.
+ *
+ * Sheets adopted by application code keep their relative order ahead of the
+ * framework's, matching the append-only behavior of a single closure install.
+ * The array is only assigned when it actually changes, since assignment
+ * invalidates style for the whole tree.
+ */
+function applyModuleOrder(target: StyleTarget, state: ModuleAdoptionState): void {
+  const adopted = target.adoptedStyleSheets;
+  const owned = new Set(state.sheets.values());
+  const next: CSSStyleSheet[] = [];
+  for (let i = 0; i < adopted.length; i++) {
+    if (!owned.has(adopted[i])) next.push(adopted[i]);
+  }
+  const seen = new Set<CSSStyleSheet>();
+  for (let i = 0; i < state.order.length; i++) {
+    const sheet = state.sheets.get(state.order[i]);
+    if (!sheet || seen.has(sheet)) continue;
+    seen.add(sheet);
+    next.push(sheet);
+  }
+  if (next.length === adopted.length) {
+    let same = true;
+    for (let i = 0; i < next.length; i++) {
+      if (next[i] !== adopted[i]) {
+        same = false;
+        break;
+      }
+    }
+    if (same) return;
+  }
+  target.adoptedStyleSheets = next;
+}
+
+function commitModules(
+  target: StyleTarget,
+  ids: readonly string[],
+  sheets: readonly CSSStyleSheet[],
+  markers: Map<string, Element> | undefined,
+  targetInstalled: Set<string>,
+): void {
+  const state = moduleAdoptionState(target);
+  const catalog = catalogFor(owningDocument(target));
+  for (let i = 0; i < sheets.length; i++) {
+    const id = ids[i];
+    if (!state.reserved.has(id)) {
+      state.reserved.add(id);
+      state.order.push(id);
+    }
+    state.sheets.set(id, sheets[i]);
+  }
+  applyModuleOrder(target, state);
+  const targetPending = pending.get(target);
+  for (let i = 0; i < sheets.length; i++) {
+    const id = ids[i];
+    const resource = catalog.resources.get(id);
+    if (resource) markResourceInstalled(targetInstalled, id, resource);
+    else targetInstalled.add(id);
+    targetPending?.delete(id);
+    // Drop the element reference with the node so an adopted fallback does not
+    // stay reachable for the lifetime of the CSS tree.
+    const marker = markers?.get(id);
+    if (marker) {
+      marker.remove();
+      markers?.delete(id);
+    }
+  }
+  if (targetPending?.size === 0) pending.delete(target);
+}
+
+async function finishModuleLoads(
+  target: StyleTarget,
+  rootId: string,
+  ids: readonly string[],
+  loads: readonly Promise<CSSStyleSheet>[],
+  markers: Map<string, Element> | undefined,
+  targetInstalled: Set<string>,
+): Promise<void> {
+  const sheets: CSSStyleSheet[] = [];
+  try {
+    // Loads are already in flight; awaiting them in closure order preserves
+    // the successful prefix when a later resource rejects.
+    for (let i = 0; i < loads.length; i++) {
+      sheets.push(await loads[i]);
+    }
+  } catch (error) {
+    if (sheets.length > 0) {
+      commitModules(target, ids, sheets, markers, targetInstalled);
+    }
+    throw error;
+  }
+  commitModules(target, ids, sheets, markers, targetInstalled);
+  markClosureComplete(target, rootId);
+}
+
+/**
+ * Install one root's ordered style closure into a Document or ShadowRoot.
+ *
+ * Link and Style resources complete synchronously and return undefined. Module
+ * resources return a promise that rejects on import failure; failed pending
+ * entries are removed for retry.
+ *
+ * Failure policy — the two outcomes are deliberately different:
+ *
+ * - **An unknown `rootId` returns quietly.** A component with no CSS has no
+ *   closure at all, and every mounting host calls this unconditionally, so a
+ *   missing closure is the normal "nothing to install" answer, not an error.
+ * - **A known closure naming an unknown resource throws.** The compiler emits
+ *   closures and resources together, so a closure that references an ID the
+ *   catalog does not define means the payload was truncated or mismatched.
+ *   Rendering on would leave the component visibly unstyled with no signal.
+ */
+export function installComponentStyles(
+  rootId: string,
+  target: StyleTarget,
+  host?: HTMLElement,
+): Promise<void> | undefined {
+  const catalog = catalogFor(owningDocument(target));
+  const closure = catalog.closures.get(rootId);
+  if (!closure || completedClosures.get(target)?.has(rootId)) return undefined;
+
+  const targetInstalled = targetInstalledResources(target);
+  const markerState = ensureSsrMarkers(target, catalog, targetInstalled);
+
+  let hasElementWork = false;
+  let hasClosureModuleWork = false;
+  for (let i = 0; i < closure.length; i++) {
+    const id = closure[i];
+    if (targetInstalled.has(id)) continue;
+    const resource = catalog.resources.get(id);
+    if (!resource) {
+      throw new Error(`[WebUI] Missing component style resource "${id}" for closure "${rootId}".`);
+    }
+    if (resource.kind === 'module') hasClosureModuleWork = true;
+    else hasElementWork = true;
+  }
+
+  let hasSsrModuleWork = false;
+  const ssrModuleIds = markerState.moduleIds;
+  if (ssrModuleIds) {
+    for (let i = 0; i < ssrModuleIds.length; i++) {
+      if (!targetInstalled.has(ssrModuleIds[i])) {
+        hasSsrModuleWork = true;
+        break;
+      }
+    }
+  }
+  if (!hasElementWork && !hasClosureModuleWork && !hasSsrModuleWork) {
+    markClosureComplete(target, rootId);
+    return undefined;
+  }
+
+  if (hasElementWork) {
+    const linkElements: HTMLLinkElement[] = [];
+    installElements(
+      target,
+      catalog,
+      closure,
+      targetInstalled,
+      directResourceMarkers(target, catalog),
+      rootId,
+      linkElements,
     );
+    if (host && !isDocument(target)) {
+      installComponentLinkStyles(host, target, linkElements);
+    }
+  }
+
+  let moduleIds: string[] | undefined;
+  let moduleLoads: Promise<CSSStyleSheet>[] | undefined;
+  let queuedModules: Set<string> | undefined;
+  const queueModule = (id: string, resource: { specifier: string; css: string }): void => {
+    if (!moduleIds || !moduleLoads || !queuedModules) {
+      moduleIds = [];
+      moduleLoads = [];
+      queuedModules = new Set();
+    }
+    reserveModuleSlot(target, id);
+    moduleIds.push(id);
+    moduleLoads.push(loadModule(target, id, resource));
+    queuedModules.add(id);
+  };
+  if (ssrModuleIds) {
+    for (let i = 0; i < ssrModuleIds.length; i++) {
+      const id = ssrModuleIds[i];
+      if (targetInstalled.has(id)) continue;
+      const resource = catalog.resources.get(id);
+      if (!resource || resource.kind !== 'module') continue;
+      queueModule(id, resource);
+    }
+  }
+  for (let i = 0; i < closure.length; i++) {
+    const id = closure[i];
+    if (targetInstalled.has(id) || queuedModules?.has(id)) continue;
+    const resource = catalog.resources.get(id);
+    if (!resource) {
+      throw new Error(`[WebUI] Missing component style resource "${id}" for closure "${rootId}".`);
+    }
+    if (resource.kind === 'module') {
+      queueModule(id, resource);
+    }
+  }
+  if (!moduleLoads || !moduleIds) {
+    markClosureComplete(target, rootId);
+    return undefined;
   }
-}
\ No newline at end of file
+  return finishModuleLoads(
+    target,
+    rootId,
+    moduleIds,
+    moduleLoads,
+    markerState.moduleElements,
+    targetInstalled,
+  );
+}
diff --git a/packages/webui-framework/src/index.ts b/packages/webui-framework/src/index.ts
index 439d0669e..ead75b58a 100644
--- a/packages/webui-framework/src/index.ts
+++ b/packages/webui-framework/src/index.ts
@@ -36,4 +36,13 @@ export { WebUIElement } from './element.js';
 export { observable, attr } from './decorators.js';
 export { getTemplate, registerTemplateData } from './template.js';
 export type { TemplateMeta } from './template.js';
+export {
+  installComponentStyles,
+  prepareComponentStyles,
+  registerComponentStyles,
+} from './element/styles.js';
+export type {
+  ComponentStyleResource,
+  ComponentStyles,
+} from './element/styles.js';
 export { hydrationStart, hydrationEnd } from './lifecycle.js';
diff --git a/packages/webui-framework/src/streaming-bootstrap.ts b/packages/webui-framework/src/streaming-bootstrap.ts
index cfe89ccf5..3d4ebabfb 100644
--- a/packages/webui-framework/src/streaming-bootstrap.ts
+++ b/packages/webui-framework/src/streaming-bootstrap.ts
@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 
 import { registerTemplateData } from './template.js';
+import { registerComponentStyles } from './element/styles.js';
 import type {
   BoundaryBootstrap,
   SpanCompletionPayload,
@@ -11,6 +12,7 @@ import type {
 export function applyBoundaryBootstrap(
   bootstrap: BoundaryBootstrap | SpanCompletionPayload,
 ): void {
+  registerComponentStyles(bootstrap.componentStyles);
   if (bootstrap.templates) registerTemplateData(bootstrap.templates);
 
   const w = window as Window;
@@ -23,6 +25,7 @@ export function applyBoundaryBootstrap(
     if (
       key === 'templates' ||
       key === 'state' ||
+      key === 'componentStyles' ||
       key === 'declarationId' ||
       key === 'enclosingSpanInstanceId'
     ) continue;
diff --git a/packages/webui-framework/src/streaming-pipeline.test.ts b/packages/webui-framework/src/streaming-pipeline.test.ts
index 9211d38f5..514d91f23 100644
--- a/packages/webui-framework/src/streaming-pipeline.test.ts
+++ b/packages/webui-framework/src/streaming-pipeline.test.ts
@@ -509,6 +509,19 @@ function markStreamedRoots(nodes: FakeNode[]): void {
   }
 }
 
+function currentCheckpointPayload(bootstrap: object): object {
+  if (bootstrap === null) return bootstrap;
+  return {
+    componentStyles: {
+      version: 1,
+      strategy: 'style',
+      resources: {},
+      closures: {},
+    },
+    ...bootstrap,
+  };
+}
+
 /** Build a boundary with a marker pair wrapping `roots`. */
 function buildBoundary(sequence: number, terminal: number, roots: FakeElement[], bootstrap: object): BuiltBoundary {
   markStreamedRoots(roots);
@@ -523,7 +536,7 @@ function buildBoundary(sequence: number, terminal: number, roots: FakeElement[],
       terminal === 1 ? 0 : sequence,
       terminal === 1
         ? bootstrap
-        : { declarationId: sequence, ...bootstrap },
+        : currentCheckpointPayload({ declarationId: sequence, ...bootstrap }),
     ]),
   });
   const sentinel = element('webui-hydrate');
@@ -543,7 +556,7 @@ function buildMarkerless(sequence: number, terminal: number, bootstrap: object):
       0,
       terminal === 1
         ? bootstrap
-        : { declarationId: 0, ...bootstrap },
+        : currentCheckpointPayload({ declarationId: 0, ...bootstrap }),
     ]),
   });
   const sentinel = element('webui-hydrate');
@@ -568,7 +581,7 @@ function buildUpdatableBoundary(
       recordSequence,
       1,
       boundaryId,
-      { declarationId: boundaryId, ...bootstrap },
+      currentCheckpointPayload({ declarationId: boundaryId, ...bootstrap }),
     ]),
   });
   const sentinel = element('webui-hydrate');
@@ -605,7 +618,13 @@ function buildSpanCompletion(
   const end = comment(`/ws:${spanId}`);
   const scriptEl = element('script', {
     attrs: { 'data-webui-boundary': '' },
-    text: JSON.stringify([2, recordSequence, 3, spanId, bootstrap]),
+    text: JSON.stringify([
+      2,
+      recordSequence,
+      3,
+      spanId,
+      currentCheckpointPayload(bootstrap),
+    ]),
   });
   const sentinel = element('webui-hydrate');
   const root = body();
@@ -682,11 +701,11 @@ function buildSpanScenario(
       boundarySequence,
       options.updatable ? 1 : 0,
       0,
-      {
+      currentCheckpointPayload({
         declarationId: 9,
         enclosingSpanInstanceId: spanId,
         state: { scope: 'child' },
-      },
+      }),
     ]),
   });
   const boundarySentinel = element('webui-hydrate');
@@ -717,7 +736,7 @@ function buildSpanScenario(
       spanSequence,
       3,
       spanId,
-      { state: { scope: 'parent' } },
+      currentCheckpointPayload({ state: { scope: 'parent' } }),
     ]),
   });
   const spanSentinel = element('webui-hydrate');
@@ -1464,6 +1483,21 @@ describe('streaming coordinator pipeline', () => {
     assert.equal(webuiGlobal().inventory, '0123456789abcdefabcdef');
   });
 
+  test('halts the stream when a checkpoint omits componentStyles', async () => {
+    const previousError = console.error;
+    console.error = () => {};
+    try {
+      const boundary = buildRawBoundary(0, '[2,0,0,0,{"state":{}}]', []);
+      enqueue(boundary.sentinel);
+      await flush();
+
+      assert.equal(__isHaltedForTests(), true);
+      assert.equal(__getLifecycleStateForTests().completed, false);
+    } finally {
+      console.error = previousError;
+    }
+  });
+
   test('halts the stream when a checkpoint payload is not an object', async () => {
     // The envelope parser no longer re-validates fields written by our own
     // serializer, so a structurally impossible payload is caught by the commit
@@ -1781,7 +1815,7 @@ describe('streaming coordinator pipeline', () => {
         0,
         3,
         1,
-        { state: { scope: 'inner' } },
+        currentCheckpointPayload({ state: { scope: 'inner' } }),
       ]),
     });
     const innerSentinel = element('webui-hydrate');
@@ -1802,7 +1836,7 @@ describe('streaming coordinator pipeline', () => {
         1,
         3,
         0,
-        { state: { scope: 'outer' } },
+        currentCheckpointPayload({ state: { scope: 'outer' } }),
       ]),
     });
     const outerSentinel = element('webui-hydrate');
@@ -2275,11 +2309,11 @@ describe('streaming coordinator pipeline', () => {
         0,
         0,
         0,
-        {
+        currentCheckpointPayload({
           declarationId: 12,
           enclosingSpanInstanceId: 1,
           state: { scope: 'child' },
-        },
+        }),
       ]),
     });
     const boundarySentinel = element('webui-hydrate');
@@ -2300,7 +2334,7 @@ describe('streaming coordinator pipeline', () => {
         1,
         3,
         1,
-        { state: { scope: 'inner' } },
+        currentCheckpointPayload({ state: { scope: 'inner' } }),
       ]),
     });
     const innerSentinel = element('webui-hydrate');
@@ -2321,7 +2355,7 @@ describe('streaming coordinator pipeline', () => {
         2,
         3,
         0,
-        { state: { scope: 'outer' } },
+        currentCheckpointPayload({ state: { scope: 'outer' } }),
       ]),
     });
     const outerSentinel = element('webui-hydrate');
diff --git a/packages/webui-framework/src/streaming-protocol.ts b/packages/webui-framework/src/streaming-protocol.ts
index 137597336..95e4cb82e 100644
--- a/packages/webui-framework/src/streaming-protocol.ts
+++ b/packages/webui-framework/src/streaming-protocol.ts
@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 
 import type { TemplateMeta } from './template.js';
+import type { ComponentStyles } from './element/styles.js';
 
 /** Clean-break component-local streaming protocol version. */
 export const STREAMING_PROTOCOL_VERSION = 2;
@@ -24,6 +25,7 @@ export interface BoundaryBootstrap {
   chain?: unknown[];
   css?: string[];
   styles?: string[];
+  componentStyles: ComponentStyles;
   [key: string]: unknown;
 }
 
diff --git a/packages/webui-framework/src/template-data-block.test.ts b/packages/webui-framework/src/template-data-block.test.ts
new file mode 100644
index 000000000..c1ff91d0f
--- /dev/null
+++ b/packages/webui-framework/src/template-data-block.test.ts
@@ -0,0 +1,71 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { describe, test } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { getTemplate } from './template.js';
+
+// `loadWebUIDataBlock` latches after its first run, and that latch is module
+// state. This lives in its own file so the latch starts clean; `node --test`
+// gives every test file its own process.
+describe('SSR data block loading', () => {
+  test('publishes parsed data even when componentStyles are rejected', () => {
+    const previousWindow = Object.getOwnPropertyDescriptor(globalThis, 'window');
+    const previousDocument = Object.getOwnPropertyDescriptor(globalThis, 'document');
+    let parses = 0;
+    let removed = 0;
+
+    try {
+      Object.defineProperty(globalThis, 'window', {
+        value: {},
+        configurable: true,
+        writable: true,
+      });
+      Object.defineProperty(globalThis, 'document', {
+        value: {
+          getElementById(id: string) {
+            if (id !== 'webui-data') return null;
+            return {
+              get textContent(): string {
+                parses++;
+                // `componentStyles` is version 2, which registration rejects.
+                return '{"state":{"title":"Hello"},"componentStyles":{"version":2},"templates":{"greeting":{"h":"<p></p>"}}}';
+              },
+              remove() { removed++; },
+            };
+          },
+        },
+        configurable: true,
+        writable: true,
+      });
+
+      assert.throws(() => getTemplate('greeting'), /componentStyles must use version 1/);
+
+      assert.deepEqual(
+        window.__webui!.state,
+        { title: 'Hello' },
+        'state that parsed correctly must survive a style registration failure',
+      );
+      assert.ok(
+        window.__webui!.templates!.greeting,
+        'templates that parsed correctly must survive a style registration failure',
+      );
+
+      assert.equal(getTemplate('greeting')?.h, '<p></p>');
+      assert.equal(parses, 1, 'a failed style registration must not re-parse the data block');
+      assert.equal(removed, 1);
+    } finally {
+      if (previousWindow) {
+        Object.defineProperty(globalThis, 'window', previousWindow);
+      } else {
+        Reflect.deleteProperty(globalThis, 'window');
+      }
+      if (previousDocument) {
+        Object.defineProperty(globalThis, 'document', previousDocument);
+      } else {
+        Reflect.deleteProperty(globalThis, 'document');
+      }
+    }
+  });
+});
diff --git a/packages/webui-framework/src/template-element.test.ts b/packages/webui-framework/src/template-element.test.ts
index 5dc45f4eb..be54d4a7e 100644
--- a/packages/webui-framework/src/template-element.test.ts
+++ b/packages/webui-framework/src/template-element.test.ts
@@ -15,7 +15,9 @@ Object.defineProperty(globalThis, 'HTMLElement', {
     tagName = '';
     isConnected = false;
     childNodes: unknown[] = [];
+    children: unknown[] = [];
     shadowRoot = null;
+    ownerDocument = document;
     _attrs: Record<string, string> = {};
 
     hasAttribute(name: string): boolean {
@@ -33,12 +35,17 @@ Object.defineProperty(globalThis, 'HTMLElement', {
     removeAttribute(name: string): void {
       delete this._attrs[name];
     }
+
+    getRootNode(): Document {
+      return this.ownerDocument;
+    }
   },
   configurable: true,
 });
 
 Object.defineProperty(globalThis, 'document', {
   value: {
+    nodeType: 9,
     readyState: 'loading',
     getElementById() {
       return null;
@@ -50,6 +57,9 @@ Object.defineProperty(globalThis, 'document', {
       assert.equal(selector, 'meta[name="webui-streaming"][content="1"]');
       return { getAttribute: () => '1' };
     },
+    querySelectorAll() {
+      return [];
+    },
   },
   configurable: true,
 });
diff --git a/packages/webui-framework/src/template-element.ts b/packages/webui-framework/src/template-element.ts
index a9aceb018..f378b87d6 100644
--- a/packages/webui-framework/src/template-element.ts
+++ b/packages/webui-framework/src/template-element.ts
@@ -89,7 +89,9 @@ import {
   type SSRIndex,
 } from './element/markers.js';
 import {
-  injectModuleStyle,
+  claimSsrComponentStyles,
+  installComponentStyles,
+  isComponentStyleMarker,
 } from './element/styles.js';
 import {
   cancelTemplateLinkStyleMount,
@@ -516,7 +518,12 @@ export class TemplateElement extends HTMLElement {
       return ACTIVATION_MISSING_TEMPLATE;
     }
     this.$meta = meta;
-    if (!this.$shouldActivateOnBoundaryCommit()) return ACTIVATION_STATIC_HOST_OPT_OUT;
+    if (!this.$shouldActivateOnBoundaryCommit()) {
+      // A static host never activates, so this is the only chance to install
+      // its styles.
+      this.$installStyles(meta);
+      return ACTIVATION_STATIC_HOST_OPT_OUT;
+    }
     const ancestor = this.$nearestHydrationBarrier(bypassAncestor);
     if (ancestor) {
       this.$deferredByAncestor = true;
@@ -715,7 +722,13 @@ export class TemplateElement extends HTMLElement {
       const renderRoot = wantShadow
         ? this.shadowRoot ?? this.attachShadow({ mode: 'open' })
         : this;
-      renderRoot.replaceChildren();
+      const retainedStyles: Element[] = [];
+      let child = renderRoot.firstElementChild;
+      while (child) {
+        if (isComponentStyleMarker(child)) retainedStyles.push(child);
+        child = child.nextElementSibling;
+      }
+      renderRoot.replaceChildren(...retainedStyles);
       root = renderRoot;
       isSSR = false;
     } else if (hasShadow && !resetClientShadow) {
@@ -743,11 +756,11 @@ export class TemplateElement extends HTMLElement {
       isSSR = false;
     }
 
-    if (
-      isSSR &&
-      !forceSSR &&
-      !reconnecting
-    ) {
+    // Styles are required even when a compiler-owned SSR host remains dormant.
+    // Install them after root selection but before the hydration deferral.
+    this.$installStyles(meta);
+
+    if (isSSR && !forceSSR && !reconnecting) {
       const ancestor = this.$nearestHydrationBarrier();
       if (ancestor) {
         this.$meta = meta;
@@ -758,9 +771,7 @@ export class TemplateElement extends HTMLElement {
         this.$registerWithHydrationBarrier(ancestor);
         return;
       }
-      if (!this.$shouldDeferSSRHydration(meta)) {
-        // Continue into ordinary eager hydration below.
-      } else {
+      if (this.$shouldDeferSSRHydration(meta)) {
         this.$meta = meta;
         this.$deferredSSR = true;
         this.$ready = true;
@@ -772,9 +783,6 @@ export class TemplateElement extends HTMLElement {
     let deferredHydrationFinish = false;
     hydrationStart();
     try {
-      // Inject CSS module stylesheet after root is determined
-      if (meta.sa) injectModuleStyle(meta.sa, this.shadowRoot);
-
       if (!reconnecting) {
         if (isSSR) {
           // Seed explicit authored state. A streamed activation (forceSSR)
@@ -894,6 +902,23 @@ export class TemplateElement extends HTMLElement {
     }
   }
 
+  private $installStyles(meta: TemplateMeta): void {
+    const wantShadow = !!this.shadowRoot || !!meta.sd;
+    const containingRoot = this.getRootNode();
+    const styleTarget = wantShadow
+      ? this.shadowRoot!
+      : containingRoot.nodeType === 11 && 'host' in containingRoot
+        ? containingRoot as ShadowRoot
+        : this.ownerDocument;
+    claimSsrComponentStyles(this, styleTarget);
+    const installation = installComponentStyles(this.localName, styleTarget, this);
+    if (installation) {
+      void installation.catch((error) => {
+        console.error(error);
+      });
+    }
+  }
+
   disconnectedCallback(): void {
     this.$detachDeferredAncestor();
     // Schedule teardown on microtask — if the element is re-connected
diff --git a/packages/webui-framework/src/template-events.ts b/packages/webui-framework/src/template-events.ts
index 8e6f1d897..99000220b 100644
--- a/packages/webui-framework/src/template-events.ts
+++ b/packages/webui-framework/src/template-events.ts
@@ -14,13 +14,20 @@ import type { TemplateMeta } from './template.js';
 /** DOM event emitted when WebUI template data becomes available at runtime. */
 export const TEMPLATES_REGISTERED_EVENT = 'webui:templates-registered';
 
-/** Validated template registration event detail. */
+/**
+ * Notify optional runtimes that templates have been registered.
+ *
+ * Styles are deliberately not announced here. This dispatcher runs only after
+ * the framework has already accepted them, so repeating them would ask every
+ * listener to register the same catalog twice. The router has its own
+ * dispatcher and *does* attach styles, but only when the framework bridge was
+ * absent — which is why {@link templateRegistrationDetail} still reads them.
+ */
 export interface TemplateRegistrationDetail {
   templates?: Record<string, TemplateMeta>;
+  componentStyles?: unknown;
   waitUntil?: (promise: PromiseLike<unknown>) => void;
 }
-
-/** Notify optional runtimes that templates have been registered. */
 export function dispatchTemplatesRegistered(
   templates: Record<string, TemplateMeta>,
 ): void {
@@ -38,11 +45,14 @@ export function dispatchTemplatesRegistered(
 }
 
 /** Read a template registration event payload without trusting arbitrary detail. */
-export function templateRegistrationDetail(
-  event: Event,
-): TemplateRegistrationDetail | undefined {
+export function templateRegistrationDetail(event: Event): {
+  templates?: Record<string, TemplateMeta>;
+  componentStyles?: unknown;
+  waitUntil?: (promise: PromiseLike<unknown>) => void;
+} | undefined {
   const detail = (event as CustomEvent<{
     templates?: unknown;
+    componentStyles?: unknown;
     waitUntil?: unknown;
   }>).detail;
   if (!detail || typeof detail !== 'object') return undefined;
@@ -51,9 +61,12 @@ export function templateRegistrationDetail(
     templates: typeof templates === 'object' && templates !== null
       ? templates as Record<string, TemplateMeta>
       : undefined,
+    componentStyles: detail.componentStyles,
     waitUntil: typeof detail.waitUntil === 'function'
       ? detail.waitUntil as (promise: PromiseLike<unknown>) => void
       : undefined,
   };
-  return payload.templates ? payload : undefined;
+  return payload.templates || payload.componentStyles !== undefined || payload.waitUntil
+    ? payload
+    : undefined;
 }
diff --git a/packages/webui-framework/src/template-types.ts b/packages/webui-framework/src/template-types.ts
index c4fb5a243..9394b12c2 100644
--- a/packages/webui-framework/src/template-types.ts
+++ b/packages/webui-framework/src/template-types.ts
@@ -89,7 +89,6 @@ export interface TemplateBlockMeta {
 
 export interface TemplateMeta extends TemplateBlockMeta {
   b?: TemplateBlockMeta[];
-  sa?: string;
   re?: [string, string, CompiledEventArgs][];
   /** Component-level state roots referenced by template bindings. */
   tr?: string[];
diff --git a/packages/webui-framework/src/template.test.ts b/packages/webui-framework/src/template.test.ts
index 104d51ade..d71584a33 100644
--- a/packages/webui-framework/src/template.test.ts
+++ b/packages/webui-framework/src/template.test.ts
@@ -64,6 +64,59 @@ describe('template registry helpers', () => {
     }
   });
 
+  test('registerTemplateData does not re-announce styles it already registered', () => {
+    const previousWindow = Object.getOwnPropertyDescriptor(globalThis, 'window');
+    const previousDocument = Object.getOwnPropertyDescriptor(globalThis, 'document');
+    let announcedStyles: unknown = 'not-dispatched';
+
+    try {
+      Object.defineProperty(globalThis, 'window', {
+        value: {
+          __webui: {},
+          dispatchEvent(event: Event): boolean {
+            announcedStyles = (event as CustomEvent<{
+              componentStyles?: unknown;
+            }>).detail.componentStyles;
+            return true;
+          },
+        },
+        configurable: true,
+        writable: true,
+      });
+      Object.defineProperty(globalThis, 'document', {
+        value: { nodeType: 9 },
+        configurable: true,
+        writable: true,
+      });
+
+      registerTemplateData(
+        { 'style-card': { h: '<p>Styled</p>' } },
+        undefined,
+        {
+          version: 1,
+          strategy: 'style',
+          resources: {
+            'style-card': { kind: 'style', css: '.style-card{}' },
+          },
+          closures: { 'style-card': ['style-card'] },
+        },
+      );
+
+      assert.equal(announcedStyles, undefined);
+    } finally {
+      if (previousWindow) {
+        Object.defineProperty(globalThis, 'window', previousWindow);
+      } else {
+        Reflect.deleteProperty(globalThis, 'window');
+      }
+      if (previousDocument) {
+        Object.defineProperty(globalThis, 'document', previousDocument);
+      } else {
+        Reflect.deleteProperty(globalThis, 'document');
+      }
+    }
+  });
+
   test('getTemplate normalizes bootstrapped SSR metadata from window', () => {
     const previousWindow = Object.getOwnPropertyDescriptor(globalThis, 'window');
     const fn = (): boolean => false;
@@ -122,7 +175,7 @@ describe('template registry helpers', () => {
           getElementById(id: string) {
             if (id !== 'webui-data') return null;
             return {
-              textContent: '{"inventory":"0c","state":{"title":"Hello"},"templates":{"greeting":{"h":"<p></p>","b":[{"h":"<span></span>"}],"c":[[[0,["ready"]],0,[[],0]]]}}}',
+              textContent: '{"inventory":"0c","state":{"title":"Hello"},"componentStyles":{"version":1,"strategy":"style","resources":{},"closures":{}},"templates":{"greeting":{"h":"<p></p>","b":[{"h":"<span></span>"}],"c":[[[0,["ready"]],0,[[],0]]]}}}',
               remove() { removed = true; },
             };
           },
diff --git a/packages/webui-framework/src/template.ts b/packages/webui-framework/src/template.ts
index b035baa79..2ae424eba 100644
--- a/packages/webui-framework/src/template.ts
+++ b/packages/webui-framework/src/template.ts
@@ -13,7 +13,6 @@
  * - `r`  — repeat/for blocks `[collection, itemVar, blockIndex, slot, keyPath?]`
  * - `eg` — grouped element events `[eventName, [[handlerName, argSpecs, targetIndex, usesEvent?]]]`
  * - `b`  — nested compiled block metadata
- * - `sa` — adopted stylesheet specifier for CSS module strategy
  * - `sd` — shadow DOM flag for client-created components
  * - `re` — root events on the host element
  * - `tr` — state roots referenced by the compiled template
@@ -48,7 +47,18 @@ import {
   templateRegistrationDetail,
   TEMPLATES_REGISTERED_EVENT,
 } from './template-events.js';
-import { prepareRegisteredLinkStyles } from './element/link-styles.js';
+import {
+  prepareComponentStyles,
+  registerComponentStyles,
+  registerPreparedComponentStyles,
+  requireComponentStyles,
+  validateComponentStylesRegistration,
+  type ComponentStyles,
+} from './element/styles.js';
+import {
+  prepareComponentStyleLinks,
+  prepareRegisteredLinkStyles,
+} from './element/link-styles.js';
 
 import type {
   CompiledCondition,
@@ -74,8 +84,13 @@ const pendingTemplateDefinitions = new Map<string, PendingTemplateDefinition>();
 function acceptTemplateData(
   templates: Record<string, TemplateMeta>,
   templateFns?: Record<string, CompiledConditionFn[]>,
+  componentStyles?: ComponentStyles,
 ): boolean {
+  validateComponentStylesRegistration(componentStyles);
   prepareTemplateData(templates, templateFns);
+  if (componentStyles) {
+    registerPreparedComponentStyles(componentStyles);
+  }
   const w = window as Window;
   if (!w.__webui) w.__webui = {};
   if (!w.__webui.templates) w.__webui.templates = {};
@@ -102,12 +117,23 @@ function acceptTemplateData(
 }
 
 if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+  window.__webuiRegisterComponentStyles = (value: unknown): Promise<void> | undefined => {
+    const styles = requireComponentStyles(value);
+    validateComponentStylesRegistration(styles);
+    registerPreparedComponentStyles(styles);
+    return prepareComponentStyleLinks(styles);
+  };
+  if (window.__webui?.componentStyles) {
+    registerComponentStyles(window.__webui.componentStyles);
+  }
   window.addEventListener(TEMPLATES_REGISTERED_EVENT, (event: Event) => {
     const detail = templateRegistrationDetail(event);
-    const templates = detail?.templates;
-    if (!templates) return;
-    acceptTemplateData(templates);
-    const ready = prepareRegisteredLinkStyles(templates);
+    if (!detail?.templates) return;
+    const styles = detail.componentStyles === undefined
+      ? undefined
+      : prepareComponentStyles(detail.componentStyles);
+    acceptTemplateData(detail.templates, undefined, styles);
+    const ready = prepareRegisteredLinkStyles(detail.templates);
     if (ready) detail.waitUntil?.(ready);
   });
 }
@@ -119,12 +145,14 @@ declare global {
     templateFns?: Record<string, CompiledConditionFn[]>;
     componentAssetStyles?: Record<string, readonly string[]>;
     templateHostExclusions?: Set<string>;
+    componentStyles?: ComponentStyles;
     [key: string]: unknown;
   }
 
   interface Window {
     /** Consolidated SSR metadata loaded from `#webui-data` or partial responses. */
     __webui?: WebUIRuntimeGlobal;
+    __webuiRegisterComponentStyles?: (value: unknown) => Promise<void> | undefined;
   }
 }
 
@@ -159,8 +187,11 @@ export function getTemplateRegistry(): Record<string, TemplateMeta> | undefined
 export function registerTemplateData(
   templates: Record<string, TemplateMeta>,
   templateFns?: Record<string, CompiledConditionFn[]>,
+  componentStylesValue?: ComponentStyles | unknown,
 ): void {
-  if (acceptTemplateData(templates, templateFns)) {
+  const componentStyles = prepareComponentStyles(componentStylesValue);
+  if (acceptTemplateData(templates, templateFns, componentStyles)) {
+    // Styles were already accepted above; listeners only need the templates.
     dispatchTemplatesRegistered(templates);
   }
 }
@@ -233,7 +264,15 @@ function loadWebUIDataBlock(): void {
     const parsed = JSON.parse(text) as NonNullable<Window['__webui']>;
     if (templateFns) parsed.templateFns = templateFns;
     if (componentAssetStyles) parsed.componentAssetStyles = componentAssetStyles;
+    // Publish before registering styles. A malformed `componentStyles` throws,
+    // and doing it the other way round loses the templates and state that
+    // parsed fine — then re-parses the whole block on the next lookup, because
+    // nothing recorded that the work was already done.
     window.__webui = parsed;
+    el.remove();
+    webuiDataLoaded = true;
+    registerComponentStyles(parsed.componentStyles);
+    return;
   }
   el.remove();
   webuiDataLoaded = true;
diff --git a/packages/webui-framework/tests/fixtures/README.md b/packages/webui-framework/tests/fixtures/README.md
index 853b6526b..07bd66386 100644
--- a/packages/webui-framework/tests/fixtures/README.md
+++ b/packages/webui-framework/tests/fixtures/README.md
@@ -41,7 +41,7 @@ Static files (JS bundles, CSS) are served from the fixtures root as-is.
 ### Template syntax
 
 ```html
-<!-- Component template (shadow DOM) -->
+<!-- Unwrapped component template (Light DOM) -->
 <span>{{propertyName}}</span>
 <button @click="{handler()}">Click</button>
 <if condition="show"><p>Visible</p></if>
@@ -75,12 +75,17 @@ emits templates for **reachable** components.
 With `state.json`: `{ "showChild": false }`. This makes the child reachable (so its
 template metadata is emitted) without rendering it during SSR.
 
-## Light-DOM fixtures
+## DOM ownership fixtures
 
-The pipeline always produces shadow DOM. The `light-dom` fixture uses manual
-template registration (`registerCompiledTemplate`) and hand-written `fixture.html`
-to keep the light-DOM hydration code path tested. Use this pattern for any test
-that specifically targets light-DOM behavior.
+The real build pipeline produces Light DOM for unwrapped templates. Use ordinary
+source templates to test the production Light path. A sole bare top-level
+`<template>` is also an explicit Light wrapper, including in the default Shadow
+fixture. To test a Shadow component, make a sole top-level
+`<template shadowrootmode="open">` its complete template.
+
+The `light-dom` fixture exercises the unwrapped real-pipeline path and includes a
+component-level Shadow opt-in. Use manual template registration or hand-written
+fixture HTML only for tests that intentionally bypass the compiler.
 
 ## Per-fixture build config
 
@@ -90,4 +95,6 @@ Create `webui.config.json` to override build options:
 { "css": "module" }
 ```
 
-Supported keys: `css` (`"link"` | `"style"` | `"module"`).
+Supported keys: `css` (`"link"` | `"style"` | `"module"`), `dom`
+(`"shadow"` | `"light"`; Shadow is the default), and `script` (`"module"`;
+classic scripts are the default).
diff --git a/packages/webui-framework/tests/fixtures/basics/src/test-basics/test-basics.html b/packages/webui-framework/tests/fixtures/basics/src/test-basics/test-basics.html
index c981e03b6..e68a86cca 100644
--- a/packages/webui-framework/tests/fixtures/basics/src/test-basics/test-basics.html
+++ b/packages/webui-framework/tests/fixtures/basics/src/test-basics/test-basics.html
@@ -1,3 +1,4 @@
+<template shadowrootmode="open">
 <span class="greeting">{{greeting}}</span>, <span class="name">{{name}}</span>!
 <span class="count">{{count}}</span> (<span class="doubled">{{doubled}}</span>)
 <button class="inc" @click="{increment()}">+</button>
@@ -6,3 +7,4 @@
 <input class="text-input" @input="{onInput(e)}" @keydown="{onKeydown(e)}" />
 <span class="last-key">{{lastKey}}</span>
 <span class="input-value">{{inputValue}}</span>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-child/test-lifecycle-child.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-child/test-lifecycle-child.html
index 8e7f768d9..065af2f0e 100644
--- a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-child/test-lifecycle-child.html
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-child/test-lifecycle-child.html
@@ -1,3 +1,5 @@
+<template shadowrootmode="open">
 <div class="value">{{value}}</div>
 <div class="connected-value">{{connectedValue}}</div>
 <div class="fallback-applied">{{fallbackApplied}}</div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-parent/test-lifecycle-conditional-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-parent/test-lifecycle-conditional-parent.html
index c8129c016..b14779f46 100644
--- a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-parent/test-lifecycle-conditional-parent.html
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-parent/test-lifecycle-conditional-parent.html
@@ -1,3 +1,5 @@
+<template shadowrootmode="open">
 <if condition="show">
   <test-lifecycle-child :value="{{val}}"></test-lifecycle-child>
 </if>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-repeat-parent/test-lifecycle-conditional-repeat-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-repeat-parent/test-lifecycle-conditional-repeat-parent.html
index 18b32d708..b6adffcca 100644
--- a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-repeat-parent/test-lifecycle-conditional-repeat-parent.html
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-repeat-parent/test-lifecycle-conditional-repeat-parent.html
@@ -1,5 +1,7 @@
+<template shadowrootmode="open">
 <if condition="show">
   <for each="item in items">
     <test-lifecycle-child :value="{{item.value}}"></test-lifecycle-child>
   </for>
 </if>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-deep-keyed-nested-repeat-parent/test-lifecycle-deep-keyed-nested-repeat-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-deep-keyed-nested-repeat-parent/test-lifecycle-deep-keyed-nested-repeat-parent.html
index d60e7318e..2c65fd272 100644
--- a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-deep-keyed-nested-repeat-parent/test-lifecycle-deep-keyed-nested-repeat-parent.html
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-deep-keyed-nested-repeat-parent/test-lifecycle-deep-keyed-nested-repeat-parent.html
@@ -1,3 +1,4 @@
+<template shadowrootmode="open">
 <for each="group in groups">
   <span class="group-label" key="{{group.id}}">{{group.id}}</span>
   <for each="section in group.sections">
@@ -7,3 +8,4 @@
     </for>
   </for>
 </for>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-keyed-nested-repeat-parent/test-lifecycle-keyed-nested-repeat-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-keyed-nested-repeat-parent/test-lifecycle-keyed-nested-repeat-parent.html
index 0f9bae87d..905450819 100644
--- a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-keyed-nested-repeat-parent/test-lifecycle-keyed-nested-repeat-parent.html
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-keyed-nested-repeat-parent/test-lifecycle-keyed-nested-repeat-parent.html
@@ -1,6 +1,8 @@
+<template shadowrootmode="open">
 <for each="group in groups">
   <span class="group-label" key="{{group.id}}" data-id="{{group.id}}">{{group.id}}</span>
   <for each="item in group.items">
     <test-lifecycle-child key="{{item.id}}" :value="{{item.value}}"></test-lifecycle-child>
   </for>
 </for>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-nested-repeat-parent/test-lifecycle-nested-repeat-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-nested-repeat-parent/test-lifecycle-nested-repeat-parent.html
index 312c8b675..d60e4d2aa 100644
--- a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-nested-repeat-parent/test-lifecycle-nested-repeat-parent.html
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-nested-repeat-parent/test-lifecycle-nested-repeat-parent.html
@@ -1,5 +1,7 @@
+<template shadowrootmode="open">
 <for each="group in groups">
   <for each="item in group.items">
     <test-lifecycle-child :value="{{item.value}}"></test-lifecycle-child>
   </for>
 </for>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-parent/test-lifecycle-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-parent/test-lifecycle-parent.html
index 5d2d7770a..82d8cdfa7 100644
--- a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-parent/test-lifecycle-parent.html
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-parent/test-lifecycle-parent.html
@@ -1 +1 @@
-<test-lifecycle-child :value="{{val}}"></test-lifecycle-child>
+<template shadowrootmode="open"><test-lifecycle-child :value="{{val}}"></test-lifecycle-child></template>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-positional-nested-repeat-parent/test-lifecycle-positional-nested-repeat-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-positional-nested-repeat-parent/test-lifecycle-positional-nested-repeat-parent.html
index 903f6b0a6..111a15dbe 100644
--- a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-positional-nested-repeat-parent/test-lifecycle-positional-nested-repeat-parent.html
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-positional-nested-repeat-parent/test-lifecycle-positional-nested-repeat-parent.html
@@ -1,6 +1,8 @@
+<template shadowrootmode="open">
 <for each="group in groups">
   <span class="group-label" data-id="{{group.id}}">{{group.id}}</span>
   <for each="item in group.items">
     <test-lifecycle-child :value="{{item.value}}"></test-lifecycle-child>
   </for>
 </for>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-repeat-parent/test-lifecycle-repeat-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-repeat-parent/test-lifecycle-repeat-parent.html
index adb8181a7..96b5088f5 100644
--- a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-repeat-parent/test-lifecycle-repeat-parent.html
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-repeat-parent/test-lifecycle-repeat-parent.html
@@ -1,3 +1,5 @@
+<template shadowrootmode="open">
 <for each="item in items">
   <test-lifecycle-child :value="{{item.value}}"></test-lifecycle-child>
 </for>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-value-child/test-lifecycle-value-child.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-value-child/test-lifecycle-value-child.html
index 7c441bb1e..41ec3615b 100644
--- a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-value-child/test-lifecycle-value-child.html
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-value-child/test-lifecycle-value-child.html
@@ -1 +1 @@
-<span class="value">{{value}}</span>
+<template shadowrootmode="open"><span class="value">{{value}}</span></template>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-value-repeat-parent/test-lifecycle-value-repeat-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-value-repeat-parent/test-lifecycle-value-repeat-parent.html
index 43e108455..06b21b8de 100644
--- a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-value-repeat-parent/test-lifecycle-value-repeat-parent.html
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-value-repeat-parent/test-lifecycle-value-repeat-parent.html
@@ -1,3 +1,5 @@
+<template shadowrootmode="open">
 <for each="item in values">
   <test-lifecycle-value-child value="{{item.value}}"></test-lifecycle-value-child>
 </for>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/complex-prop/src/test-cond-child/test-cond-child.html b/packages/webui-framework/tests/fixtures/complex-prop/src/test-cond-child/test-cond-child.html
index 84d17bc77..6164d3169 100644
--- a/packages/webui-framework/tests/fixtures/complex-prop/src/test-cond-child/test-cond-child.html
+++ b/packages/webui-framework/tests/fixtures/complex-prop/src/test-cond-child/test-cond-child.html
@@ -1,4 +1,6 @@
+<template shadowrootmode="open">
 <if condition="data.showHeader">
   <div class="cond-header">{{data.label}}</div>
 </if>
 <div class="always">Always visible</div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-host/test-item-host.html b/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-host/test-item-host.html
index fe1666f1b..2e81a77ae 100644
--- a/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-host/test-item-host.html
+++ b/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-host/test-item-host.html
@@ -1,3 +1,4 @@
+<template shadowrootmode="open">
 <div class="controls">
   <button class="replace" @click="{replaceItems()}">Replace</button>
   <button class="clear" @click="{clearItems()}">Clear</button>
@@ -6,3 +7,4 @@
 <test-item-list :items="{{sourceItems}}"></test-item-list>
 <test-cond-child :data="{{condData}}"></test-cond-child>
 <test-delayed-prop-child :items="{{delayedItems}}"></test-delayed-prop-child>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-list/test-item-list.html b/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-list/test-item-list.html
index 1acd1cdb0..eb7d4f308 100644
--- a/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-list/test-item-list.html
+++ b/packages/webui-framework/tests/fixtures/complex-prop/src/test-item-list/test-item-list.html
@@ -1,5 +1,7 @@
+<template shadowrootmode="open">
 <ul class="list">
   <for each="item in items">
     <li class="item">{{item.name}}</li>
   </for>
 </ul>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/composed-root-event/src/test-parent/test-parent.html b/packages/webui-framework/tests/fixtures/composed-root-event/src/test-parent/test-parent.html
index e4bcff59c..2539353a6 100644
--- a/packages/webui-framework/tests/fixtures/composed-root-event/src/test-parent/test-parent.html
+++ b/packages/webui-framework/tests/fixtures/composed-root-event/src/test-parent/test-parent.html
@@ -1,4 +1,6 @@
+<template shadowrootmode="open">
 <div class="list">
   <test-child item-id="alpha"></test-child>
   <test-child item-id="beta"></test-child>
 </div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/conditional-component/src/test-child-comp/test-child-comp.html b/packages/webui-framework/tests/fixtures/conditional-component/src/test-child-comp/test-child-comp.html
index f02f9ecb0..26960d213 100644
--- a/packages/webui-framework/tests/fixtures/conditional-component/src/test-child-comp/test-child-comp.html
+++ b/packages/webui-framework/tests/fixtures/conditional-component/src/test-child-comp/test-child-comp.html
@@ -1 +1 @@
-<span class="child-text">{{label}}</span>
+<template shadowrootmode="open"><span class="child-text">{{label}}</span></template>
diff --git a/packages/webui-framework/tests/fixtures/conditional-component/src/test-cond-parent/test-cond-parent.html b/packages/webui-framework/tests/fixtures/conditional-component/src/test-cond-parent/test-cond-parent.html
index a43dcbdd1..8113f3c56 100644
--- a/packages/webui-framework/tests/fixtures/conditional-component/src/test-cond-parent/test-cond-parent.html
+++ b/packages/webui-framework/tests/fixtures/conditional-component/src/test-cond-parent/test-cond-parent.html
@@ -1,4 +1,6 @@
+<template shadowrootmode="open">
 <button class="toggle" @click="{toggleShow()}">Toggle</button>
 <if condition="show">
   <test-child-comp></test-child-comp>
 </if>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/conditional-component/src/test-grandchild-comp/test-grandchild-comp.html b/packages/webui-framework/tests/fixtures/conditional-component/src/test-grandchild-comp/test-grandchild-comp.html
index f447376dc..5af660863 100644
--- a/packages/webui-framework/tests/fixtures/conditional-component/src/test-grandchild-comp/test-grandchild-comp.html
+++ b/packages/webui-framework/tests/fixtures/conditional-component/src/test-grandchild-comp/test-grandchild-comp.html
@@ -1 +1 @@
-<span class="grandchild-text">{{message}}</span>
+<template shadowrootmode="open"><span class="grandchild-text">{{message}}</span></template>
diff --git a/packages/webui-framework/tests/fixtures/conditional-component/src/test-mid-comp/test-mid-comp.html b/packages/webui-framework/tests/fixtures/conditional-component/src/test-mid-comp/test-mid-comp.html
index 807710db0..49629cfbb 100644
--- a/packages/webui-framework/tests/fixtures/conditional-component/src/test-mid-comp/test-mid-comp.html
+++ b/packages/webui-framework/tests/fixtures/conditional-component/src/test-mid-comp/test-mid-comp.html
@@ -1,4 +1,6 @@
+<template shadowrootmode="open">
 <span class="mid-label">Mid</span>
 <if condition="inner">
   <test-grandchild-comp></test-grandchild-comp>
 </if>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/conditional-component/src/test-nested-cond-parent/test-nested-cond-parent.html b/packages/webui-framework/tests/fixtures/conditional-component/src/test-nested-cond-parent/test-nested-cond-parent.html
index 3affe766e..e4c8555bd 100644
--- a/packages/webui-framework/tests/fixtures/conditional-component/src/test-nested-cond-parent/test-nested-cond-parent.html
+++ b/packages/webui-framework/tests/fixtures/conditional-component/src/test-nested-cond-parent/test-nested-cond-parent.html
@@ -1,4 +1,6 @@
+<template shadowrootmode="open">
 <button class="toggle" @click="{toggleShow()}">Toggle</button>
 <if condition="show">
   <test-mid-comp></test-mid-comp>
 </if>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-client/test-conditional-client.html b/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-client/test-conditional-client.html
index 551806fe2..645176c10 100644
--- a/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-client/test-conditional-client.html
+++ b/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-client/test-conditional-client.html
@@ -1,4 +1,6 @@
+<template shadowrootmode="open">
 <button class="toggle" @click="{toggleOpen()}" ?disabled="{{busy}}">Toggle</button>
 <if condition="open">
   <span class="details">{{details}}</span>
 </if>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-hydration-ranges/test-conditional-hydration-ranges.html b/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-hydration-ranges/test-conditional-hydration-ranges.html
index e1d4c1137..3861ea58a 100644
--- a/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-hydration-ranges/test-conditional-hydration-ranges.html
+++ b/packages/webui-framework/tests/fixtures/conditional/src/test-conditional-hydration-ranges/test-conditional-hydration-ranges.html
@@ -1,3 +1,4 @@
+<template shadowrootmode="open">
 <button class="mismatch-toggle" @click="{toggleClientOnlyOpen()}">Toggle mismatch</button>
 <if condition="clientOnlyOpen">
   <span class="mismatch-details">Client-only details</span>
@@ -10,3 +11,4 @@
   <div class="outer-details">Outer details</div>
 </if>
 <div class="static-sibling">Static sibling</div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/conditional/src/test-conditional/test-conditional.html b/packages/webui-framework/tests/fixtures/conditional/src/test-conditional/test-conditional.html
index d197a086f..ee1d73cbd 100644
--- a/packages/webui-framework/tests/fixtures/conditional/src/test-conditional/test-conditional.html
+++ b/packages/webui-framework/tests/fixtures/conditional/src/test-conditional/test-conditional.html
@@ -1,3 +1,4 @@
+<template shadowrootmode="open">
 <button class="toggle" @click="{toggleOpen()}" ?disabled="{{busy}}">Toggle</button>
 <if condition="open">
   <span class="details">{{details}}</span>
@@ -14,3 +15,4 @@
 <if condition="count > 0">
   <span class="gt-zero">Positive</span>
 </if>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/css-module/css-module.spec.ts b/packages/webui-framework/tests/fixtures/css-module/css-module.spec.ts
index 18de9e292..b95c534cf 100644
--- a/packages/webui-framework/tests/fixtures/css-module/css-module.spec.ts
+++ b/packages/webui-framework/tests/fixtures/css-module/css-module.spec.ts
@@ -10,7 +10,7 @@ test.describe('css module fixture', () => {
   });
 
   test('client-created components adopt module styles from registered specifiers', async ({ page }) => {
-    // Wait for async CSS module injection (import().then() in injectModuleStyle)
+    // Wait for async CSS module injection (import().then() in installModule)
     await expect(async () => {
       const hostColor = await page.locator('test-module-host').evaluate((host) => {
         const label = (host.shadowRoot ?? host).querySelector('.host-label');
diff --git a/packages/webui-framework/tests/fixtures/dom-default/dom-default.spec.ts b/packages/webui-framework/tests/fixtures/dom-default/dom-default.spec.ts
new file mode 100644
index 000000000..eec60b4a6
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/dom-default/dom-default.spec.ts
@@ -0,0 +1,83 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { expect, test } from '@playwright/test';
+
+test('unwrapped components default to Shadow DOM and support slots', async ({ page }) => {
+  await page.goto('/dom-default/fixture.html');
+  const host = page.locator('#default-shadow');
+
+  await expect(host).toHaveJSProperty('$ready', true);
+  const result = await host.evaluate((element) => {
+    const root = element.shadowRoot;
+    const slot = root?.querySelector('slot');
+    const label = root?.querySelector('.label');
+    return {
+      hasShadow: !!root,
+      lightMarker: element.hasAttribute('data-wl'),
+      label: label?.textContent,
+      labelColor: label instanceof HTMLElement ? getComputedStyle(label).color : null,
+      projected: slot instanceof HTMLSlotElement
+        ? slot.assignedElements().map(child => child.textContent?.trim())
+        : [],
+      resources: root
+        ? Array.from(root.children)
+          .filter(child => child.hasAttribute('data-webui-resource'))
+          .map(child => child.getAttribute('data-webui-resource'))
+        : [],
+    };
+  });
+
+  expect(result).toEqual({
+    hasShadow: true,
+    lightMarker: false,
+    label: 'Default shadow',
+    labelColor: 'rgb(12, 34, 56)',
+    projected: ['Projected content'],
+    resources: ['test-shadow-default'],
+  });
+  await expect(host.locator(':scope > .projected')).toHaveCSS('color', 'rgb(128, 0, 128)');
+
+  const reconnected = await host.evaluate((element) => {
+    const parent = element.parentElement;
+    if (!parent) throw new Error('default Shadow host has no parent');
+    element.remove();
+    parent.appendChild(element);
+    const root = element.shadowRoot;
+    const label = root?.querySelector('.label');
+    return {
+      detail: root?.querySelector('.detail')?.textContent?.trim(),
+      labelColor: label instanceof HTMLElement ? getComputedStyle(label).color : null,
+      resources: root
+        ? Array.from(root.children)
+          .filter(child => child.hasAttribute('data-webui-resource'))
+          .map(child => child.getAttribute('data-webui-resource'))
+        : [],
+    };
+  });
+  expect(reconnected).toEqual({
+    detail: 'Structural detail',
+    labelColor: 'rgb(12, 34, 56)',
+    resources: ['test-shadow-default'],
+  });
+});
+
+test('a sole bare template explicitly opts out of the Shadow fallback', async ({ page }) => {
+  await page.goto('/dom-default/fixture.html');
+  const host = page.locator('#explicit-light');
+
+  await expect(host).toHaveJSProperty('$ready', true);
+  await expect(host.locator(':scope > .label')).toHaveText('Explicit light');
+  await expect(host.locator(':scope > .label')).toHaveCSS(
+    'color',
+    'rgb(0, 128, 0)',
+  );
+  const result = await host.evaluate((element) => ({
+    hasShadow: !!element.shadowRoot,
+    childTags: Array.from(element.children).map(child => child.localName),
+  }));
+  expect(result).toEqual({
+    hasShadow: false,
+    childTags: ['span'],
+  });
+});
diff --git a/packages/webui-framework/tests/fixtures/dom-default/src/index.html b/packages/webui-framework/tests/fixtures/dom-default/src/index.html
new file mode 100644
index 000000000..b529f6b7b
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/dom-default/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Default DOM strategy</title>
+</head>
+<body>
+  <test-shadow-default id="default-shadow">
+    <span class="projected">Projected content</span>
+  </test-shadow-default>
+  <test-explicit-light id="explicit-light"></test-explicit-light>
+</body>
+</html>
diff --git a/packages/webui-framework/tests/fixtures/dom-default/src/test-explicit-light/test-explicit-light.css b/packages/webui-framework/tests/fixtures/dom-default/src/test-explicit-light/test-explicit-light.css
new file mode 100644
index 000000000..cf3cafd5b
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/dom-default/src/test-explicit-light/test-explicit-light.css
@@ -0,0 +1,3 @@
+.label {
+  color: rgb(0, 128, 0);
+}
diff --git a/packages/webui-framework/tests/fixtures/dom-default/src/test-explicit-light/test-explicit-light.html b/packages/webui-framework/tests/fixtures/dom-default/src/test-explicit-light/test-explicit-light.html
new file mode 100644
index 000000000..ab09e3a22
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/dom-default/src/test-explicit-light/test-explicit-light.html
@@ -0,0 +1,3 @@
+<template>
+  <span class="label">Explicit light</span>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/dom-default/src/test-shadow-default/test-shadow-default.css b/packages/webui-framework/tests/fixtures/dom-default/src/test-shadow-default/test-shadow-default.css
new file mode 100644
index 000000000..9c9c04ff7
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/dom-default/src/test-shadow-default/test-shadow-default.css
@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+
+.label {
+  color: rgb(12, 34, 56);
+}
+
+::slotted(.projected) {
+  color: rgb(128, 0, 128);
+}
diff --git a/packages/webui-framework/tests/fixtures/dom-default/src/test-shadow-default/test-shadow-default.html b/packages/webui-framework/tests/fixtures/dom-default/src/test-shadow-default/test-shadow-default.html
new file mode 100644
index 000000000..53c0a1fee
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/dom-default/src/test-shadow-default/test-shadow-default.html
@@ -0,0 +1,7 @@
+<section class="surface">
+  <span class="label">Default shadow</span>
+  <if condition="showDetail">
+    <span class="detail">Structural detail</span>
+  </if>
+  <slot></slot>
+</section>
diff --git a/packages/webui-framework/tests/fixtures/dom-default/state.json b/packages/webui-framework/tests/fixtures/dom-default/state.json
new file mode 100644
index 000000000..5490be903
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/dom-default/state.json
@@ -0,0 +1,3 @@
+{
+  "showDetail": true
+}
diff --git a/packages/webui-framework/tests/fixtures/dom-default/webui.config.json b/packages/webui-framework/tests/fixtures/dom-default/webui.config.json
new file mode 100644
index 000000000..407ff5ffe
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/dom-default/webui.config.json
@@ -0,0 +1,3 @@
+{
+  "css": "style"
+}
diff --git a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-after-super/mismatch-after-super.html b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-after-super/mismatch-after-super.html
index ca6b8d254..a566c5b8f 100644
--- a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-after-super/mismatch-after-super.html
+++ b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-after-super/mismatch-after-super.html
@@ -1,3 +1,5 @@
+<template shadowrootmode="open">
 <div class="box" data-value="{{value}}" w-ref="{box}">
   <if condition="show"><span class="content">CONTENT</span></if>
 </div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-before-super/mismatch-before-super.html b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-before-super/mismatch-before-super.html
index b0b8ad6f2..fb3a2b24a 100644
--- a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-before-super/mismatch-before-super.html
+++ b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-before-super/mismatch-before-super.html
@@ -1,3 +1,5 @@
+<template shadowrootmode="open">
 <div class="box" data-value="{{value}}">
   <if condition="show"><span class="content">CONTENT</span></if>
 </div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-constructor/mismatch-constructor.html b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-constructor/mismatch-constructor.html
index b0b8ad6f2..fb3a2b24a 100644
--- a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-constructor/mismatch-constructor.html
+++ b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-constructor/mismatch-constructor.html
@@ -1,3 +1,5 @@
+<template shadowrootmode="open">
 <div class="box" data-value="{{value}}">
   <if condition="show"><span class="content">CONTENT</span></if>
 </div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-deferred/mismatch-deferred.html b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-deferred/mismatch-deferred.html
index b0b8ad6f2..fb3a2b24a 100644
--- a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-deferred/mismatch-deferred.html
+++ b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-deferred/mismatch-deferred.html
@@ -1,3 +1,5 @@
+<template shadowrootmode="open">
 <div class="box" data-value="{{value}}">
   <if condition="show"><span class="content">CONTENT</span></if>
 </div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-field-default/mismatch-field-default.html b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-field-default/mismatch-field-default.html
index b0b8ad6f2..fb3a2b24a 100644
--- a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-field-default/mismatch-field-default.html
+++ b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-field-default/mismatch-field-default.html
@@ -1,3 +1,5 @@
+<template shadowrootmode="open">
 <div class="box" data-value="{{value}}">
   <if condition="show"><span class="content">CONTENT</span></if>
 </div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-seeded/mismatch-seeded.html b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-seeded/mismatch-seeded.html
index 257d86f7d..c4023ea11 100644
--- a/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-seeded/mismatch-seeded.html
+++ b/packages/webui-framework/tests/fixtures/hydration-mismatch/src/mismatch-seeded/mismatch-seeded.html
@@ -1,3 +1,5 @@
+<template shadowrootmode="open">
 <div class="box" data-value="{{seededValue}}">
   <if condition="seededShow"><span class="content">CONTENT</span></if>
 </div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/lazy-hydration-ordinary-data-ws/webui.config.json b/packages/webui-framework/tests/fixtures/lazy-hydration-ordinary-data-ws/webui.config.json
index 36c920028..5d66e51e1 100644
--- a/packages/webui-framework/tests/fixtures/lazy-hydration-ordinary-data-ws/webui.config.json
+++ b/packages/webui-framework/tests/fixtures/lazy-hydration-ordinary-data-ws/webui.config.json
@@ -1,3 +1,4 @@
 {
-  "script": "module"
+  "script": "module",
+  "dom": "light"
 }
diff --git a/packages/webui-framework/tests/fixtures/lazy-hydration/lazy-hydration.spec.ts b/packages/webui-framework/tests/fixtures/lazy-hydration/lazy-hydration.spec.ts
index 9559d5e4d..bd1365d7d 100644
--- a/packages/webui-framework/tests/fixtures/lazy-hydration/lazy-hydration.spec.ts
+++ b/packages/webui-framework/tests/fixtures/lazy-hydration/lazy-hydration.spec.ts
@@ -355,7 +355,7 @@ test.describe('component lazy hydration', () => {
       };
       const parent = document.querySelector('#streamed-nested') as
         BoundaryActivatable;
-      const child = parent.shadowRoot?.querySelector(
+      const child = parent.querySelector(
         '#streamed-nested-child',
       ) as BoundaryActivatable;
       const boundaryState = { note: 'Streamed boundary note' };
@@ -686,7 +686,7 @@ test.describe('component lazy hydration', () => {
         deferred: host.$deferredSSR,
         hydrated: host.$hydrated,
         note: host.note,
-        text: host.shadowRoot?.querySelector('.note')?.textContent,
+        text: host.querySelector('.note')?.textContent,
         tornDown,
       };
     });
@@ -1263,7 +1263,7 @@ test.describe('component lazy hydration', () => {
         hydrated: host.$hydrated,
         mountedEagerly,
         note: host.note,
-        text: host.shadowRoot?.querySelector('.note')?.textContent,
+        text: host.querySelector('.note')?.textContent,
         tornDown,
       };
     });
diff --git a/packages/webui-framework/tests/fixtures/lazy-hydration/src/test-shadow-policy-parent/test-shadow-policy-parent.html b/packages/webui-framework/tests/fixtures/lazy-hydration/src/test-shadow-policy-parent/test-shadow-policy-parent.html
index ca14c8bef..c9504883b 100644
--- a/packages/webui-framework/tests/fixtures/lazy-hydration/src/test-shadow-policy-parent/test-shadow-policy-parent.html
+++ b/packages/webui-framework/tests/fixtures/lazy-hydration/src/test-shadow-policy-parent/test-shadow-policy-parent.html
@@ -1,13 +1,15 @@
-<section>
-  <test-offscreen-item
-    id="shadow-render-offscreen"
-    label="Shadow offscreen"
-    count="0"
-  ></test-offscreen-item>
-  <test-offscreen-item
-    id="shadow-render-eager"
-    w-render="eager"
-    label="Shadow eager"
-    count="0"
-  ></test-offscreen-item>
-</section>
+<template shadowrootmode="open">
+  <section>
+    <test-offscreen-item
+      id="shadow-render-offscreen"
+      label="Shadow offscreen"
+      count="0"
+    ></test-offscreen-item>
+    <test-offscreen-item
+      id="shadow-render-eager"
+      w-render="eager"
+      label="Shadow eager"
+      count="0"
+    ></test-offscreen-item>
+  </section>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/lazy-hydration/webui.config.json b/packages/webui-framework/tests/fixtures/lazy-hydration/webui.config.json
index 407ff5ffe..fbc821045 100644
--- a/packages/webui-framework/tests/fixtures/lazy-hydration/webui.config.json
+++ b/packages/webui-framework/tests/fixtures/lazy-hydration/webui.config.json
@@ -1,3 +1,4 @@
 {
-  "css": "style"
+  "css": "style",
+  "dom": "light"
 }
diff --git a/packages/webui-framework/tests/fixtures/light-dom/element.ts b/packages/webui-framework/tests/fixtures/light-dom/element.ts
index 41fe9f217..182c889b9 100644
--- a/packages/webui-framework/tests/fixtures/light-dom/element.ts
+++ b/packages/webui-framework/tests/fixtures/light-dom/element.ts
@@ -1,29 +1,27 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-/**
- * Dedicated light-DOM hydration fixture.
- *
- * The pipeline always produces shadow DOM, so this fixture uses manual
- * template registration and hand-written SSR HTML to keep the light-DOM
- * hydration code path tested.
- */
-
 import { WebUIElement, observable } from '../../../src/index.js';
-import { registerCompiledTemplate } from '@microsoft/webui-test-support';
-
-registerCompiledTemplate('test-light-dom', {
-  h: '<span class="greeting"></span> <span class="name"></span>!',
-  tx: [
-    // Pre-order element indices: 1 is .greeting, 2 is .name.
-    [[1, 0], [['greeting']]],
-    [[2, 0], [['name']]],
-  ],
-});
 
 export class TestLightDom extends WebUIElement {
   @observable greeting = 'Hello';
   @observable name = 'World';
+
+  spawnChild(): void {
+    const container = this.querySelector('.client-children');
+    if (container) {
+      container.appendChild(document.createElement('test-light-child'));
+    }
+  }
 }
 
+export class TestLightChild extends WebUIElement {}
+
+export class TestShadowOptIn extends WebUIElement {}
+
+export class TestShadowLightChild extends WebUIElement {}
+
 TestLightDom.define('test-light-dom');
+TestLightChild.define('test-light-child');
+TestShadowOptIn.define('test-shadow-opt-in');
+TestShadowLightChild.define('test-shadow-light-child');
diff --git a/packages/webui-framework/tests/fixtures/light-dom/light-dom.spec.ts b/packages/webui-framework/tests/fixtures/light-dom/light-dom.spec.ts
index b57c0b4aa..796174248 100644
--- a/packages/webui-framework/tests/fixtures/light-dom/light-dom.spec.ts
+++ b/packages/webui-framework/tests/fixtures/light-dom/light-dom.spec.ts
@@ -1,43 +1,141 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-/**
- * Tests light-DOM hydration — the framework code path where components
- * render without shadow DOM.  The pipeline always produces shadow DOM,
- * so this fixture uses manual template registration and hand-written
- * SSR HTML to keep the light-DOM path covered.
- */
-
 import { expect, test } from '@playwright/test';
 
-test.describe('light-dom hydration', () => {
+test.describe('light-dom pipeline', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/light-dom/fixture.html');
-    await page.waitForFunction(() => {
-      const el = document.querySelector('test-light-dom');
-      return el && (el as any).$ready === true;
-    });
+    await expect(page.locator('#light-root')).toHaveJSProperty('$ready', true);
+    await expect(page.locator('#shadow-opt-in')).toHaveJSProperty('$ready', true);
   });
 
-  test('hydrates SSR text content in light DOM', async ({ page }) => {
+  test('unwrapped component uses Light DOM and applies global CSS', async ({ page }) => {
     await expect(page.locator('test-light-dom .greeting')).toHaveText('Hello');
     await expect(page.locator('test-light-dom .name')).toHaveText('World');
+    await expect(page.locator('test-light-dom .greeting')).toHaveCSS(
+      'color',
+      'rgb(12, 34, 56)',
+    );
+    await expect(page.locator('test-light-dom .greeting')).toHaveCSS(
+      'background-color',
+      'rgb(255, 0, 0)',
+    );
+    await expect(page.locator('test-light-dom .child-boundary')).toHaveCSS(
+      'border-top-width',
+      '5px',
+    );
+
+    const result = await page.locator('#light-root').evaluate((host) => {
+      return {
+        hasShadow: !!host.shadowRoot,
+        hasLightMarker: host.hasAttribute('data-wl'),
+        globalCss: Array.from(
+          document.head.querySelectorAll('style[data-webui-resource]'),
+          style => style.textContent,
+        ).some(css => css?.includes('.greeting')),
+      };
+    });
+    expect(result).toEqual({
+      hasShadow: false,
+      hasLightMarker: false,
+      globalCss: true,
+    });
   });
 
-  test('does NOT create a shadow root', async ({ page }) => {
-    const hasShadow = await page.evaluate(() =>
-      !!document.querySelector('test-light-dom')?.shadowRoot,
+  test('installs the Light parent/child closure in order and deduplicates client mounts', async ({ page }) => {
+    const resourceIds = () => page.locator(
+      'head > [data-webui-resource]',
+    ).evaluateAll(elements => elements.map(
+      element => element.getAttribute('data-webui-resource'),
+    ));
+
+    expect(await resourceIds()).toEqual(['test-light-dom', 'test-light-child']);
+    await expect(page.locator('#light-root > .child-boundary > test-light-child')).toHaveCount(2);
+
+    await page.locator('#light-root').evaluate((host) => {
+      const spawnChild = Reflect.get(host, 'spawnChild');
+      if (typeof spawnChild !== 'function') {
+        throw new Error('Missing spawnChild()');
+      }
+      Reflect.apply(spawnChild, host, []);
+    });
+
+    await expect(page.locator('.client-children > test-light-child')).toHaveCount(1);
+    await expect(page.locator('.client-children .child-label')).toHaveCSS(
+      'color',
+      'rgb(34, 139, 34)',
+    );
+    expect(await resourceIds()).toEqual(['test-light-dom', 'test-light-child']);
+  });
+
+  test('global Light CSS reaches nested Light hosts and internals', async ({ page }) => {
+    const child = page.locator('test-light-child').first();
+
+    // The nested host is declared by the parent template, and global CSS
+    // applies its host rule normally.
+    await expect(child).toHaveCSS('outline-color', 'rgb(1, 2, 3)');
+    await expect(child).toHaveCSS('display', 'block');
+
+    // The parent and child both use `.child-label`; the child stylesheet is
+    // later in the closure, so its rule wins by normal cascade order.
+    await expect(child.locator('.child-label')).toHaveCSS(
+      'color',
+      'rgb(34, 139, 34)',
     );
-    expect(hasShadow).toBe(false);
+
+    await expect(child).not.toHaveAttribute('data-wl');
+    const markerNames = await child.evaluate((host) => [
+      ...host.getAttributeNames(),
+      ...(host.querySelector('.child-label')?.getAttributeNames() ?? []),
+    ].filter(name => name.startsWith('data-wl')));
+    expect(markerNames).toEqual([]);
   });
 
-  test('updates @observable reactively in light DOM', async ({ page }) => {
-    await page.evaluate(() => {
-      (document.querySelector('test-light-dom') as any).greeting = 'Hi';
-      (document.querySelector('test-light-dom') as any).name = 'WebUI';
+  test('Shadow opt-in cuts the Document closure and projects a native slot', async ({ page }) => {
+    const result = await page.locator('#shadow-opt-in').evaluate((host) => {
+      const root = host.shadowRoot;
+      const slot = root?.querySelector('slot');
+      return {
+        hasShadow: !!root,
+        lightMarker: host.hasAttribute('data-wl'),
+        projected: slot instanceof HTMLSlotElement
+          ? slot.assignedElements().map(element => element.textContent?.trim())
+          : [],
+        resourceIds: root
+          ? Array.from(root.children)
+            .filter(element => element.hasAttribute('data-webui-resource'))
+            .map(element => element.getAttribute('data-webui-resource'))
+          : [],
+        nestedLightMarkerCount: root?.querySelectorAll(
+          'test-shadow-light-child[data-wl]',
+        ).length ?? 0,
+        nestedColor: (() => {
+          const label = root?.querySelector('.nested-label');
+          return label instanceof HTMLElement ? getComputedStyle(label).color : null;
+        })(),
+      };
     });
 
-    await expect(page.locator('test-light-dom .greeting')).toHaveText('Hi');
-    await expect(page.locator('test-light-dom .name')).toHaveText('WebUI');
+    expect(result).toEqual({
+      hasShadow: true,
+      lightMarker: false,
+      projected: ['Projected label'],
+      resourceIds: ['test-shadow-opt-in', 'test-shadow-light-child'],
+      nestedLightMarkerCount: 0,
+      nestedColor: 'rgb(70, 130, 180)',
+    });
+    await expect(page.locator('#shadow-opt-in > .projected')).toHaveCSS(
+      'color',
+      'rgb(128, 0, 128)',
+    );
+
+    const documentResources = await page.locator(
+      'head > [data-webui-resource]',
+    ).evaluateAll(elements => elements.map(
+      element => element.getAttribute('data-webui-resource'),
+    ));
+    expect(documentResources).not.toContain('test-shadow-opt-in');
+    expect(documentResources).not.toContain('test-shadow-light-child');
   });
 });
diff --git a/packages/webui-framework/tests/fixtures/light-dom/src/index.html b/packages/webui-framework/tests/fixtures/light-dom/src/index.html
new file mode 100644
index 000000000..b6c9c9d37
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/light-dom/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Light DOM Pipeline</title>
+</head>
+<body>
+  <div class="outside">
+    <test-light-dom id="light-root"></test-light-dom>
+  </div>
+</body>
+</html>
diff --git a/packages/webui-framework/tests/fixtures/light-dom/src/test-light-child/test-light-child.css b/packages/webui-framework/tests/fixtures/light-dom/src/test-light-child/test-light-child.css
new file mode 100644
index 000000000..f21239e78
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/light-dom/src/test-light-child/test-light-child.css
@@ -0,0 +1,3 @@
+.child-label {
+  color: rgb(34, 139, 34);
+}
diff --git a/packages/webui-framework/tests/fixtures/light-dom/src/test-light-child/test-light-child.html b/packages/webui-framework/tests/fixtures/light-dom/src/test-light-child/test-light-child.html
new file mode 100644
index 000000000..df731c82c
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/light-dom/src/test-light-child/test-light-child.html
@@ -0,0 +1 @@
+<p class="child-label">Light child</p>
diff --git a/packages/webui-framework/tests/fixtures/light-dom/src/test-light-dom/test-light-dom.css b/packages/webui-framework/tests/fixtures/light-dom/src/test-light-dom/test-light-dom.css
new file mode 100644
index 000000000..8acb986bf
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/light-dom/src/test-light-dom/test-light-dom.css
@@ -0,0 +1,27 @@
+.greeting {
+  color: rgb(12, 34, 56);
+}
+
+/* Global Light CSS can inspect the external ancestor normally. */
+:is(.outside .greeting) {
+  background: rgb(255, 0, 0);
+}
+
+/* A relational selector can inspect nested Light component internals. */
+.child-boundary:has(.child-label) {
+  border: 5px solid rgb(255, 0, 0);
+}
+
+/*
+ * This deliberately collides with the child rule. The parent rule appears
+ * first in the global Light CSS closure, so the child rule wins normally.
+ */
+.child-label {
+  color: rgb(200, 0, 0);
+}
+
+/* The nested host is declared here, so the parent may style its box. */
+test-light-child {
+  display: block;
+  outline: 1px solid rgb(1, 2, 3);
+}
diff --git a/packages/webui-framework/tests/fixtures/light-dom/src/test-light-dom/test-light-dom.html b/packages/webui-framework/tests/fixtures/light-dom/src/test-light-dom/test-light-dom.html
new file mode 100644
index 000000000..4ea680d06
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/light-dom/src/test-light-dom/test-light-dom.html
@@ -0,0 +1,8 @@
+<p><span class="greeting">{{greeting}}</span> <span class="name">{{name}}</span></p>
+<div class="child-boundary">
+  <test-light-child></test-light-child>
+  <test-light-child></test-light-child>
+</div>
+<button class="spawn" @click="{spawnChild()}">Spawn child</button>
+<div class="client-children"></div>
+<test-shadow-opt-in id="shadow-opt-in"><span class="projected">Projected label</span></test-shadow-opt-in>
diff --git a/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-light-child/test-shadow-light-child.css b/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-light-child/test-shadow-light-child.css
new file mode 100644
index 000000000..6bf00a822
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-light-child/test-shadow-light-child.css
@@ -0,0 +1,3 @@
+.nested-label {
+  color: rgb(70, 130, 180);
+}
diff --git a/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-light-child/test-shadow-light-child.html b/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-light-child/test-shadow-light-child.html
new file mode 100644
index 000000000..20c5db6e2
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-light-child/test-shadow-light-child.html
@@ -0,0 +1 @@
+<p class="nested-label">Nested Light child</p>
diff --git a/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-opt-in/test-shadow-opt-in.css b/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-opt-in/test-shadow-opt-in.css
new file mode 100644
index 000000000..c562b7acc
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-opt-in/test-shadow-opt-in.css
@@ -0,0 +1,3 @@
+::slotted(.projected) {
+  color: rgb(128, 0, 128);
+}
diff --git a/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-opt-in/test-shadow-opt-in.html b/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-opt-in/test-shadow-opt-in.html
new file mode 100644
index 000000000..bc401a80f
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/light-dom/src/test-shadow-opt-in/test-shadow-opt-in.html
@@ -0,0 +1,5 @@
+<template shadowrootmode="open">
+  <div class="shadow-frame"><slot></slot></div>
+  <test-shadow-light-child></test-shadow-light-child>
+  <test-shadow-light-child></test-shadow-light-child>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/light-dom/state.json b/packages/webui-framework/tests/fixtures/light-dom/state.json
new file mode 100644
index 000000000..34db28db7
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/light-dom/state.json
@@ -0,0 +1,4 @@
+{
+  "greeting": "Hello",
+  "name": "World"
+}
diff --git a/packages/webui-framework/tests/fixtures/light-dom/webui.config.json b/packages/webui-framework/tests/fixtures/light-dom/webui.config.json
new file mode 100644
index 000000000..fbc821045
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/light-dom/webui.config.json
@@ -0,0 +1,4 @@
+{
+  "css": "style",
+  "dom": "light"
+}
diff --git a/packages/webui-framework/tests/fixtures/list/src/test-list-item/test-list-item.html b/packages/webui-framework/tests/fixtures/list/src/test-list-item/test-list-item.html
index f5ab554c5..19e916d5f 100644
--- a/packages/webui-framework/tests/fixtures/list/src/test-list-item/test-list-item.html
+++ b/packages/webui-framework/tests/fixtures/list/src/test-list-item/test-list-item.html
@@ -1,3 +1,4 @@
+<template shadowrootmode="open">
 <article class="item">
   <button class="toggle" @click="{onToggle()}">Toggle</button>
   <span class="title">{{title}}</span>
@@ -5,3 +6,4 @@
     <span class="done">Done</span>
   </if>
 </article>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/multi-repeat/src/test-multi-repeat/test-multi-repeat.html b/packages/webui-framework/tests/fixtures/multi-repeat/src/test-multi-repeat/test-multi-repeat.html
index 8a40a2678..d55beef99 100644
--- a/packages/webui-framework/tests/fixtures/multi-repeat/src/test-multi-repeat/test-multi-repeat.html
+++ b/packages/webui-framework/tests/fixtures/multi-repeat/src/test-multi-repeat/test-multi-repeat.html
@@ -1,3 +1,4 @@
+<template shadowrootmode="open">
 <ul class="list-a">
   <for each="item in items">
     <li>
@@ -22,3 +23,4 @@
     </li>
   </for>
 </ul>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat-keyed-chain/test-nested-repeat-keyed-chain.html b/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat-keyed-chain/test-nested-repeat-keyed-chain.html
index 382d85de6..151cf27e6 100644
--- a/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat-keyed-chain/test-nested-repeat-keyed-chain.html
+++ b/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat-keyed-chain/test-nested-repeat-keyed-chain.html
@@ -1,3 +1,4 @@
+<template shadowrootmode="open">
 <for each="group in keyedGroups">
   <for each="section in group.sections">
     <if condition="section.visible">
@@ -13,3 +14,4 @@
     </if>
   </for>
 </for>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat/test-nested-repeat.html b/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat/test-nested-repeat.html
index 969a1454e..ff8898b7c 100644
--- a/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat/test-nested-repeat.html
+++ b/packages/webui-framework/tests/fixtures/nested-repeat/src/test-nested-repeat/test-nested-repeat.html
@@ -1,3 +1,4 @@
+<template shadowrootmode="open">
 <div class="controls">
   <button class="load" @click="{loadGroups()}">Load</button>
 </div>
@@ -13,3 +14,4 @@ <h2>{{group.name}}</h2>
     </section>
   </for>
 </div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/nested-repeat/src/test-repeat-siblings/test-repeat-siblings.html b/packages/webui-framework/tests/fixtures/nested-repeat/src/test-repeat-siblings/test-repeat-siblings.html
index ec1f0ee86..8d3722469 100644
--- a/packages/webui-framework/tests/fixtures/nested-repeat/src/test-repeat-siblings/test-repeat-siblings.html
+++ b/packages/webui-framework/tests/fixtures/nested-repeat/src/test-repeat-siblings/test-repeat-siblings.html
@@ -1,3 +1,4 @@
+<template shadowrootmode="open">
 <div class="lists">
   <for each="group in groups">
     <span class="group-label">{{group.name}}</span>
@@ -13,3 +14,4 @@
 
   <output class="selected">{{selected}}</output>
 </div>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/non-bubbling-event/src/test-non-bubbling/test-non-bubbling.html b/packages/webui-framework/tests/fixtures/non-bubbling-event/src/test-non-bubbling/test-non-bubbling.html
index fec4ee744..2f9ba1f04 100644
--- a/packages/webui-framework/tests/fixtures/non-bubbling-event/src/test-non-bubbling/test-non-bubbling.html
+++ b/packages/webui-framework/tests/fixtures/non-bubbling-event/src/test-non-bubbling/test-non-bubbling.html
@@ -1 +1 @@
-<button class="btn" @click="{onClick()}">Click</button><input class="field" @focus="{onFocus(e)}" @blur="{onBlur()}"><img class="thumb" alt="" @error="{onImgError()}"><div class="box" @mouseenter="{onEnter()}">Hover</div><div class="widget" @ui-picked="{onPicked()}" @cuechange="{onCueChange()}">Widget</div><div class="guard"><button class="guarded" @click="{onGuarded()}">Guarded</button></div><ul class="rows"><for each="item in items"><li><input class="row-input" data-id="{{item.id}}" @focus="{onRowFocus(item.id, e)}"></li></for></ul><span class="clicks">{{clicks}}</span><span class="focuses">{{focuses}}</span><span class="blurs">{{blurs}}</span><span class="errors">{{errors}}</span><span class="enters">{{enters}}</span><span class="picks">{{picks}}</span><span class="cues">{{cues}}</span><span class="guarded-clicks">{{guardedClicks}}</span><span class="row-id">{{lastRowId}}</span><span class="ct">{{lastCurrentTarget}}</span>
+<template shadowrootmode="open"><button class="btn" @click="{onClick()}">Click</button><input class="field" @focus="{onFocus(e)}" @blur="{onBlur()}"><img class="thumb" alt="" @error="{onImgError()}"><div class="box" @mouseenter="{onEnter()}">Hover</div><div class="widget" @ui-picked="{onPicked()}" @cuechange="{onCueChange()}">Widget</div><div class="guard"><button class="guarded" @click="{onGuarded()}">Guarded</button></div><ul class="rows"><for each="item in items"><li><input class="row-input" data-id="{{item.id}}" @focus="{onRowFocus(item.id, e)}"></li></for></ul><span class="clicks">{{clicks}}</span><span class="focuses">{{focuses}}</span><span class="blurs">{{blurs}}</span><span class="errors">{{errors}}</span><span class="enters">{{enters}}</span><span class="picks">{{picks}}</span><span class="cues">{{cues}}</span><span class="guarded-clicks">{{guardedClicks}}</span><span class="row-id">{{lastRowId}}</span><span class="ct">{{lastCurrentTarget}}</span></template>
diff --git a/packages/webui-framework/tests/fixtures/ref/src/test-ref/test-ref.html b/packages/webui-framework/tests/fixtures/ref/src/test-ref/test-ref.html
index e5d7092e8..761dc39e1 100644
--- a/packages/webui-framework/tests/fixtures/ref/src/test-ref/test-ref.html
+++ b/packages/webui-framework/tests/fixtures/ref/src/test-ref/test-ref.html
@@ -1 +1 @@
-<input class="input" w-ref="{inputEl}"><span class="display">{{value}}</span><button class="read" @click="{readInput()}">Read</button><button class="focus" @click="{focusInput()}">Focus</button>
+<template shadowrootmode="open"><input class="input" w-ref="{inputEl}"><span class="display">{{value}}</span><button class="read" @click="{readInput()}">Read</button><button class="focus" @click="{focusInput()}">Focus</button></template>
diff --git a/packages/webui-framework/tests/fixtures/repeat-conditional/src/test-repeat-conditional/test-repeat-conditional.html b/packages/webui-framework/tests/fixtures/repeat-conditional/src/test-repeat-conditional/test-repeat-conditional.html
index 418010d8f..351c095f0 100644
--- a/packages/webui-framework/tests/fixtures/repeat-conditional/src/test-repeat-conditional/test-repeat-conditional.html
+++ b/packages/webui-framework/tests/fixtures/repeat-conditional/src/test-repeat-conditional/test-repeat-conditional.html
@@ -1,3 +1,4 @@
+<template shadowrootmode="open">
 <div class="controls">
   <button class="load" @click="{loadItems()}">Load</button>
   <button class="switch" @click="{switchItems()}">Switch</button>
@@ -27,3 +28,4 @@
     </li>
   </for>
 </ul>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/slot-shadow/slot-shadow.spec.ts b/packages/webui-framework/tests/fixtures/slot-shadow/slot-shadow.spec.ts
index dbc8b0f39..3fceb62fd 100644
--- a/packages/webui-framework/tests/fixtures/slot-shadow/slot-shadow.spec.ts
+++ b/packages/webui-framework/tests/fixtures/slot-shadow/slot-shadow.spec.ts
@@ -31,6 +31,13 @@ test.describe('slot-shadow: SPA partial regression', () => {
     expect(hasShadow).toBe(true);
   });
 
+  test('authored Shadow wrapper creates the parent shadow root', async ({ page }) => {
+    const hasShadow = await page.locator('#parent').evaluate(
+      element => !!element.shadowRoot,
+    );
+    expect(hasShadow).toBe(true);
+  });
+
   test('child with pre-existing slot content gets a shadow root', async ({ page }) => {
     // Wait for the preloaded child to be ready
     await page.waitForFunction(() => {
diff --git a/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-btn/test-slot-btn.html b/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-btn/test-slot-btn.html
index 519174aaa..25daf9713 100644
--- a/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-btn/test-slot-btn.html
+++ b/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-btn/test-slot-btn.html
@@ -1 +1 @@
-<button class="btn"><slot></slot></button>
+<template shadowrootmode="open"><button class="btn"><slot></slot></button></template>
diff --git a/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-parent/test-slot-parent.html b/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-parent/test-slot-parent.html
index 584204ed4..1760e65d3 100644
--- a/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-parent/test-slot-parent.html
+++ b/packages/webui-framework/tests/fixtures/slot-shadow/src/test-slot-parent/test-slot-parent.html
@@ -1 +1 @@
-<div class="container"></div>
+<template shadowrootmode="open"><div class="container"></div></template>
diff --git a/packages/webui-router/README.md b/packages/webui-router/README.md
index 2291fdd6c..f4f4a8e7a 100644
--- a/packages/webui-router/README.md
+++ b/packages/webui-router/README.md
@@ -70,6 +70,11 @@ Child routes use **relative paths** (no leading `/`). The nesting is the route t
 The paired form `<outlet></outlet>` is also supported, but outlets are empty and
 the self-closing form is preferred.
 
+On initial SSR, styles for the matched route chain that target the Document are
+applied before `</head>`, including Link-mode bundled chunks. Styles targeting a
+ShadowRoot remain tree-local; Link mode preloads them from the head and installs
+the applying stylesheet inside that root. Inactive route styles stay deferred.
+
 **3. Start the router after hydration:**
 
 ```typescript
@@ -525,10 +530,16 @@ Accept: application/x-ndjson, application/json
 X-WebUI-Inventory: <hex bitmask>
 ```
 
+The inventory tracks component template and style metadata together. Partial
+responses therefore omit CSS definitions and closures that the client has
+already registered; a new closure may reference an existing shared resource
+without transmitting that resource again. If a closure dependency is not in
+the incoming inventory, its resource definition is sent with the new root.
+
 The server should return:
 
-- **`Accept: application/x-ndjson`** → NDJSON streaming: Chunk 1 `{ templateStyles, templates, inventory, path, chain, cacheTags }`, Chunk 2 `{ states: [...] }` — or fall back to single JSON
-- **`Accept: application/json`** → JSON partial: `{ state, templateStyles, templates, inventory, path, chain, cacheTags, cacheControl }`; `Protocol::render_partial()` returns this complete response
+- **`Accept: application/x-ndjson`** → NDJSON streaming: Chunk 1 `{ componentStyles, templates, inventory, path, chain, cacheTags }`, Chunk 2 `{ states: [...] }` — or fall back to single JSON
+- **`Accept: application/json`** → JSON partial: `{ state, componentStyles, templates, inventory, path, chain, cacheTags, cacheControl }`; `Protocol::render_partial()` returns this complete response
 - **Otherwise** → Full SSR'd HTML page
 
 The `chain` field contains the matched route chain with `component`, `path`,
diff --git a/packages/webui-router/src/actions.ts b/packages/webui-router/src/actions.ts
index 487bf0801..07a6fa04e 100644
--- a/packages/webui-router/src/actions.ts
+++ b/packages/webui-router/src/actions.ts
@@ -8,7 +8,7 @@
 
 import { isStateful } from './types.js';
 import type { RouteActionContext, RouteActionResult, ActionCompleteEvent } from './types.js';
-import { getRouteParams } from './route-element.js';
+import { getRouteParams, mountedRouteComponent } from './route-element.js';
 import type { RouteChainEntry } from './cache.js';
 
 /** Context needed by form interception to interact with router state. */
@@ -19,6 +19,17 @@ export interface ActionContext {
   invalidateTags(tags: string[]): void;
 }
 
+/** Resolve the exact active chain entry that owns a route element. */
+export function findActionRouteEntry(
+  activeChain: readonly RouteChainEntry[],
+  routeEl: HTMLElement,
+): RouteChainEntry | undefined {
+  for (let i = 0; i < activeChain.length; i++) {
+    if (activeChain[i].el === routeEl) return activeChain[i];
+  }
+  return undefined;
+}
+
 /**
  * Set up delegated form submission interception.
  * Returns a cleanup function to remove the listener.
@@ -81,7 +92,7 @@ export function setupFormInterception(ctx: ActionContext): () => void {
 
     // Get resolved invalidation tags from the active chain entry
     // (not from DOM attr which has unresolved {param} templates)
-    const chainEntry = ctx.activeChain.find(e => e.component === componentTag);
+    const chainEntry = findActionRouteEntry(ctx.activeChain, routeEl);
     const routeInvalidates = chainEntry?.invalidates ?? [];
 
     ctor.action({ formData, params, signal: controller.signal })
@@ -90,7 +101,7 @@ export function setupFormInterception(ctx: ActionContext): () => void {
 
         // Apply optimistic state if provided
         if (result?.state) {
-          const compEl = chainEntry?.compEl ?? routeEl!.querySelector(componentTag!);
+          const compEl = chainEntry?.compEl ?? mountedRouteComponent(routeEl!, componentTag!);
           if (compEl && isStateful(compEl)) {
             compEl.setState(result.state);
           }
diff --git a/packages/webui-router/src/cache.ts b/packages/webui-router/src/cache.ts
index d9802b1d2..115a2e99c 100644
--- a/packages/webui-router/src/cache.ts
+++ b/packages/webui-router/src/cache.ts
@@ -6,14 +6,14 @@
  * server-provided partial responses.
  */
 
-import type { CacheConfig } from './types.js';
+import type { CacheConfig, ComponentStyles } from './types.js';
 
 /** JSON partial response from the server. */
 export interface PartialResponse {
   /** Top-level application state (non-streaming responses). */
   state?: Record<string, unknown>;
-  /** Module CSS definitions to append before installing template closures. */
-  templateStyles?: string[];
+  /** Versioned component stylesheet definitions and ordered closures. */
+  componentStyles: ComponentStyles;
   /** JSON-safe template metadata keyed by component tag. */
   templates: Record<string, unknown>;
   /** JavaScript condition closure arrays keyed by component tag. */
diff --git a/packages/webui-router/src/chain.ts b/packages/webui-router/src/chain.ts
index e59645a73..a15c3e8db 100644
--- a/packages/webui-router/src/chain.ts
+++ b/packages/webui-router/src/chain.ts
@@ -10,6 +10,7 @@
 import {
   ROUTE_SELECTOR,
   activateRoute,
+  mountedRouteComponent,
   renderRoot,
   createRouteStub,
   setRouteMeta,
@@ -143,7 +144,7 @@ export function findOrCreateRouteElement(
 
   // For nested routes, search in parent component's render root
   if (parent.el) {
-    const compEl = parent.compEl ?? parent.el.querySelector(parent.component);
+    const compEl = parent.compEl ?? mountedRouteComponent(parent.el, parent.component);
     if (compEl) {
       const root = renderRoot(compEl);
       const allRoutes = root.querySelectorAll(ROUTE_SELECTOR);
diff --git a/packages/webui-router/src/index.ts b/packages/webui-router/src/index.ts
index 68d5b816e..0bd5da9f7 100644
--- a/packages/webui-router/src/index.ts
+++ b/packages/webui-router/src/index.ts
@@ -29,4 +29,7 @@ export type {
   RouteActionResult,
   ActionCompleteEvent,
   StatefulElement,
+  ComponentStyleResource,
+  ComponentStyles,
 } from './types.js';
+export type { PartialResponse, RouteChainEntry } from './cache.js';
diff --git a/packages/webui-router/src/loaders.ts b/packages/webui-router/src/loaders.ts
index fa99c5e37..6332a270f 100644
--- a/packages/webui-router/src/loaders.ts
+++ b/packages/webui-router/src/loaders.ts
@@ -68,11 +68,12 @@ export async function resolveLoaders(
   query: Record<string, string>,
   signal?: AbortSignal,
   ssrBoot?: boolean,
-): Promise<Map<string, Record<string, unknown> | typeof LOADER_FAILED>> {
-  const results = new Map<string, Record<string, unknown> | typeof LOADER_FAILED>();
+): Promise<Map<RouteChainEntry, Record<string, unknown> | typeof LOADER_FAILED>> {
+  const results = new Map<RouteChainEntry, Record<string, unknown> | typeof LOADER_FAILED>();
 
   // Collect only entries that have loaders
   type LoaderEntry = {
+    entry: RouteChainEntry;
     component: string;
     params: Record<string, string>;
     loaderFn: (ctx: RouteLoaderContext) => Promise<Record<string, unknown>>;
@@ -94,7 +95,12 @@ export async function resolveLoaders(
     ) | undefined;
     if (!ctor || typeof ctor.loader !== 'function') continue;
 
-    loaderEntries.push({ component: entry.component, params: entry.params, loaderFn: ctor.loader });
+    loaderEntries.push({
+      entry,
+      component: entry.component,
+      params: entry.params,
+      loaderFn: ctor.loader,
+    });
   }
 
   // Early exit — no loaders in this chain
@@ -102,11 +108,11 @@ export async function resolveLoaders(
 
   const effectiveSignal = signal ?? NOOP_SIGNAL;
 
-  await Promise.all(loaderEntries.map(async ({ component, params, loaderFn }) => {
+  await Promise.all(loaderEntries.map(async ({ entry, component, params, loaderFn }) => {
     try {
       const state = await loaderFn({ params, query, signal: effectiveSignal });
       if (!effectiveSignal.aborted && state) {
-        results.set(component, state);
+        results.set(entry, state);
       }
     } catch (err: unknown) {
       if (err instanceof DOMException && err.name === 'AbortError') return;
@@ -115,7 +121,7 @@ export async function resolveLoaders(
         err,
       );
       // Mark as failed so callers fall back to server state (not local state)
-      results.set(component, LOADER_FAILED);
+      results.set(entry, LOADER_FAILED);
     }
   }));
 
diff --git a/packages/webui-router/src/route-boundary.ts b/packages/webui-router/src/route-boundary.ts
index cf9cd1697..d78755acd 100644
--- a/packages/webui-router/src/route-boundary.ts
+++ b/packages/webui-router/src/route-boundary.ts
@@ -6,7 +6,11 @@
  * The server-provided chain remains authoritative for route content.
  */
 
-import { getRouteMeta, ROUTE_SELECTOR } from './route-element.js';
+import {
+  getRouteMeta,
+  mountedRouteComponent,
+  ROUTE_SELECTOR,
+} from './route-element.js';
 import type { RouteChainEntry } from './cache.js';
 
 export interface RouteBoundary {
@@ -134,7 +138,7 @@ function findBestBoundaryRoute(
   let root: Element | ShadowRoot = document.body;
   if (parent) {
     if (!parent.el) return null;
-    const component = parent.compEl ?? parent.el.querySelector(parent.component);
+    const component = parent.compEl ?? mountedRouteComponent(parent.el, parent.component);
     if (!component) return null;
     root = (component as HTMLElement).shadowRoot ?? component;
   }
diff --git a/packages/webui-router/src/route-element.ts b/packages/webui-router/src/route-element.ts
index fea9d6418..b59605f90 100644
--- a/packages/webui-router/src/route-element.ts
+++ b/packages/webui-router/src/route-element.ts
@@ -62,7 +62,7 @@ export function hasState(state?: Record<string, unknown> | null): state is Recor
 /**
  * Get the render root of a component element.
  * Returns shadowRoot if present, otherwise the element itself.
- * This allows the router to work in both shadow and light DOM modes.
+ * This allows the router to work with both authored Shadow roots and Light DOM.
  */
 export function renderRoot(el: Element): Element | ShadowRoot {
   return (el as HTMLElement).shadowRoot ?? el;
@@ -183,6 +183,41 @@ export function deactivateRoute(el: HTMLElement): void {
   el.style.display = 'none';
 }
 
+/** Identify a compiler-owned style marker kept directly inside a route host. */
+function isRouteStyleMarker(node: Node): boolean {
+  if (node.nodeType !== 1) return false;
+  const element = node as Element;
+  if (element.getAttribute('data-webui-resource') === null) return false;
+  const strategy = element.getAttribute('data-webui-strategy');
+  return (element.localName === 'link' && strategy === 'link') ||
+    (element.localName === 'style' && (strategy === 'style' || strategy === 'module'));
+}
+
+/** Return the mounted route component without parsing its tag as a CSS selector. */
+export function mountedRouteComponent(
+  route: HTMLElement,
+  expectedTag?: string,
+): HTMLElement | null {
+  let element = route.firstElementChild;
+  while (element && isRouteStyleMarker(element)) {
+    element = element.nextElementSibling;
+  }
+  if (!element || (expectedTag && element.localName !== expectedTag.toLowerCase())) {
+    return null;
+  }
+  return element as HTMLElement;
+}
+
+/** Remove replaceable route content while retaining compiler-owned style markers. */
+export function clearRouteContent(route: HTMLElement): void {
+  let node = route.firstChild;
+  while (node) {
+    const next = node.nextSibling;
+    if (!isRouteStyleMarker(node)) route.removeChild(node);
+    node = next;
+  }
+}
+
 // ── Compound helpers ─────────────────────────────────────────────
 
 /**
diff --git a/packages/webui-router/src/router.test.ts b/packages/webui-router/src/router.test.ts
index b942a05f1..da5419c3c 100644
--- a/packages/webui-router/src/router.test.ts
+++ b/packages/webui-router/src/router.test.ts
@@ -12,7 +12,14 @@ import { resolveLoaders } from './loaders.js';
 import { ensureComponentLoaded } from './loaders.js';
 import { NavigationCache } from './cache.js';
 import { setupPreloadListeners } from './preload.js';
-import { registerTemplatesAndStyles } from './templates.js';
+import {
+  registerInitialTemplatesAndStyles,
+  registerTemplatesAndStyles,
+} from './templates.js';
+import { findChangeLevel, sameRouteDeclaration } from './chain.js';
+import { findActionRouteEntry } from './actions.js';
+import { mountedRouteComponent } from './route-element.js';
+import type { ComponentStyles } from './types.js';
 
 // ── Test-only type access ────────────────────────────────────────
 // The router's `inventory` and `activeChain` are private at compile
@@ -39,6 +46,7 @@ interface TemplateRegistry {
   __webui?: {
     templates?: Record<string, unknown>;
     templateFns?: Record<string, unknown>;
+    styles?: string[];
     [key: string]: unknown;
   };
 }
@@ -47,6 +55,11 @@ function globals(): TemplateRegistry {
   return globalThis as unknown as TemplateRegistry;
 }
 
+/** An empty componentStyles catalog for fixtures that don't exercise CSS. */
+function emptyComponentStyles(): { version: 1; strategy: 'style'; resources: {}; closures: {} } {
+  return { version: 1, strategy: 'style', resources: {}, closures: {} };
+}
+
 // Assign deterministic indices for test components
 const testIndex: Record<string, number> = {};
 let nextIdx = 0;
@@ -136,6 +149,11 @@ describe('WebUIRouter', () => {
         assert.deepEqual(globals().__webui!.state, { title: 'Hello' });
         assert.ok(globals().__webui!.templates?.greeting, 'template metadata should be loaded');
         assert.ok(globals().__webui!.templateFns?.greeting, 'existing templateFns should be preserved');
+        assert.deepEqual(
+          globals().__webui!.styles,
+          ['x-card'],
+          'SSR Module specifiers must remain available for lazy framework deduplication',
+        );
         assert.equal(
           (globals().__webui!.templateHostExclusions as Set<string>).has('lazy-card'),
           true,
@@ -238,7 +256,8 @@ describe('WebUIRouter', () => {
         registerTemplatesAndStyles({
           templates: { 'test-comp': { h: '<div>hello</div>', c: [[[0, ['ready']], 0, [[], 0]]] } },
           templateFunctions: { 'test-comp': '[function(){return true}]' },
-        }, '', new Set(), () => {});
+          componentStyles: emptyComponentStyles(),
+        }, '', () => {});
 
         const registry = globals().__webui!.templates!;
         assert.ok(registry['test-comp'], 'template should be registered');
@@ -278,7 +297,8 @@ describe('WebUIRouter', () => {
         assert.throws(
           () => registerTemplatesAndStyles({
             templates: { 'old-executable': 'window.executed=true;' },
-          }, '', new Set(), () => {}),
+            componentStyles: emptyComponentStyles(),
+          }, '', () => {}),
           /Unsupported executable template payload/,
         );
 
@@ -290,27 +310,203 @@ describe('WebUIRouter', () => {
       }
     });
 
-    test('fetchPartial appends module styles before one batched script execution', async () => {
+    test('registers component styles and closures before templates are announced', () => {
+      const origCreateElement = (globalThis as any).document.createElement;
+      const origHead = (globalThis as any).document.head;
+      const origBridge = window.__webuiRegisterComponentStyles;
+      const order: string[] = [];
+      const tag = 'ordered-component';
+      let styleRegistrations = 0;
+      let announcedStyles: unknown = 'not-dispatched';
+      const onRegistered = (event: Event): void => {
+        order.push('event');
+        announcedStyles = (event as CustomEvent<{
+          componentStyles?: unknown;
+        }>).detail.componentStyles;
+        assert.ok(globals().__webui?.templates?.[tag]);
+      };
+      window.addEventListener('webui:templates-registered', onRegistered);
+      window.__webuiRegisterComponentStyles = () => {
+        assert.equal(globals().__webui?.templates?.[tag], undefined);
+        styleRegistrations++;
+        order.push('styles');
+      };
+      (globalThis as any).document.createElement = (elementTag: string) => ({
+        tagName: elementTag,
+        nonce: '',
+        textContent: '',
+      });
+
+      (globalThis as any).document.head = {
+        appendChild(el: Record<string, unknown>) {
+          order.push('closures');
+          // eslint-disable-next-line no-new-func
+          Function(el.textContent as string)();
+          return el;
+        },
+        removeChild() { return undefined; },
+      };
+
+      try {
+        registerTemplatesAndStyles({
+          componentStyles: {
+            version: 1,
+            strategy: 'style',
+            resources: {
+              [tag]: { kind: 'style', css: '.ordered{}' },
+            },
+            closures: { [tag]: [tag] },
+          },
+          templateFunctions: { [tag]: '[function(){return true}]' },
+          templates: { [tag]: { h: '<p>ordered</p>' } },
+        }, '', () => {});
+
+        assert.deepEqual(order, ['styles', 'closures', 'event']);
+        assert.equal(styleRegistrations, 1);
+        assert.equal(
+          announcedStyles,
+          undefined,
+          'styles accepted by the framework bridge should not be registered again from the event',
+        );
+      } finally {
+        window.removeEventListener('webui:templates-registered', onRegistered);
+        window.__webuiRegisterComponentStyles = origBridge;
+        (globalThis as any).document.createElement = origCreateElement;
+        (globalThis as any).document.head = origHead;
+        delete globals().__webui?.templates?.[tag];
+      }
+    });
+
+    test('registers initial component styles before announcing bootstrap templates', () => {
+      const originalBridge = window.__webuiRegisterComponentStyles;
+      const order: string[] = [];
+      const styles = emptyComponentStyles();
+      const templates = { 'initial-card': { h: '<p>Initial</p>' } };
+      const onRegistered = (): void => {
+        order.push('templates');
+      };
+      window.addEventListener('webui:templates-registered', onRegistered);
+      window.__webuiRegisterComponentStyles = (value: unknown) => {
+        assert.strictEqual(value, styles);
+        order.push('styles');
+      };
+
+      try {
+        registerInitialTemplatesAndStyles(templates, styles);
+        assert.deepEqual(order, ['styles', 'templates']);
+      } finally {
+        window.removeEventListener('webui:templates-registered', onRegistered);
+        window.__webuiRegisterComponentStyles = originalBridge;
+      }
+    });
+
+    test('keeps component styles in the template event when the framework bridge is absent', () => {
+      const origBridge = window.__webuiRegisterComponentStyles;
+      const previousStyles = window.__webui!.componentStyles;
+      const tag = 'fallback-event-component';
+      const componentStyles: ComponentStyles = {
+        version: 1,
+        strategy: 'style',
+        resources: {
+          [tag]: { kind: 'style', css: '.fallback{}' },
+        },
+        closures: { [tag]: [tag] },
+      };
+      let announcedStyles: unknown;
+      const onRegistered = (event: Event): void => {
+        announcedStyles = (event as CustomEvent<{
+          componentStyles?: unknown;
+        }>).detail.componentStyles;
+      };
+      window.__webuiRegisterComponentStyles = undefined;
+      delete window.__webui!.componentStyles;
+      window.addEventListener('webui:templates-registered', onRegistered);
+
+      try {
+        registerTemplatesAndStyles({
+          componentStyles,
+          templates: { [tag]: { h: '<p>fallback</p>' } },
+        }, '', () => {});
+
+        assert.equal(announcedStyles, componentStyles);
+        assert.equal(window.__webui!.componentStyles, componentStyles);
+      } finally {
+        window.removeEventListener('webui:templates-registered', onRegistered);
+        window.__webuiRegisterComponentStyles = origBridge;
+        if (previousStyles) window.__webui!.componentStyles = previousStyles;
+        else delete window.__webui!.componentStyles;
+        delete globals().__webui?.templates?.[tag];
+      }
+    });
+
+    test('fallback style merging ignores resource property order', () => {
+      const origBridge = window.__webuiRegisterComponentStyles;
+      window.__webuiRegisterComponentStyles = undefined;
+      window.__webui!.componentStyles = {
+        version: 1,
+        strategy: 'module',
+        resources: {
+          'ordered-component': {
+            css: '.ordered{}',
+            specifier: 'ordered-component',
+            kind: 'module',
+          },
+        },
+        closures: { 'ordered-component': ['ordered-component'] },
+      };
+
+      try {
+        assert.doesNotThrow(() => registerTemplatesAndStyles({
+          componentStyles: {
+            version: 1,
+            strategy: 'module',
+            resources: {
+              'ordered-component': {
+                kind: 'module',
+                specifier: 'ordered-component',
+                css: '.ordered{}',
+              },
+            },
+            closures: { 'ordered-component': ['ordered-component'] },
+          },
+        }, '', () => {}));
+      } finally {
+        window.__webuiRegisterComponentStyles = origBridge;
+        delete window.__webui!.componentStyles;
+      }
+    });
+
+    test('fetchPartial forwards componentStyles through the registration bridge and batches closure scripts', async () => {
       const origFetch = (globalThis as any).fetch;
       const origCreateElement = (globalThis as any).document.createElement;
       const origQuerySelector = (globalThis as any).document.querySelector;
       const origHead = (globalThis as any).document.head;
+      const origBridge = window.__webuiRegisterComponentStyles;
 
       const order: string[] = [];
       const templateScriptBodies: string[] = [];
       const templateScriptNonces: string[] = [];
-      const importmapBodies: string[] = [];
-      const importmapNonces: string[] = [];
+      let receivedComponentStyles: unknown;
+
+      window.__webuiRegisterComponentStyles = (value: unknown) => {
+        order.push('styles');
+        receivedComponentStyles = value;
+      };
 
       (globalThis as any).fetch = async () => ({
         ok: true,
         headers: { get: () => 'application/json' },
         json: async () => ({
           state: {},
-          templateStyles: [
-            '<script type="importmap">{"imports":{"alpha":"data:text/css,.alpha{color:red}"}}</script>',
-            '<script type="importmap">{"imports":{"beta":"data:text/css,.beta{color:blue}"}}</script>',
-          ],
+          componentStyles: {
+            version: 1,
+            strategy: 'module',
+            resources: {
+              alpha: { kind: 'module', specifier: 'alpha', css: '.alpha{color:red}' },
+              beta: { kind: 'module', specifier: 'beta', css: '.beta{color:blue}' },
+            },
+            closures: { alpha: ['alpha'], beta: ['beta'] },
+          },
           templates: {
             alpha: { h: '<div>a</div>', c: [[[0, ['ready']], 0, [[], 0]]] },
             beta: { h: '<div>b</div>', c: [[[0, ['ready']], 0, [[], 0]]] },
@@ -338,15 +534,10 @@ describe('WebUIRouter', () => {
       (globalThis as any).document.querySelector = () => null;
       (globalThis as any).document.head = {
         appendChild(el: Record<string, unknown>) {
-          if (el.tagName === 'script' && el.type === 'importmap') {
-            const body = el.textContent as string;
-            const parsed = JSON.parse(body) as { imports: Record<string, string> };
-            const specifier = Object.keys(parsed.imports)[0];
-            order.push(`importmap:${specifier}`);
-            importmapBodies.push(body);
-            importmapNonces.push(el.nonce as string);
-            return el;
-          }
+          // Import-map installation for Module resources is now the
+          // framework's responsibility (installed lazily per Document when
+          // a component mounts), so the router only appends the batched
+          // condition-closure script.
           order.push('script');
           templateScriptNonces.push(el.nonce as string);
           templateScriptBodies.push(el.textContent as string);
@@ -371,10 +562,9 @@ describe('WebUIRouter', () => {
         const result = await fetchPartial('/test');
 
         assert.ok(result, 'should return partial data');
-        // SSR and SPA paths emit ONE <script type="importmap"> per component
-        // (consistent 1:1 mapping); importmap scripts must be appended
-        // BEFORE the batched closure script.
-        assert.deepEqual(order, ['importmap:alpha', 'importmap:beta', 'script']);
+        // componentStyles registration (via the bridge) happens before the
+        // batched closure script executes.
+        assert.deepEqual(order, ['styles', 'script']);
         // All condition closure arrays are batched into one script tag
         assert.equal(
           templateScriptBodies.length,
@@ -393,35 +583,22 @@ describe('WebUIRouter', () => {
           templateScriptBodies[0].includes('f["beta"]'),
           'batch should include beta closure table',
         );
-        // CSP nonce preserved on every emitted script (importmaps + closure batch).
+        // CSP nonce preserved on the emitted closure batch script.
         assert.deepEqual(
           templateScriptNonces,
           ['test-nonce'],
           'batched closure script should carry the nonce',
         );
-        assert.deepEqual(
-          importmapNonces,
-          ['test-nonce', 'test-nonce'],
-          'each appended importmap script should carry the per-request nonce',
-        );
-        // Each importmap body should register exactly one specifier.
         assert.equal(
-          importmapBodies.length,
-          2,
-          'one importmap script per component (1:1 with SSR emission)',
-        );
-        assert.ok(
-          importmapBodies[0].includes('"alpha":"data:text/css,'),
-          'alpha importmap body should register alpha under a data:text/css URI',
-        );
-        assert.ok(
-          importmapBodies[1].includes('"beta":"data:text/css,'),
-          'beta importmap body should register beta under a data:text/css URI',
+          (receivedComponentStyles as { strategy?: string } | undefined)?.strategy,
+          'module',
+          'the module componentStyles catalog should reach the registration bridge',
         );
         // Templates actually registered
         assert.ok(globals().__webui?.templates?.['alpha'], 'alpha template should register');
         assert.ok(globals().__webui?.templates?.['beta'], 'beta template should register');
       } finally {
+        window.__webuiRegisterComponentStyles = origBridge;
         (globalThis as any).fetch = origFetch;
         (globalThis as any).document.createElement = origCreateElement;
         (globalThis as any).document.querySelector = origQuerySelector;
@@ -429,7 +606,7 @@ describe('WebUIRouter', () => {
       }
     });
 
-    test('fetchPartial handles empty templateStyles for Link/Style modes', async () => {
+    test('fetchPartial handles an empty componentStyles catalog for Link/Style modes', async () => {
       const origFetch = (globalThis as any).fetch;
       const origCreateElement = (globalThis as any).document.createElement;
       const origHead = (globalThis as any).document.head;
@@ -441,7 +618,7 @@ describe('WebUIRouter', () => {
         headers: { get: () => 'application/json' },
         json: async () => ({
           state: {},
-          templateStyles: [],
+          componentStyles: { version: 1, strategy: 'style', resources: {}, closures: {} },
           templates: {
             'link-comp': { h: '<div></div>' },
           },
@@ -538,6 +715,7 @@ describe('WebUIRouter', () => {
             templates: {
               'abort-test': { h: '<div></div>' },
             },
+            componentStyles: emptyComponentStyles(),
             path: '/',
             chain: [],
             inventory: 'ff',
@@ -571,7 +749,7 @@ describe('WebUIRouter', () => {
       (globalThis as any).fetch = async (_url: string, opts?: RequestInit) => {
         assert.ok(opts?.signal, 'bounded fetch should always receive a timeout signal');
         assert.equal(opts.signal.aborted, false);
-        return { ok: true, headers: { get: () => 'application/json' }, json: async () => ({ state: {}, templates: {}, path: '/', chain: [] }) };
+        return { ok: true, headers: { get: () => 'application/json' }, json: async () => ({ state: {}, templates: {}, componentStyles: emptyComponentStyles(), path: '/', chain: [] }) };
       };
 
       try {
@@ -658,7 +836,7 @@ describe('WebUIRouter', () => {
           const body = new ReadableStream<Uint8Array>({
             start(controller) {
               controller.enqueue(encoder.encode(
-                '{"chain":[],"templates":{},"path":"/first"}\n',
+                '{"chain":[],"templates":{},"componentStyles":{"version":1,"strategy":"style","resources":{},"closures":{}},"path":"/first"}\n',
               ));
               firstSignal?.addEventListener(
                 'abort',
@@ -672,7 +850,7 @@ describe('WebUIRouter', () => {
           });
         }
         return new Response(
-          '{"chain":[],"templates":{},"path":"/second"}',
+          '{"chain":[],"templates":{},"componentStyles":{"version":1,"strategy":"style","resources":{},"closures":{}},"path":"/second"}',
           { headers: { 'content-type': 'application/json' } },
         );
       };
@@ -1145,12 +1323,13 @@ describe('WebUIRouter', () => {
       };
 
       try {
+        const entry = { component: 'dash-page', path: '/', params: { id: '42' } };
         const results = await resolveLoaders(
-          [{ component: 'dash-page', path: '/', params: { id: '42' } }],
+          [entry],
           { filter: 'active' },
         );
-        assert.ok(results.has('dash-page'), 'should have loader result for dash-page');
-        assert.deepEqual(results.get('dash-page'), { dashId: '42', source: 'loader' });
+        assert.ok(results.has(entry), 'should have loader result for the route entry');
+        assert.deepEqual(results.get(entry), { dashId: '42', source: 'loader' });
       } finally {
         (globalThis as any).customElements.get = origGet;
       }
@@ -1230,6 +1409,32 @@ describe('WebUIRouter', () => {
       }
     });
 
+    test('keeps loader state distinct for declarations sharing a component', async () => {
+      const origGet = (globalThis as any).customElements.get;
+      (globalThis as any).customElements.get = (name: string) => {
+        if (name === 'shared-page') {
+          return class SharedPage {
+            static async loader(ctx: { params: Record<string, string> }) {
+              return { id: ctx.params.id };
+            }
+          };
+        }
+        return origGet(name);
+      };
+      const first = { component: 'shared-page', path: '/first/:id', params: { id: 'first' } };
+      const second = { component: 'shared-page', path: '/second/:id', params: { id: 'second' } };
+
+      try {
+        const results = await resolveLoaders([first, second], {});
+
+        assert.equal(results.size, 2);
+        assert.deepEqual(results.get(first), { id: 'first' });
+        assert.deepEqual(results.get(second), { id: 'second' });
+      } finally {
+        (globalThis as any).customElements.get = origGet;
+      }
+    });
+
     test('mountComponent calls applyParamsQueryState with state', () => {
       const router = new WebUIRouter();
       const source = (router as any).mountComponent.toString() as string;
@@ -1277,6 +1482,7 @@ describe('WebUIRouter', () => {
         path: '/',
         params: { id: '42' },
         el: mockRouteEl,
+        compEl: mockCompEl,
         keepAlive: true,
         state: null,  // null = skip setState
       };
@@ -1285,6 +1491,60 @@ describe('WebUIRouter', () => {
       assert.ok(!setStateCalled, 'setState must not be called for keep-alive with null state');
     });
 
+    describe('route declaration identity and teardown', () => {
+      test('treats distinct paths using one component as different declarations', () => {
+        const login = { component: 'auth-page', path: '/login', params: {} };
+        const signup = { component: 'auth-page', path: '/signup', params: {} };
+
+        assert.equal(sameRouteDeclaration(login, signup), false);
+        assert.equal(findChangeLevel([login], [signup]), 0);
+      });
+
+      test('tears down non-keep-alive siblings through marker-preserving cleanup', () => {
+        const router = new WebUIRouter();
+        const source = (router as unknown as {
+          commitWithData: (...args: unknown[]) => Promise<void>;
+        }).commitWithData.toString();
+
+        assert.ok(source.includes('sameRouteDeclaration(oldEntry, newEntry)'));
+        assert.ok(source.includes('$destroy'));
+        assert.ok(source.includes('clearRouteContent(oldEntry.el)'));
+      });
+
+      test('resolves actions by route element when component tags repeat', () => {
+        const firstRoute = {} as HTMLElement;
+        const secondRoute = {} as HTMLElement;
+        const first = {
+          component: 'shared-page',
+          path: '/first',
+          params: {},
+          el: firstRoute,
+          invalidates: ['first'],
+        };
+        const second = {
+          component: 'shared-page',
+          path: '/second',
+          params: {},
+          el: secondRoute,
+          invalidates: ['second'],
+        };
+
+        assert.strictEqual(findActionRouteEntry([first, second], secondRoute), second);
+      });
+
+      test('finds a dotted component tag without CSS selector parsing', () => {
+        const component = {
+          localName: 'x-foo.bar',
+          nextElementSibling: null,
+        } as unknown as HTMLElement;
+        const route = {
+          firstElementChild: component,
+        } as unknown as HTMLElement;
+
+        assert.strictEqual(mountedRouteComponent(route, 'x-foo.bar'), component);
+      });
+    });
+
     test('applyState calls setState for keep-alive with loader override', () => {
       const router = new WebUIRouter();
       const priv = router as any;
@@ -1306,11 +1566,12 @@ describe('WebUIRouter', () => {
         path: '/',
         params: {},
         el: mockRouteEl,
+        compEl: mockCompEl,
         keepAlive: true,
         state: null,
       };
       const loaderStates = new Map();
-      loaderStates.set('test-comp', { fresh: 'data' });
+      loaderStates.set(entry, { fresh: 'data' });
 
       priv.applyState(entry, {}, loaderStates);
       assert.deepEqual(setStateArg, { fresh: 'data' }, 'setState should receive loader override');
@@ -1337,6 +1598,7 @@ describe('WebUIRouter', () => {
         path: '/',
         params: {},
         el: mockRouteEl as any,
+        compEl: mockCompEl,
         keepAlive: false,
         state: { from: 'server' },
       };
@@ -1477,7 +1739,7 @@ describe('WebUIRouter', () => {
         return {
           ok: true,
           headers: { get: () => 'application/json' },
-          json: async () => ({ state: {}, templates: {}, path: '/', chain: [] }),
+          json: async () => ({ state: {}, templates: {}, componentStyles: emptyComponentStyles(), path: '/', chain: [] }),
         };
       };
 
diff --git a/packages/webui-router/src/router.ts b/packages/webui-router/src/router.ts
index dfd93fb80..fd4d6d350 100644
--- a/packages/webui-router/src/router.ts
+++ b/packages/webui-router/src/router.ts
@@ -36,6 +36,8 @@ import {
   applyParamsQueryState,
   setRouteMeta,
   getRouteMeta,
+  mountedRouteComponent,
+  clearRouteContent,
   WebUIRouteElement,
 } from './route-element.js';
 
@@ -46,6 +48,7 @@ import {
   injectCssLinks,
   fetchComponentTemplates,
   notifyTemplatesRegistered,
+  registerInitialTemplatesAndStyles,
   waitForTemplateReadiness,
 } from './templates.js';
 import type {
@@ -85,7 +88,6 @@ export class WebUIRouter {
   private basePath = '';
   /** O(1) lookup sets backed by the global arrays — kept in sync. */
   private cssSet = new Set<string>();
-  private stylesSet = new Set<string>();
   private navGeneration = 0;
   private currentRequestPath = '/';
   private navCache: import('./cache.js').NavigationCache | null = null;
@@ -196,12 +198,11 @@ export class WebUIRouter {
 
     this.installDocumentTransitionOverride();
 
-    // Build O(1) lookup Sets from the global arrays, then free the arrays —
-    // they were one-shot SSR data; the Sets are the live lookup structure.
+    // Build the router's O(1) CSS URL lookup, then free its source array.
+    // Keep `styles`: the framework lazily consumes those SSR Module specifiers
+    // when it initializes the per-Document import-map deduplication set.
     for (const href of meta.css) this.cssSet.add(href);
-    for (const spec of meta.styles) this.stylesSet.add(spec);
     delete meta.css;
-    delete meta.styles;
 
     const nav = window.navigation;
     const handler = (event: NavigateEvent) => {
@@ -273,7 +274,7 @@ export class WebUIRouter {
       });
     }
 
-    this.startInitialNavigation(meta.templates);
+    this.startInitialNavigation(meta);
   }
 
   /** Navigate to a new path. */
@@ -317,7 +318,11 @@ export class WebUIRouter {
       const inv = window.__webui!.inventory!;
       const endpoint = this.config.templateEndpoint ?? '/_webui/templates';
       const fetchPromise = fetchComponentTemplates(
-        missing, inv, endpoint, window.__webui!.nonce!, this.stylesSet,
+        missing,
+        inv,
+        endpoint,
+        window.__webui!.nonce!,
+        this.cssSet,
         (inv) => this.updateInventory(inv),
       ).finally(() => {
         for (const tag of missing) this.loadPromises.delete(tag);
@@ -364,7 +369,6 @@ export class WebUIRouter {
     this.ssrPreloadsCleared = false;
     this.documentNavigationUrl = null;
     this.cssSet.clear();
-    this.stylesSet.clear();
 
     this.currentRequestPath = '/';
     this.navCache?.clear();
@@ -408,9 +412,9 @@ export class WebUIRouter {
       if (thisGen !== this.navGeneration) return;
 
       for (const entry of this.activeChain) {
-        const state = loaderStates.get(entry.component);
+        const state = loaderStates.get(entry);
         if (state && state !== LOADER_FAILED && entry.el) {
-          const compEl = entry.compEl ?? entry.el.querySelector(entry.component);
+          const compEl = entry.compEl ?? mountedRouteComponent(entry.el, entry.component);
           if (compEl) entry.compEl = compEl;
           if (compEl && isStateful(compEl)) {
             compEl.setState(state);
@@ -608,7 +612,7 @@ export class WebUIRouter {
       const stylesReady = registerTemplatesAndStyles(
         data,
         window.__webui!.nonce!,
-        this.stylesSet,
+        this.cssSet,
         (inv) => this.updateInventory(inv),
       );
       injectCssLinks(data, this.cssSet);
@@ -637,12 +641,12 @@ export class WebUIRouter {
     query?: Record<string, string>,
   ): void {
     // Destroy existing component bindings before clearing DOM
-    const existing = routeEl.firstElementChild;
+    const existing = mountedRouteComponent(routeEl);
     if (existing && typeof (existing as unknown as { $destroy?: () => void }).$destroy === 'function') {
       (existing as unknown as { $destroy: () => void }).$destroy();
     }
     const component = document.createElement(componentTag);
-    routeEl.textContent = '';
+    clearRouteContent(routeEl);
     routeEl.appendChild(component);
     applyParamsQueryState(component, routeEl, params, state, query);
   }
@@ -650,14 +654,14 @@ export class WebUIRouter {
   private applyState(
     entry: RouteChainEntry,
     query?: Record<string, string>,
-    loaderStates?: Map<string, Record<string, unknown> | typeof LOADER_FAILED>,
+    loaderStates?: Map<RouteChainEntry, Record<string, unknown> | typeof LOADER_FAILED>,
   ): void {
     if (!entry.component || !entry.el) return;
-    const compEl = entry.compEl ?? entry.el.querySelector(entry.component);
+    const compEl = entry.compEl ?? mountedRouteComponent(entry.el, entry.component);
     if (!compEl) return;
     entry.compEl = compEl;
 
-    const override = loaderStates?.get(entry.component);
+    const override = loaderStates?.get(entry);
     const effectiveOverride = override === LOADER_FAILED ? undefined : override;
     const loaderExists = override !== undefined;
     const isKeepAlive = entry.keepAlive || getRouteMeta(entry.el)?.keepAlive || false;
@@ -688,7 +692,6 @@ export class WebUIRouter {
       get currentRequestPath() { return self.currentRequestPath; },
       get activeChain() { return self.activeChain; },
       get nonce() { return window.__webui!.nonce!; },
-      get injectedStyles() { return self.stylesSet; },
       get injectedCss() { return self.cssSet; },
       setDeferredReader(r) {
         if (r) {
@@ -790,8 +793,12 @@ export class WebUIRouter {
     this.cleanupFns.push(() => style.remove());
   }
 
-  private startInitialNavigation(templates: Record<string, unknown>): void {
-    notifyTemplatesRegistered(templates);
+  private startInitialNavigation(meta: RouterRuntimeGlobal): void {
+    if (meta.componentStyles) {
+      registerInitialTemplatesAndStyles(meta.templates ?? {}, meta.componentStyles);
+    } else {
+      notifyTemplatesRegistered(meta.templates);
+    }
     this.handleNavigation(this.currentTarget());
   }
 
@@ -865,12 +872,8 @@ export class WebUIRouter {
     const isQueryOnlyChange = changeLevel === newChain.length && newChain.length > 0;
 
     const commitNavigation = (): void => {
-      // Deactivate old chain from leaf up. An entry whose declaration won't
-      // be reused by the incoming chain (a sibling route matched instead —
-      // e.g. two `<route>`s sharing a component but distinguished by path)
-      // has its mounted component destroyed so it doesn't linger, invisible,
-      // in the DOM. Entries kept for in-place reuse (same declaration, or
-      // opted into `keep-alive`) are left mounted.
+      // Deactivate old chain from leaf up. Preserve route-owned style markers,
+      // but tear down component state when the declaration will not be reused.
       for (let i = this.activeChain.length - 1; i >= changeLevel; i--) {
         const oldEntry = this.activeChain[i];
         if (oldEntry.el) {
@@ -879,11 +882,11 @@ export class WebUIRouter {
           if (!willReuse) {
             const isKeepAlive = oldEntry.keepAlive || getRouteMeta(oldEntry.el)?.keepAlive || false;
             if (!isKeepAlive) {
-              const existing = oldEntry.compEl ?? oldEntry.el.firstElementChild;
+              const existing = oldEntry.compEl ?? mountedRouteComponent(oldEntry.el);
               if (existing && typeof (existing as unknown as { $destroy?: () => void }).$destroy === 'function') {
                 (existing as unknown as { $destroy: () => void }).$destroy();
               }
-              oldEntry.el.textContent = '';
+              clearRouteContent(oldEntry.el);
             }
           }
           deactivateRoute(oldEntry.el);
@@ -928,12 +931,12 @@ export class WebUIRouter {
           keepAlive: entry.keepAlive ?? false,
         });
         if (entry.component) {
-          const override = loaderStates.get(entry.component);
+          const override = loaderStates.get(entry);
           const effectiveOverride = override === LOADER_FAILED ? undefined : override;
 
           const isKeepAlive = entry.keepAlive || getRouteMeta(routeEl)?.keepAlive || false;
-          const existingComp = routeEl.firstElementChild;
-          if (isKeepAlive && existingComp?.matches(entry.component)) {
+          const existingComp = mountedRouteComponent(routeEl);
+          if (isKeepAlive && existingComp?.localName === entry.component.toLowerCase()) {
             entry.compEl = existingComp;
             const stateToApply = effectiveOverride ?? entry.state;
             if (hasState(stateToApply)) {
@@ -944,7 +947,7 @@ export class WebUIRouter {
           } else {
             const stateToApply = effectiveOverride ?? entry.state;
             this.mountComponent(routeEl, entry.component, entry.params, stateToApply, query);
-            entry.compEl = routeEl.firstElementChild ?? undefined;
+            entry.compEl = mountedRouteComponent(routeEl) ?? undefined;
           }
         }
         activateRoute(routeEl, entry.params);
diff --git a/packages/webui-router/src/streaming.ts b/packages/webui-router/src/streaming.ts
index dc9bee93e..d7290c264 100644
--- a/packages/webui-router/src/streaming.ts
+++ b/packages/webui-router/src/streaming.ts
@@ -7,7 +7,7 @@
  * Chunk 2 contains deferred per-component state applied after mount.
  */
 
-import { hasState } from './route-element.js';
+import { hasState, mountedRouteComponent } from './route-element.js';
 import { isStateful } from './types.js';
 import {
   injectCssLinks,
@@ -25,7 +25,6 @@ export interface StreamingContext {
   readonly currentRequestPath: string;
   readonly activeChain: RouteChainEntry[];
   readonly nonce: string;
-  readonly injectedStyles: Set<string>;
   readonly injectedCss: Set<string>;
   setDeferredReader(reader: Promise<void> | null): void;
   setDeferredGeneration(gen: number): void;
@@ -118,7 +117,7 @@ export async function readStreamingPartial(
   const stylesReady = registerTemplatesAndStyles(
     chunk1,
     ctx.nonce,
-    ctx.injectedStyles,
+    ctx.injectedCss,
     ctx.updateInventory,
   );
   injectCssLinks(chunk1, ctx.injectedCss);
@@ -328,7 +327,7 @@ export function applyDeferredStates(
       ((new () => HTMLElement) & { loader?: Function }) | undefined;
     if (ctor && typeof ctor.loader === 'function') continue;
 
-    const compEl = entry.compEl ?? entry.el.querySelector(entry.component);
+    const compEl = entry.compEl ?? mountedRouteComponent(entry.el, entry.component);
     if (!compEl) continue;
     entry.compEl = compEl;
     if (isStateful(compEl)) {
diff --git a/packages/webui-router/src/templates.test.ts b/packages/webui-router/src/templates.test.ts
index 1a388de26..6261f43b3 100644
--- a/packages/webui-router/src/templates.test.ts
+++ b/packages/webui-router/src/templates.test.ts
@@ -87,7 +87,6 @@ test('streaming registration rejects a stale navigation after readiness wait', a
     currentRequestPath: '/old',
     activeChain: [],
     nonce: '',
-    injectedStyles: new Set(),
     injectedCss: new Set(),
     setDeferredReader(reader) {
       deferredReaderSet = reader !== null;
@@ -169,7 +168,6 @@ test('streaming defers chunk-two state until route commit', async () => {
     currentRequestPath: '/new',
     activeChain,
     nonce: '',
-    injectedStyles: new Set(),
     injectedCss: new Set(),
     setDeferredReader(reader) {
       deferredReader = reader;
@@ -244,7 +242,6 @@ test('same-read chunk-two state is folded into commit data once', async () => {
       compEl: component,
     }],
     nonce: '',
-    injectedStyles: new Set(),
     injectedCss: new Set(),
     setDeferredReader(reader) {
       deferredReader = reader;
@@ -322,7 +319,6 @@ test('streaming registration releases its reader when readiness rejects', async
     currentRequestPath: '/failed',
     activeChain: [],
     nonce: '',
-    injectedStyles: new Set(),
     injectedCss: new Set(),
     setDeferredReader() {},
     setDeferredGeneration() {},
@@ -364,7 +360,6 @@ test('router cancels an unread deferred stream when commit rejects', async () =>
     currentRequestPath: '/failed',
     activeChain: [],
     nonce: '',
-    injectedStyles: new Set(),
     injectedCss: new Set(),
     setDeferredReader() {},
     setDeferredGeneration() {},
diff --git a/packages/webui-router/src/templates.ts b/packages/webui-router/src/templates.ts
index 72c645717..4c238854b 100644
--- a/packages/webui-router/src/templates.ts
+++ b/packages/webui-router/src/templates.ts
@@ -10,6 +10,8 @@
  * whether a registered template needs a compiler-owned host.
  */
 
+import type { ComponentStyleResource, ComponentStyles } from './types.js';
+
 /** Shared event name understood by optional framework runtimes. */
 const TEMPLATES_REGISTERED_EVENT = 'webui:templates-registered';
 const READINESS_COMPLETE = (): true => true;
@@ -26,63 +28,54 @@ export function registerTemplatesAndStyles(
   data: {
     templates?: Record<string, unknown>;
     templateFunctions?: Record<string, string>;
-    templateStyles?: string[];
+    componentStyles?: ComponentStyles;
+    inventory?: string;
+  },
+  nonce: string,
+  updateInventory: (inv: string) => void,
+): Promise<void> | undefined;
+export function registerTemplatesAndStyles(
+  data: {
+    templates?: Record<string, unknown>;
+    templateFunctions?: Record<string, string>;
+    componentStyles?: ComponentStyles;
     inventory?: string;
   },
   nonce: string,
   injectedStyles: Set<string>,
   updateInventory: (inv: string) => void,
+): Promise<void> | undefined;
+export function registerTemplatesAndStyles(
+  data: {
+    templates?: Record<string, unknown>;
+    templateFunctions?: Record<string, string>;
+    componentStyles?: ComponentStyles;
+    inventory?: string;
+  },
+  nonce: string,
+  injectedStylesOrUpdate: Set<string> | ((inv: string) => void),
+  maybeUpdateInventory?: (inv: string) => void,
 ): Promise<void> | undefined {
+  const injectedStyles = injectedStylesOrUpdate instanceof Set
+    ? injectedStylesOrUpdate
+    : new Set<string>();
+  const updateInventory = typeof injectedStylesOrUpdate === 'function'
+    ? injectedStylesOrUpdate
+    : maybeUpdateInventory ?? (() => {});
+  const componentStyles = data.componentStyles
+    ? validateComponentStyles(data.componentStyles)
+    : undefined;
+  validateTemplatePayload(data.templates);
+  const styleRegistration = componentStyles
+    ? registerComponentStyleCatalog(componentStyles)
+    : undefined;
   if (data.inventory) {
     updateInventory(data.inventory);
   }
 
-  // 1. CSS modules: each entry is a `<script type="importmap">` tag
-  //    registering one or more component CSS modules under a data:text/css
-  //    URI. Append one importmap script per entry (matching the SSR
-  //    handler's 1:1 emission) so SSR and SPA produce the same DOM shape.
-  //    Multiple Import Maps support (required for this strategy) handles
-  //    the document-level merge.
-  if (data.templateStyles) {
-    for (const scriptMarkup of data.templateStyles) {
-      const trimmed = scriptMarkup.trim();
-      if (!trimmed.startsWith('<script')) continue;
-
-      const openTagEnd = trimmed.indexOf('>');
-      const closeTagStart = trimmed.lastIndexOf('</script>');
-      if (openTagEnd < 0 || closeTagStart <= openTagEnd) continue;
-
-      const jsonBody = trimmed.substring(openTagEnd + 1, closeTagStart);
-      let parsed: { imports?: Record<string, unknown> };
-      try {
-        parsed = JSON.parse(jsonBody) as { imports?: Record<string, unknown> };
-      } catch {
-        continue;
-      }
-      if (!parsed.imports || typeof parsed.imports !== 'object') continue;
-
-      const newImports: Record<string, string> = {};
-      let hasNew = false;
-      for (const [specifier, uri] of Object.entries(parsed.imports)) {
-        if (typeof uri !== 'string' || !uri.startsWith('data:text/css,')) continue;
-        if (injectedStyles.has(specifier)) continue;
-        newImports[specifier] = uri;
-        injectedStyles.add(specifier);
-        hasNew = true;
-      }
-      if (!hasNew) continue;
-
-      const script = document.createElement('script');
-      script.type = 'importmap';
-      if (nonce) script.nonce = nonce;
-      script.textContent = JSON.stringify({ imports: newImports });
-      document.head.appendChild(script);
-    }
-  }
-
   let executableTemplateBody = '';
   let registeredTemplates: Record<string, unknown> | undefined;
-  // 2. Template closures: execute only the component-local condition arrays.
+  // 1. Template closures: execute only the component-local condition arrays.
   //    TRUST BOUNDARY: closure scripts come from the same-origin server
   //    that compiled the protocol. The CSP nonce gates script execution.
   //    If the server endpoint is compromised, this is an XSS vector —
@@ -104,9 +97,15 @@ export function registerTemplatesAndStyles(
     }
   }
 
-  // 3. Template metadata: register JSON-safe data directly. FAST
-  //    `<f-template>` HTML strings are materialized as DOM; executable
-  //    template strings are intentionally unsupported.
+  if (executableTemplateBody) {
+    const script = document.createElement('script');
+    if (nonce) script.nonce = nonce;
+    script.textContent = `(function(){${executableTemplateBody}})();`;
+    document.head.appendChild(script);
+    document.head.removeChild(script);
+  }
+
+  // 2. Template metadata is published only after resources and closures.
   if (data.templates) {
     const w = window as unknown as { __webui?: { templates?: Record<string, unknown>; [key: string]: unknown } };
     if (!w.__webui) w.__webui = {};
@@ -133,15 +132,118 @@ export function registerTemplatesAndStyles(
     }
   }
 
-  if (executableTemplateBody) {
-    const script = document.createElement('script');
-    if (nonce) script.nonce = nonce;
-    script.textContent = `(function(){${executableTemplateBody}})();`;
-    document.head.appendChild(script);
-    document.head.removeChild(script);
+  // The bridge already accepted this exact payload. Only fallback listeners
+  // need styles included with the template announcement.
+  const readiness = notifyTemplatesRegistered(
+    registeredTemplates,
+    styleRegistration?.bridged ? undefined : componentStyles,
+  );
+  if (!styleRegistration?.ready) return readiness;
+  if (!readiness) return styleRegistration.ready;
+  return Promise.all([styleRegistration.ready, readiness]).then(IGNORE_READINESS_RESULTS);
+}
+
+/** Register initial bootstrap styles before announcing already-published templates. */
+export function registerInitialTemplatesAndStyles(
+  templates: Record<string, unknown>,
+  componentStyles: ComponentStyles,
+): void {
+  const styles = validateComponentStyles(componentStyles);
+  validateTemplatePayload(templates);
+  const styleRegistration = registerComponentStyleCatalog(styles);
+  notifyTemplatesRegistered(
+    templates,
+    styleRegistration.bridged ? undefined : styles,
+  );
+}
+
+function registerComponentStyleCatalog(componentStyles: ComponentStyles): {
+  bridged: boolean;
+  ready?: Promise<void>;
+} {
+  const register = window.__webuiRegisterComponentStyles;
+  if (register) {
+    return { bridged: true, ready: register(componentStyles) };
+  }
+  const w = window as Window;
+  if (!w.__webui) w.__webui = {};
+  w.__webui.componentStyles = mergeFallbackComponentStyles(
+    w.__webui.componentStyles,
+    componentStyles,
+  );
+  return { bridged: false };
+}
+
+function mergeFallbackComponentStyles(
+  current: ComponentStyles | undefined,
+  next: ComponentStyles,
+): ComponentStyles {
+  if (!current) return next;
+  if (current.strategy !== next.strategy) {
+    throw new Error('[Router] Conflicting componentStyles strategies.');
+  }
+  const resources = { ...current.resources };
+  const closures = { ...current.closures };
+  for (const id of Object.keys(next.resources)) {
+    const existing = resources[id];
+    if (existing && !sameComponentStyleResource(existing, next.resources[id])) {
+      throw new Error(`[Router] Conflicting component style resource "${id}".`);
+    }
+    resources[id] = next.resources[id];
+  }
+  for (const root of Object.keys(next.closures)) {
+    const existing = closures[root];
+    if (existing && (
+      existing.length !== next.closures[root].length ||
+      existing.some((id, index) => id !== next.closures[root][index])
+    )) {
+      throw new Error(`[Router] Conflicting component style closure "${root}".`);
+    }
+    closures[root] = next.closures[root];
+  }
+  return {
+    version: 1,
+    strategy: next.strategy,
+    resources,
+    closures,
+  };
+}
+
+function sameComponentStyleResource(
+  current: ComponentStyleResource,
+  next: ComponentStyleResource,
+): boolean {
+  if (current === next) return true;
+  const currentMembers = current.members;
+  const nextMembers = next.members;
+  if (
+    currentMembers?.length !== nextMembers?.length ||
+    currentMembers?.some((member, index) => member !== nextMembers?.[index])
+  ) {
+    return false;
   }
+  switch (current.kind) {
+    case 'link':
+      return next.kind === 'link' && current.href === next.href;
+    case 'style':
+      return next.kind === 'style' && current.css === next.css;
+    case 'module':
+      return next.kind === 'module' &&
+        current.specifier === next.specifier &&
+        current.css === next.css;
+  }
+}
 
-  return notifyTemplatesRegistered(registeredTemplates);
+function validateTemplatePayload(
+  templates: Record<string, unknown> | undefined,
+): void {
+  if (!templates) return;
+  for (const tag of Object.keys(templates)) {
+    const template = templates[tag];
+    if (typeof template === 'string' && !template.startsWith('<')) {
+      throw new Error(`[Router] Unsupported executable template payload for ${tag}.`);
+    }
+  }
 }
 
 /** Inject CSS stylesheet links from a partial response. */
@@ -198,8 +300,8 @@ export async function fetchComponentTemplates(
   inventoryHex: string,
   templateEndpoint: string,
   nonce: string,
-  injectedStyles: Set<string>,
-  updateInventory: (inv: string) => void,
+  injectedStylesOrUpdate: Set<string> | ((inv: string) => void),
+  maybeUpdateInventory?: (inv: string) => void,
 ): Promise<void> {
   const url = `${templateEndpoint}?t=${tags.join(',')}&inv=${encodeURIComponent(inventoryHex)}`;
   const resp = await fetch(url);
@@ -209,13 +311,21 @@ export async function fetchComponentTemplates(
   const data = await resp.json();
 
   // Register using the same pipeline as partial navigation
-  const ready = registerTemplatesAndStyles(data, nonce, injectedStyles, updateInventory);
+  const ready = injectedStylesOrUpdate instanceof Set
+    ? registerTemplatesAndStyles(
+      data,
+      nonce,
+      injectedStylesOrUpdate,
+      maybeUpdateInventory ?? (() => {}),
+    )
+    : registerTemplatesAndStyles(data, nonce, injectedStylesOrUpdate);
   if (ready) await ready;
 }
 
 /** Announce newly registered WebUI templates. */
 export function notifyTemplatesRegistered(
   templates: Record<string, unknown> | undefined,
+  componentStyles?: ComponentStyles,
 ): Promise<void> | undefined {
   if (
     !templates ||
@@ -238,7 +348,7 @@ export function notifyTemplatesRegistered(
   };
   try {
     window.dispatchEvent(new CustomEvent(TEMPLATES_REGISTERED_EVENT, {
-      detail: { templates, waitUntil },
+      detail: { templates, componentStyles, waitUntil },
     }));
   } finally {
     accepting = false;
@@ -247,3 +357,66 @@ export function notifyTemplatesRegistered(
     ? Promise.all(pending).then(IGNORE_READINESS_RESULTS)
     : undefined;
 }
+
+function validateComponentStyles(value: unknown): ComponentStyles {
+  if (
+    !value ||
+    typeof value !== 'object' ||
+    Array.isArray(value) ||
+    (value as { version?: unknown }).version !== 1
+  ) {
+    throw new Error('[Router] componentStyles must use version 1.');
+  }
+  const styles = value as unknown as ComponentStyles;
+  if (
+    styles.strategy !== 'link' &&
+    styles.strategy !== 'style' &&
+    styles.strategy !== 'module'
+  ) {
+    throw new Error('[Router] Invalid componentStyles strategy.');
+  }
+  if (
+    !styles.resources ||
+    typeof styles.resources !== 'object' ||
+    Array.isArray(styles.resources) ||
+    !styles.closures ||
+    typeof styles.closures !== 'object' ||
+    Array.isArray(styles.closures)
+  ) {
+    throw new Error('[Router] componentStyles must contain resources and closures.');
+  }
+  for (const id of Object.keys(styles.resources)) {
+    const resource = styles.resources[id];
+    if (!id || !resource || resource.kind !== styles.strategy) {
+      throw new Error(`[Router] Invalid component style resource "${id}".`);
+    }
+    if (
+      (resource.kind === 'link' && (!resource.href || typeof resource.href !== 'string')) ||
+      (resource.kind === 'style' && typeof resource.css !== 'string') ||
+      (resource.kind === 'module' && (
+        !resource.specifier || typeof resource.specifier !== 'string' ||
+        typeof resource.css !== 'string'
+      ))
+    ) {
+      throw new Error(`[Router] Invalid component style resource "${id}".`);
+    }
+    if (
+      resource.members !== undefined &&
+      (
+        !Array.isArray(resource.members) ||
+        resource.members.length < 2 ||
+        resource.members.some(member => typeof member !== 'string' || !member) ||
+        new Set(resource.members).size !== resource.members.length
+      )
+    ) {
+      throw new Error(`[Router] Invalid component style resource members "${id}".`);
+    }
+  }
+  for (const root of Object.keys(styles.closures)) {
+    const closure = styles.closures[root];
+    if (!root || !Array.isArray(closure) || closure.some(id => typeof id !== 'string' || !id)) {
+      throw new Error(`[Router] Invalid component style closure "${root}".`);
+    }
+  }
+  return styles;
+}
diff --git a/packages/webui-router/src/types.ts b/packages/webui-router/src/types.ts
index bdf323471..f8272935b 100644
--- a/packages/webui-router/src/types.ts
+++ b/packages/webui-router/src/types.ts
@@ -10,10 +10,12 @@ declare global {
     styles?: string[];
     state?: Record<string, unknown>;
     templateHostExclusions?: Set<string>;
+    componentStyles?: ComponentStyles;
   }
 
   interface Window {
     __webui?: WebUIRuntimeGlobal;
+    __webuiRegisterComponentStyles?: (value: unknown) => Promise<void> | undefined;
   }
 }
 
@@ -21,6 +23,22 @@ declare global {
  * Public type definitions for @microsoft/webui-router.
  */
 
+export type ComponentStyleResource = (
+  | { kind: 'link'; href: string }
+  | { kind: 'style'; css: string }
+  | { kind: 'module'; specifier: string; css: string }
+) & {
+  /** Component resource IDs whose rules this bundled resource covers. */
+  members?: string[];
+};
+
+export interface ComponentStyles {
+  version: 1;
+  strategy: 'link' | 'style' | 'module';
+  resources: Record<string, ComponentStyleResource>;
+  closures: Record<string, string[]>;
+}
+
 /** Configuration passed to `Router.start()`. */
 export interface RouterConfig {
   /**
diff --git a/packages/webui-test-support/src/fixture-render.ts b/packages/webui-test-support/src/fixture-render.ts
index 2e2ea8f67..aeedea9db 100644
--- a/packages/webui-test-support/src/fixture-render.ts
+++ b/packages/webui-test-support/src/fixture-render.ts
@@ -81,7 +81,7 @@ function renderOne(
   if (fixtureConfig.css === 'link' || fixtureConfig.css === 'style' || fixtureConfig.css === 'module') {
     buildOptions.css = fixtureConfig.css;
   }
-  if (fixtureConfig.dom === 'light' || fixtureConfig.dom === 'shadow') {
+  if (fixtureConfig.dom === 'shadow' || fixtureConfig.dom === 'light') {
     buildOptions.dom = fixtureConfig.dom;
   }
   if (projectionManifest) {
diff --git a/packages/webui/README.md b/packages/webui/README.md
index 608ea7169..dc0671418 100644
--- a/packages/webui/README.md
+++ b/packages/webui/README.md
@@ -41,7 +41,8 @@ const result = build({
   appDir: "./src",        // Path to the template directory
   entry: "index.html",   // Entry file (default: "index.html")
   css: "link",           // CSS strategy: "link", "style", or "module"
-  dom: "shadow",         // DOM strategy: "shadow" or "light"
+  dom: "light",          // Optional: global Light + authored Shadow islands
+  cssBundle: true,       // Merge component stylesheets into shared chunks
   plugin: "webui",       // Parser plugin name
   components: [],        // Additional component sources
   componentAssetRoots: ["settings-dialog"], // Static .webui.js asset roots
@@ -59,6 +60,13 @@ const result = build({
 // result.stats     - { durationMs, fragmentCount, componentCount, cssFileCount, protocolSizeBytes, tokenCount }
 ```
 
+Unwrapped components default to generated open Shadow roots. Set `dom: "light"`
+to render unwrapped components as global Light DOM. A sole bare `<template>` is
+also an explicit Light wrapper and is unwrapped; a sole
+`<template shadowrootmode="open">` remains Shadow in either mode. Light CSS uses
+ordinary selectors; `:host`, `:host-context`, and `::slotted` fail with
+`unsupported-light-css`.
+
 Static component assets use a root/chunk graph. Entry-reachable dependencies
 remain external, dependencies used by one root stay inline, and dependencies
 with an identical multi-root consumer set are emitted once as dynamic chunks.
@@ -244,11 +252,11 @@ Produces a JSON partial response for client-side navigation, including state, te
 
 ### `protocol.renderComponentTemplates(componentTags, inventoryHex): string`
 
-Renders templates and styles for on-demand component loading (used by `Router.ensureLoaded()`). Returns a JSON string with `templateStyles`, `templates`, `templateFunctions`, and `inventory`. Uses the same inventory bitfield as partial navigation to avoid sending duplicates.
+Renders templates and styles for on-demand component loading (used by `Router.ensureLoaded()`). Returns a JSON string with `componentStyles`, `templates`, `templateFunctions`, and `inventory`. Uses the same inventory bitfield as partial navigation to avoid sending duplicates.
 
 ```js
 const json = protocol.renderComponentTemplates(["settings-dialog"], inventoryHex);
-const { templates, templateFunctions, templateStyles, inventory } = JSON.parse(json);
+const { templates, templateFunctions, componentStyles, inventory } = JSON.parse(json);
 ```
 
 ## CLI
diff --git a/packages/webui/src/index.ts b/packages/webui/src/index.ts
index 945b49415..9fc0abbc6 100644
--- a/packages/webui/src/index.ts
+++ b/packages/webui/src/index.ts
@@ -16,8 +16,19 @@ export interface BuildOptions {
   entry?: string;
   /** CSS delivery strategy: "link" (default), "style", or "module". */
   css?: "link" | "style" | "module";
-  /** DOM strategy for component rendering: "shadow" (default) or "light". */
+  /** Fallback DOM strategy for unwrapped components: "shadow" (default) or "light". */
   dom?: "shadow" | "light";
+  /**
+   * Merge component stylesheets into shared bundled chunks.
+   *
+   * Composes with `css`: bundling decides how stylesheets are grouped, `css`
+   * decides how they reach the page. Stylesheets reached from more than one CSS
+   * tree are split into their own chunk so they are downloaded and cached once.
+   *
+   * Rejected with `css: "module"`, which already inlines every stylesheet as a
+   * data URI.
+   */
+  cssBundle?: boolean;
   /** Parser plugin name. */
   plugin?: string;
   /** Additional component sources (npm packages or local paths). */
@@ -96,6 +107,22 @@ export interface ProtocolOptions {
  */
 export type BoundaryMode = "final" | "updatable";
 
+export type ComponentStyleResource = (
+  | { kind: "link"; href: string }
+  | { kind: "style"; css: string }
+  | { kind: "module"; specifier: string; css: string }
+) & {
+  /** Component resource IDs whose rules this bundled resource covers. */
+  members?: string[];
+};
+
+export interface ComponentStyles {
+  version: 1;
+  strategy: "link" | "style" | "module";
+  resources: Record<string, ComponentStyleResource>;
+  closures: Record<string, string[]>;
+}
+
 /** A runtime-discovered boundary occurrence waiting to be resumed. */
 export interface BoundaryDescriptor {
   /** Gapless response-local occurrence ID passed to `resume()` and `update()`. */
@@ -136,8 +163,8 @@ export interface StreamOptions {
 
 /** Response from `renderComponentTemplates()` for on-demand component loading. */
 export interface ComponentTemplatesResponse {
-  /** Module CSS `<style>` strings for the requested components. */
-  templateStyles: string[];
+  /** Versioned component style definitions and ordered closures. */
+  componentStyles: ComponentStyles;
   /** JSON-safe component template metadata keyed by tag name. */
   templates: Record<string, unknown>;
   /** JavaScript condition closure arrays keyed by tag name. */
@@ -154,6 +181,8 @@ export interface PartialResponse {
   templates: Record<string, unknown>;
   /** JavaScript condition closure arrays keyed by tag name. */
   templateFunctions?: Record<string, string>;
+  /** Versioned component style definitions and ordered closures. */
+  componentStyles: ComponentStyles;
   /** Updated hex bitmask of loaded component templates. */
   inventory: string;
   /** The request path. */
@@ -175,6 +204,8 @@ interface NativeAddon {
     appDir: string;
     entry?: string;
     css?: string;
+    dom?: string;
+    cssBundle?: boolean;
     plugin?: string;
     components?: string[];
     componentAssetRoots?: string[];
diff --git a/packages/webui/src/projection/fixtures/conformance.ts b/packages/webui/src/projection/fixtures/conformance.ts
index 5d1e2d2b1..1d83303b4 100644
--- a/packages/webui/src/projection/fixtures/conformance.ts
+++ b/packages/webui/src/projection/fixtures/conformance.ts
@@ -71,7 +71,7 @@ const MANIFEST_PATH = path.join(
 );
 
 /**
- * Run all compiler-scoped fixtures, including byte-for-byte determinism and
+ * Run all Light-DOM fixtures, including byte-for-byte determinism and
  * full manifest structural/hash validation.
  */
 export async function runConformanceSuite(
diff --git a/packages/webui/test/integration.test.ts b/packages/webui/test/integration.test.ts
index 69f68382f..0013b4452 100644
--- a/packages/webui/test/integration.test.ts
+++ b/packages/webui/test/integration.test.ts
@@ -36,7 +36,7 @@ before(() => {
       ? 'libwebui_node.dylib'
       : 'libwebui_node.so';
   const workspaceAddon = join(process.cwd(), '..', '..', 'target', 'debug', addonName);
-  if (existsSync(workspaceAddon)) {
+  if (!process.env.WEBUI_ADDON_PATH && existsSync(workspaceAddon)) {
     process.env.WEBUI_ADDON_PATH = workspaceAddon;
   }
 
@@ -57,7 +57,11 @@ before(() => {
 </html>
 `);
 
-  writeFileSync(join(appDir, 'my-card.html'), '<div class="card"><slot></slot></div>');
+  writeFileSync(join(appDir, 'my-card.html'), '<div class="card">Content</div>');
+  writeFileSync(
+    join(appDir, 'shadow-card.html'),
+    '<template shadowrootmode="open"><div><slot></slot></div></template>',
+  );
   writeFileSync(join(appDir, 'my-card.css'), '.card { border: 1px solid #ccc; }');
   writeFileSync(join(appDir, 'index2.html'), '<my-card>Hello</my-card>');
   writeFileSync(join(appDir, 'app-shell.html'), '<div>{{name}}</div>');
@@ -130,6 +134,26 @@ describe('build', () => {
     assert.equal(result.stats.cssFileCount, 1);
   });
 
+  test('defaults to Shadow and supports mixed Light mode', () => {
+    const defaultShadow = build({ appDir, entry: 'index2.html' });
+    assert.ok(inspect(defaultShadow.protocol).includes('shadowrootmode'));
+
+    const light = build({ appDir, entry: 'index2.html', dom: 'light' });
+    assert.ok(!inspect(light.protocol).includes('shadowrootmode'));
+
+    writeFileSync(join(appDir, 'index-shadow.html'), '<shadow-card>slot</shadow-card>');
+    const shadow = build({ appDir, entry: 'index-shadow.html', dom: 'light' });
+    assert.ok(inspect(shadow.protocol).includes('shadowrootmode'));
+  });
+
+  test('BuildOptions exposes the DOM strategy union', () => {
+    const options: import('@microsoft/webui').BuildOptions = { appDir, dom: 'light' };
+    assert.equal(options.dom, 'light');
+    // @ts-expect-error only open Shadow or global Light strategies are supported.
+    const invalid: import('@microsoft/webui').BuildOptions = { appDir, dom: 'closed' };
+    assert.equal(invalid.appDir, appDir);
+  });
+
   test('emits static component asset files and an analyzable metafile', async () => {
     const result = build({
       appDir,
@@ -583,7 +607,7 @@ describe('renderComponentTemplates', () => {
     const json = protocol.renderComponentTemplates(['my-card'], '');
     const parsed: ComponentTemplatesResponse = JSON.parse(json);
     assert.equal(typeof parsed.templates, 'object');
-    assert.ok(Array.isArray(parsed.templateStyles));
+    assert.equal(typeof parsed.componentStyles, 'object');
     assert.equal(typeof parsed.templateFunctions, 'object');
     assert.equal(typeof parsed.inventory, 'string');
   });
@@ -595,7 +619,8 @@ describe('renderComponentTemplates', () => {
     const parsed: ComponentTemplatesResponse = JSON.parse(json);
     assert.deepEqual(parsed.templates, {});
     assert.deepEqual(parsed.templateFunctions, {});
-    assert.deepEqual(parsed.templateStyles, []);
+    assert.deepEqual(parsed.componentStyles.resources, {});
+    assert.deepEqual(parsed.componentStyles.closures, {});
   });
 });