diff --git a/DESIGN.md b/DESIGN.md
index 5833001e..cf1dbd7e 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -319,7 +319,7 @@ without a server round-trip.
 
 **Partial response:** `render_partial()` returns `{ templateStyles, templates, inventory, path, chain, cacheTags, cacheControl }`. The caller adds application state to the response (e.g. as a top-level `state` field for non-streaming, or as an NDJSON Chunk 2 for streaming):
 - `state`: (added by caller) route-scoped application data — the router applies it to components via `setState()`
-- `templateStyles`: module CSS definition tags (`<style type="module" specifier="...">`) for newly shipped components. Empty array for Link/Style modes. The client appends these to `<head>` before evaluating template scripts so adopted stylesheets are available
+- `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 evaluating template scripts so adopted stylesheets are available
 - `templates`: client template script/markup payloads the client doesn't already have (filtered by inventory bitmask). Format depends on the active parser plugin
 - `inventory`: updated hex bitmask of loaded templates
 - `chain`: matched route chain array — each entry has `component`, `path`, optional `params`, `exact`, `allowedQuery`, `keepAlive`, `pendingComponent`, `errorComponent`, and `invalidates`
@@ -499,7 +499,8 @@ pub struct RenderOptions<'a> {
     /// The URL path to match routes against (e.g., `"/contacts/42"`).
     pub request_path: &'a str,
     /// Optional CSP nonce reflected into the `<meta name="webui-nonce">`
-    /// tag and onto every emitted inline `<script>` / `<style type="module">`.
+    /// tag and onto every SSR-emitted inline `<script>` tag (bootstrap
+    /// scripts and CSS-module importmaps - see [CssStrategy::Module](#css-strategy)).
     pub nonce: Option<&'a str>,
     /// Optional HTML emitted at the structural `head_end` boundary —
     /// see [Per-Render HTML Injection](#per-render-html-injection).
@@ -945,16 +946,16 @@ pub enum CssStrategy {
     Link,
     /// Embed CSS content inline in `<style>` tags within the shadow DOM template.
     Style,
-    /// Emit a `<style type="module" specifier="component">` definition once per
-    /// page and reference it via `shadowrootadoptedstylesheets` on each shadow
-    /// root `<template>`.
+    /// 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>`.
     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.
 - **Style**: Embeds the full CSS content in `<style>` tags inside the shadow DOM template. Used when all files are needed in-memory.
-- **Module**: Uses the [Declarative CSS Module Scripts](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md) proposal. During SSR, emits a `<style type="module" specifier="component-name">` definition in each component's light DOM on first render (e.g., `<my-comp><style type="module" ...>CSS</style><template ...>`) and adds `shadowrootadoptedstylesheets="component-name"` to each shadow root `<template>`. Components inside false `<if>` blocks or empty `<for>` loops that were not rendered during SSR get their module style definitions emitted at `body_end`, so client-side activation can adopt them. When a CSP nonce is configured (via `RenderOptions::with_nonce` / `webui_handler_set_nonce`), the SSR-emitted `<style type="module">` tags include `nonce="VALUE"` (in `type`, `nonce`, `specifier` order) so strict `style-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, module style definitions for newly needed components are sent in the `templateStyles` array; the router appends them to `<head>` before executing template scripts. WebUI Framework compiled metadata carries the adopted stylesheet specifier (`sa`) so client-created components can adopt the registered stylesheet on their shadow root.
+- **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>`. 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 executing template scripts). WebUI Framework compiled metadata carries the adopted stylesheet specifier (`sa`) so client-created components can adopt the registered stylesheet on their shadow root.
 
 Set at construction time with `HtmlParser::with_options(ParserOptions::try_new(...))`.
 
diff --git a/crates/webui-handler/src/css_module.rs b/crates/webui-handler/src/css_module.rs
new file mode 100644
index 00000000..8876c2a3
--- /dev/null
+++ b/crates/webui-handler/src/css_module.rs
@@ -0,0 +1,176 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+//! Shared helpers for emitting CSS module definitions as `<script type="importmap">`
+//! tags with `data:text/css,…` URIs.
+//!
+//! Both the SSR inline emission path (`lib.rs::emit_css_module_importmap`) and
+//! the SPA partial-navigation path (`route_handler.rs::collect_component_assets`)
+//! use this helper to produce a single canonical wire shape, so the client only
+//! needs to understand one format.
+
+use std::fmt::Write as _;
+
+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.
+///
+/// Requires browser support for Multiple Import Maps (Chrome 133+); the
+/// browser merges each emitted importmap into the document-level resolution
+/// table.
+pub(crate) fn build_importmap_tag(specifier: &str, css: &str, nonce: Option<&str>) -> String {
+    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 mut out = String::with_capacity(cap);
+    out.push_str("<script type=\"importmap\"");
+    if let Some(n) = nonce {
+        out.push_str(" nonce=\"");
+        out.push_str(n);
+        out.push('"');
+    }
+    out.push('>');
+    out.push_str(&body);
+    out.push_str("</script>");
+    out
+}
+
+fn build_data_uri(css: &str) -> String {
+    let mut out = String::with_capacity("data:text/css,".len() + css.len());
+    out.push_str("data:text/css,");
+    percent_encode_css_into(css, &mut out);
+    out
+}
+
+fn build_importmap_json(specifier: &str, data_uri: String) -> String {
+    let mut imports = serde_json::Map::with_capacity(1);
+    imports.insert(specifier.to_owned(), Value::String(data_uri));
+    let mut root = serde_json::Map::with_capacity(1);
+    root.insert("imports".into(), Value::Object(imports));
+    Value::Object(root).to_string()
+}
+
+// Percent-encode bytes that would mis-parse in a `data:` URI or break out
+// of the surrounding `<script type="importmap">` raw-text element:
+// `%` (escape), `#` (fragment delimiter), `"`, `<` / `>` (HTML script-data
+// terminator + attribute parser), whitespace, and non-ASCII / control bytes.
+fn percent_encode_css_into(css: &str, out: &mut String) {
+    for b in css.bytes() {
+        let needs_encoding = matches!(
+            b,
+            b'%' | b'#' | b'"' | b'<' | b'>' | b' ' | b'\t' | b'\n' | b'\r'
+        ) || !(0x20..0x80).contains(&b);
+        if needs_encoding {
+            let _ = write!(out, "%{:02X}", b);
+        } else {
+            out.push(char::from(b));
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn build_importmap_tag_basic() {
+        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>"#
+        );
+    }
+
+    #[test]
+    fn build_importmap_tag_with_nonce() {
+        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>"#
+        );
+    }
+
+    #[test]
+    fn percent_encoder_escapes_url_unsafe_bytes() {
+        let mut out = String::new();
+        // %, #, ", <, >, whitespace must all be percent-escaped. Printable
+        // ASCII outside that set (including `{`, `}`, `\`) is preserved
+        // verbatim; JSON-level escaping of `\` and `"` is handled by
+        // serde_json when the URI is embedded inside the importmap object.
+        percent_encode_css_into(".a{content:\"\\E000 #x %y\";}", &mut out);
+        assert_eq!(out, r#".a{content:%22\E000%20%23x%20%25y%22;}"#);
+    }
+
+    #[test]
+    fn percent_encoder_escapes_non_ascii_bytes() {
+        let mut out = String::new();
+        percent_encode_css_into(".a::before{content:\"★\"}", &mut out);
+        // ★ is U+2605, UTF-8 bytes E2 98 85.
+        assert_eq!(out, ".a::before{content:%22%E2%98%85%22}");
+    }
+
+    #[test]
+    fn empty_css_produces_empty_data_uri() {
+        let tag = build_importmap_tag("empty", "", None);
+        assert!(tag.contains(r#""empty":"data:text/css,""#));
+    }
+
+    #[test]
+    fn json_layer_escapes_backslash_in_css() {
+        // CSS escapes like `\E000` survive the percent encoder (the bytes
+        // are printable ASCII) but must still be JSON-escaped so the
+        // resulting importmap parses. `serde_json` produces `\\E000`.
+        let tag = build_importmap_tag("ic", "a::before{content:\"\\E000\"}", None);
+        assert!(
+            tag.contains(r#""data:text/css,a::before{content:%22\\E000%22}""#),
+            "backslash inside the data URI must be JSON-escaped (got: {tag})"
+        );
+    }
+
+    #[test]
+    fn css_with_script_close_tag_cannot_break_out_of_importmap_script() {
+        // Regression guard: `<` and `>` must be percent-encoded so CSS
+        // content containing `</script>` (or any tag-like sequence) cannot
+        // terminate the surrounding `<script type="importmap">` element.
+        // The HTML parser tokenizes script bodies in raw-text mode and
+        // will treat any literal `</script>` as the end tag regardless of
+        // JSON quoting.
+        let malicious = r#".a::before{content:"</script><script>alert(1)</script>";}"#;
+        let tag = build_importmap_tag("evil", malicious, None);
+
+        // Exactly one `</script>` (the real closing tag) and one `<script`
+        // (the real opening tag) may appear; the encoded payload must not
+        // contribute any extra tag-like sequences.
+        assert_eq!(
+            tag.matches("</script>").count(),
+            1,
+            "only the legitimate closing tag may appear: {tag}"
+        );
+        assert_eq!(
+            tag.matches("<script").count(),
+            1,
+            "only the legitimate opening tag may appear: {tag}"
+        );
+
+        // The body (between the opening `>` and the real closing tag)
+        // must not contain any raw `<` or `>`.
+        let body_start = tag.find('>').expect("opening tag must terminate") + 1;
+        let body_end = tag.rfind("</script>").expect("closing tag must exist");
+        let body = &tag[body_start..body_end];
+        assert!(
+            !body.contains('<') && !body.contains('>'),
+            "no raw `<` or `>` may appear inside the importmap body: {body}"
+        );
+    }
+}
diff --git a/crates/webui-handler/src/lib.rs b/crates/webui-handler/src/lib.rs
index eef67b88..a00c9335 100644
--- a/crates/webui-handler/src/lib.rs
+++ b/crates/webui-handler/src/lib.rs
@@ -6,6 +6,7 @@
 //! This crate provides functionality to process and render WebUI protocols
 //! into final HTML output based on provided data.
 
+pub(crate) mod css_module;
 pub(crate) mod html_encode;
 pub mod plugin;
 pub mod route_handler;
@@ -209,7 +210,7 @@ struct WebUIProcessContext<'a> {
     route_base: Cow<'a, str>,
     /// Component names visited during rendering (for selective f-template emission
     /// and CSS module dedup — only the first render of each component emits
-    /// its `<style type="module">` tag).
+    /// its `<script type="importmap">` data-URI tag).
     rendered_components: HashSet<String>,
     /// Per-render plugin instance created from the handler's factory.
     plugin: Option<Box<dyn HandlerPlugin>>,
@@ -727,15 +728,36 @@ impl WebUIHandler {
         Ok(())
     }
 
-    /// Emit a `<style type="module">` tag for a component's CSS module definition.
+    /// Emit a `<script type="importmap">` tag that registers a component's
+    /// CSS module under its specifier via a `data:text/css,…` URI.
     ///
-    /// Only emits on first render of this component (deduped by `rendered_components`).
-    /// Placed in the component's light DOM so the browser can register the CSS module:
-    /// `<my-comp><style type="module" specifier="my-comp">CSS</style><template ...>`.
+    /// Requires Multiple Import Maps (Chrome 133+); each call emits an
+    /// independent importmap that the browser merges at the document
+    /// level. The per-render CSP nonce is applied when set (importmap
+    /// scripts honor `script-src`).
     ///
-    /// This keeps SSR output lean — only components actually rendered on the current
-    /// route get their style definitions. Components on other routes receive their
-    /// definitions via `templateStyles` during SPA partial navigation.
+    /// Example for `my-comp` with CSS `span{color:blue;}`:
+    /// `<script type="importmap" nonce="...">{"imports":{"my-comp":"data:text/css,span{color:blue;}"}}</script>`
+    fn emit_css_module_importmap(
+        &self,
+        specifier: &str,
+        css: &str,
+        context: &mut WebUIProcessContext,
+    ) -> Result<()> {
+        let tag = crate::css_module::build_importmap_tag(specifier, css, context.nonce);
+        context.writer.write(&tag)?;
+        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.
     fn emit_css_module(
         &self,
         component: &webui_protocol::WebUIFragmentComponent,
@@ -749,17 +771,7 @@ impl WebUIHandler {
                 .map(|c| c.css.as_str())
                 .filter(|s| !s.is_empty())
             {
-                context.writer.write("<style type=\"module\"")?;
-                if let Some(nonce) = context.nonce {
-                    context.writer.write(" nonce=\"")?;
-                    context.writer.write(nonce)?;
-                    context.writer.write("\"")?;
-                }
-                context.writer.write(" specifier=\"")?;
-                context.writer.write(&component.fragment_id)?;
-                context.writer.write("\">")?;
-                context.writer.write(css)?;
-                context.writer.write("</style>")?;
+                self.emit_css_module_importmap(&component.fragment_id, css, context)?;
             }
         }
         Ok(())
@@ -846,11 +858,8 @@ impl WebUIHandler {
         component: &webui_protocol::WebUIFragmentComponent,
         context: &mut WebUIProcessContext,
     ) -> Result<()> {
-        // Emit CSS module into the component's light DOM on first encounter.
-        // Only rendered components get their <style type="module"> definition
-        // during SSR. Components on other routes will receive theirs via the
-        // templateStyles array in the SPA partial response instead.
-        // Produces: <my-comp><style type="module" specifier="my-comp">CSS</style><template ...>
+        // Emit the component's CSS module importmap into its light DOM
+        // on first encounter (see `emit_css_module`).
         if !context.rendered_components.contains(&component.fragment_id) {
             self.emit_css_module(component, context)?;
         }
@@ -1016,15 +1025,12 @@ impl WebUIHandler {
             }
 
             // Emit CSS <link> tags in <head> for Link-strategy components.
-            //
-            // The protocol carries css_strategy and dom_strategy set at build
-            // time. For components with a non-empty css_href:
+            // 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-strategy embeds CSS inside the shadow DOM template.
-            // Module-strategy emits <style type="module"> inline in each
-            // component's light DOM during rendering (via emit_css_module).
+            // 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;
 
@@ -1106,11 +1112,9 @@ impl WebUIHandler {
                     &mut context.route_cache,
                 );
 
-                // Emit CSS module definitions for reachable-but-unrendered components.
-                // Rendered components already got their <style type="module"> inline
-                // during the render pass (via emit_css_module). Unrendered components
-                // need their definitions here so the framework can adopt them when
-                // the <if> condition flips true client-side.
+                // 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
@@ -1120,17 +1124,7 @@ impl WebUIHandler {
                             .map(|c| c.css.as_str())
                             .filter(|s| !s.is_empty())
                         {
-                            context.writer.write("<style type=\"module\"")?;
-                            if let Some(nonce) = context.nonce {
-                                context.writer.write(" nonce=\"")?;
-                                context.writer.write(nonce)?;
-                                context.writer.write("\"")?;
-                            }
-                            context.writer.write(" specifier=\"")?;
-                            context.writer.write(name)?;
-                            context.writer.write("\">")?;
-                            context.writer.write(css)?;
-                            context.writer.write("</style>")?;
+                            self.emit_css_module_importmap(name, css, context)?;
                         }
                     }
                 }
@@ -6262,13 +6256,15 @@ mod tests {
 
         let html = writer.get_content();
 
-        // CSS module should appear exactly once
-        let count = html
-            .matches(r#"<style type="module" specifier="my-card">"#)
-            .count();
+        // CSS module importmap should appear exactly once
+        let count = html.matches(r#"<script type="importmap""#).count();
         assert_eq!(
             count, 1,
-            "CSS module should be emitted once, got {count} in: {html}"
+            "CSS module importmap should be emitted once, got {count} in: {html}"
+        );
+        assert!(
+            html.contains(r#""my-card":"data:text/css,"#),
+            "Importmap must register my-card under a data: URI: {html}"
         );
 
         // Template content should appear twice (once per component instance)
@@ -6280,8 +6276,8 @@ mod tests {
 
         // CSS module should be in <body> (inline), not in <head>
         let css_pos = html
-            .find(r#"<style type="module""#)
-            .expect("CSS module missing");
+            .find(r#"<script type="importmap""#)
+            .expect("CSS module importmap missing");
         let body_pos = html.find("<body>").expect("<body> missing");
         assert!(
             css_pos > body_pos,
@@ -6328,7 +6324,7 @@ mod tests {
     #[test]
     fn test_non_module_strategy_no_css_in_head() {
         // When component_css is empty (Link/Style strategies), no
-        // <style type="module"> tags should appear in <head>.
+        // CSS module importmap tags should appear in <head>.
         let template = r#"<p>hello</p>"#;
 
         let mut fragments = HashMap::new();
@@ -6368,7 +6364,11 @@ mod tests {
 
         assert!(
             !html.contains(r#"<style type="module""#),
-            "Non-module strategy should not emit CSS modules in <head>: {html}"
+            "Non-module strategy should not emit legacy CSS module tags in <head>: {html}"
+        );
+        assert!(
+            !html.contains(r#"<script type="importmap""#),
+            "Non-module strategy should not emit CSS module importmaps in <head>: {html}"
         );
         assert!(
             html.contains("<p>hello</p>"),
@@ -6421,7 +6421,11 @@ mod tests {
         );
         assert!(
             !html.contains(r#"<style type="module""#),
-            "Style strategy should not emit module CSS in <head>: {html}"
+            "Style strategy should not emit legacy module CSS in <head>: {html}"
+        );
+        assert!(
+            !html.contains(r#"<script type="importmap""#),
+            "Style strategy should not emit CSS module importmaps in <head>: {html}"
         );
     }
 
@@ -6487,7 +6491,11 @@ mod tests {
         );
         assert!(
             !html.contains(r#"<style type="module""#),
-            "Link strategy should not emit module CSS: {html}"
+            "Link strategy should not emit legacy module CSS: {html}"
+        );
+        assert!(
+            !html.contains(r#"<script type="importmap""#),
+            "Link strategy should not emit CSS module importmaps: {html}"
         );
     }
 
@@ -6624,11 +6632,11 @@ mod tests {
 
         let html = writer.get_content();
 
-        // CSS module must be INSIDE the component tag (light DOM)
+        // 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#"<style type="module""#)
-            .expect("CSS module missing");
+            .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,
@@ -6690,10 +6698,8 @@ mod tests {
         let html = writer.get_content();
 
         assert!(
-            html.contains(
-                r#"<style type="module" specifier="dash-page">h1{font-size:2rem}</style>"#
-            ),
-            "Route component should have CSS module: {html}"
+            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>"),
@@ -6866,8 +6872,8 @@ mod tests {
         // product-card CSS module IS in the output — reachable components need
         // their stylesheet definitions for client-side <if> activation.
         assert!(
-            html.contains(r#"specifier="product-card""#),
-            "reachable product-card CSS module should be emitted: {html}"
+            html.contains(r#""product-card":"data:text/css,"#),
+            "reachable product-card CSS module importmap should be emitted: {html}"
         );
 
         // app-shell and cart-panel SHOULD be in the output (they were rendered)
@@ -6881,16 +6887,14 @@ mod tests {
         );
     }
 
-    // ── CSP nonce on <style type="module"> ───────────────────────────
+    // ── CSP nonce on CSS module importmap ───────────────────────────
     //
     // When `RenderOptions::with_nonce(...)` is set, every inline
-    // `<style type="module">` definition emitted during SSR must include
-    // `nonce="VALUE"` so strict CSP `style-src 'nonce-...'` policies allow
-    // it. The without-nonce case is already covered by other CSS module
-    // tests (e.g. `test_css_module_emitted_for_route_components`) — those
-    // assert the exact `<style type="module" specifier="...">` substring,
-    // which double-serves as a regression guard that no nonce attribute
-    // leaks in when none is configured.
+    // `<script type="importmap">` definition emitted during SSR for a
+    // component CSS module must include `nonce="VALUE"` so strict CSP
+    // `script-src 'nonce-...'` policies allow it. The without-nonce case
+    // is already covered by other CSS module tests (e.g.
+    // `test_css_module_emitted_for_route_components`).
 
     #[test]
     fn test_css_module_emits_nonce_attribute_when_nonce_set() {
@@ -6940,9 +6944,9 @@ mod tests {
 
         assert!(
             html.contains(
-                r#"<style type="module" nonce="test-nonce-123" specifier="dash-page">h1{font-size:2rem}</style>"#
+                r#"<script type="importmap" nonce="test-nonce-123">{"imports":{"dash-page":"data:text/css,h1{font-size:2rem}"}}</script>"#
             ),
-            "CSS module tag should include nonce attribute in canonical order: {html}"
+            "CSS module importmap tag should include nonce attribute in canonical order: {html}"
         );
     }
 
@@ -7019,9 +7023,9 @@ mod tests {
 
         assert!(
             html.contains(
-                r#"<style type="module" nonce="test-nonce-123" specifier="product-card">.product-card{display:block}</style>"#
+                r#"<script type="importmap" nonce="test-nonce-123">{"imports":{"product-card":"data:text/css,.product-card{display:block}"}}</script>"#
             ),
-            "Unrendered (body_end) CSS module tag should include nonce attribute in canonical order: {html}"
+            "Unrendered (body_end) CSS module importmap tag should include nonce attribute in canonical order: {html}"
         );
     }
 
diff --git a/crates/webui-handler/src/route_handler.rs b/crates/webui-handler/src/route_handler.rs
index 7ecaaa82..0b938c74 100644
--- a/crates/webui-handler/src/route_handler.rs
+++ b/crates/webui-handler/src/route_handler.rs
@@ -1029,13 +1029,11 @@ fn collect_component_assets(protocol: &WebUIProtocol, tags: &[&str]) -> (Vec<Val
             continue;
         }
         if !component.css.is_empty() {
-            let mut s = String::with_capacity(40 + tag.len() + component.css.len());
-            s.push_str("<style type=\"module\" specifier=\"");
-            s.push_str(tag);
-            s.push_str("\">");
-            s.push_str(&component.css);
-            s.push_str("</style>");
-            style_array.push(Value::String(s));
+            // 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));
         }
         tmpl_array.push(Value::String(component.template.clone()));
     }
@@ -1810,19 +1808,15 @@ mod tests {
             .as_array()
             .expect("templateStyles should be an array");
         assert_eq!(styles.len(), 1);
+        let style_html = styles[0].as_str().unwrap_or_default();
         assert!(
-            styles[0]
-                .as_str()
-                .unwrap_or_default()
-                .contains("specifier=\"my-page\""),
-            "module style should carry the component specifier"
+            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!(
-            styles[0]
-                .as_str()
-                .unwrap_or_default()
-                .contains(".page{color:red}"),
-            "module style should contain the CSS content"
+            style_html.contains(".page{color:red}"),
+            "module style entry should contain the CSS content verbatim inside the data: URI: {style_html}"
         );
 
         // templates should contain only the clean JS IIFE
@@ -2227,10 +2221,18 @@ mod tests {
         assert_eq!(templates.len(), 1);
         assert!(templates[0].as_str().unwrap().contains("settings-dialog"));
         assert_eq!(styles.len(), 1);
-        assert!(styles[0]
-            .as_str()
-            .unwrap()
-            .contains(".dialog{position:fixed}"));
+        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}"
+        );
     }
 
     #[test]
diff --git a/crates/webui-parser/src/lib.rs b/crates/webui-parser/src/lib.rs
index 8f8c0aa3..aa9ff2d6 100644
--- a/crates/webui-parser/src/lib.rs
+++ b/crates/webui-parser/src/lib.rs
@@ -39,8 +39,9 @@ pub enum CssStrategy {
     Link,
     /// Embed CSS content in `<style>` tags within the component.
     Style,
-    /// Emit a `<style type="module" specifier="component">` definition once per
-    /// page. The client runtime applies it via the document's adopted stylesheets.
+    /// Register each component's CSS module as a `<script type="importmap">`
+    /// data-URI entry. The client runtime applies the registered sheet via
+    /// the document's adopted stylesheets.
     Module,
 }
 
@@ -3701,10 +3702,15 @@ mod tests {
             "Should not have <link> in module mode: {template_text}"
         );
         // No CSS module baked into raw fragments — CSS is stored in
-        // protocol.components, populated by the build system.
+        // protocol.components, populated by the build system, and emitted
+        // by the handler (SSR inline + SPA partials) as importmap scripts.
         assert!(
             !template_text.contains(r#"<style type="module""#),
-            "CSS module should NOT be in raw fragments: {template_text}"
+            "CSS module should NOT be in raw fragments (legacy shape): {template_text}"
+        );
+        assert!(
+            !template_text.contains(r#"<script type="importmap""#),
+            "CSS module importmap should NOT be in raw fragments: {template_text}"
         );
     }
 
diff --git a/crates/webui-parser/src/plugin/fast_v2.rs b/crates/webui-parser/src/plugin/fast_v2.rs
index 29e2c4ea..44d9818b 100644
--- a/crates/webui-parser/src/plugin/fast_v2.rs
+++ b/crates/webui-parser/src/plugin/fast_v2.rs
@@ -861,10 +861,14 @@ mod tests {
         let (_, html) = &templates[0];
 
         // f-template should NOT contain the CSS module — that is added
-        // by the handler (SSR) or prepend_css_module (partials).
+        // by the handler at SSR (inline) and SPA-partial time.
         assert!(
             !html.contains(r#"<style type="module""#),
-            "CSS module should not be baked into f-template: {html}"
+            "Legacy CSS module shape should not be baked into f-template: {html}"
+        );
+        assert!(
+            !html.contains(r#"<script type="importmap""#),
+            "CSS module importmap should not be baked into f-template: {html}"
         );
         // shadowrootadoptedstylesheets on the inner template
         assert!(
diff --git a/crates/webui-parser/src/plugin/fast_v3.rs b/crates/webui-parser/src/plugin/fast_v3.rs
index 45b164bb..921ebd96 100644
--- a/crates/webui-parser/src/plugin/fast_v3.rs
+++ b/crates/webui-parser/src/plugin/fast_v3.rs
@@ -861,10 +861,14 @@ mod tests {
         let (_, html) = &templates[0];
 
         // f-template should NOT contain the CSS module — that is added
-        // by the handler (SSR) or prepend_css_module (partials).
+        // by the handler at SSR (inline) and SPA-partial time.
         assert!(
             !html.contains(r#"<style type="module""#),
-            "CSS module should not be baked into f-template: {html}"
+            "Legacy CSS module shape should not be baked into f-template: {html}"
+        );
+        assert!(
+            !html.contains(r#"<script type="importmap""#),
+            "CSS module importmap should not be baked into f-template: {html}"
         );
         // shadowrootadoptedstylesheets on the inner template
         assert!(
diff --git a/crates/webui/src/lib.rs b/crates/webui/src/lib.rs
index de910a63..bad5c1b8 100644
--- a/crates/webui/src/lib.rs
+++ b/crates/webui/src/lib.rs
@@ -830,7 +830,7 @@ mod tests {
         options.css = CssStrategy::Module;
 
         let result = build(options).unwrap();
-        // Module mode uses <style type="module"> — no external CSS files
+        // Module mode emits <script type="importmap"> data URIs — no external CSS files
         assert!(result.css_files.is_empty());
         assert_eq!(result.stats.css_file_count, 0);
         assert!(result.stats.fragment_count > 0);
diff --git a/docs/guide/cli/index.md b/docs/guide/cli/index.md
index eba1747a..def001fe 100644
--- a/docs/guide/cli/index.md
+++ b/docs/guide/cli/index.md
@@ -48,7 +48,7 @@ Path inputs for `APP`, `--state`, and `--servedir` support absolute paths, relat
 |------|----------|
 | `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 `<style type="module" specifier="component">` definitions 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 [Declarative CSS Module Scripts](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md) proposal. |
+| `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. |
 
 For long-lived CDN/browser caching in `link` mode, include `[hash]` in the CSS
 filename template. `[hash]` is the component CSS file's SHA-256 content hash
diff --git a/docs/guide/concepts/routing.md b/docs/guide/concepts/routing.md
index d56b7a72..86b5329e 100644
--- a/docs/guide/concepts/routing.md
+++ b/docs/guide/concepts/routing.md
@@ -622,7 +622,7 @@ When `Accept: application/json` or `application/x-ndjson`:
 ```json
 {
   "state": { "name": "Alice", "email": "alice@example.com" },
-  "templateStyles": ["<style type=\"module\" specifier=\"user-detail\">...</style>"],
+  "templateStyles": ["<script type=\"importmap\">{\"imports\":{\"user-detail\":\"data:text/css,...\"}}</script>"],
   "templates": ["(function(){var w=window.__webui.templates||...})();"],
   "inventory": "04000400...",
   "path": "/users/42",
diff --git a/docs/guide/integrations/ffi.md b/docs/guide/integrations/ffi.md
index 3c79f6ce..473a7f0e 100644
--- a/docs/guide/integrations/ffi.md
+++ b/docs/guide/integrations/ffi.md
@@ -136,7 +136,7 @@ Destroy a handler instance created by `webui_handler_create`. Passing `NULL` is
 void webui_handler_set_nonce(void *handler_ptr, const char *nonce);
 ```
 
-Set the CSP nonce for inline tags on a handler instance. When set, all subsequent renders include `nonce="VALUE"` on both inline `<script>` tags and inline `<style type="module">` tags emitted during SSR, and emit a `<meta name="webui-nonce" content="VALUE">` tag in the `<head>`.
+Set the CSP nonce for inline tags on a handler instance. When set, all subsequent renders include `nonce="VALUE"` on every inline `<script>` tag emitted during SSR (including the `<script type="importmap">` tags that register Module-strategy CSS), and emit a `<meta name="webui-nonce" content="VALUE">` tag in the `<head>`.
 
 - `handler_ptr`, pointer returned by `webui_handler_create`.
 - `nonce`, null-terminated UTF-8 string (typically a base64-encoded random value), or `NULL` to clear a previously set nonce.
diff --git a/docs/guide/integrations/rust.md b/docs/guide/integrations/rust.md
index b36e2b3f..ea14250c 100644
--- a/docs/guide/integrations/rust.md
+++ b/docs/guide/integrations/rust.md
@@ -247,7 +247,7 @@ HttpResponse::Ok()
 | Field / builder | Type | Description |
 |---|---|---|
 | `RenderOptions::new(entry_id, request_path)` | constructor | Entry fragment + route-matching path |
-| `with_nonce(&str)` | builder | CSP nonce reflected onto inline `<script>` / `<style type="module">`. Empty string normalises to `None`. |
+| `with_nonce(&str)` | builder | CSP nonce reflected onto inline `<script>` tags (including the `<script type="importmap">` tags that register Module-strategy CSS). Empty string normalises to `None`. |
 | `with_head_inject(&str)` | builder | Raw HTML emitted immediately before `</head>` at the parser's structural boundary (see [Streaming SSR](#streaming-ssr)). |
 | `with_body_inject(&str)` | builder | Raw HTML emitted immediately before `</body>`. Same structural-boundary contract. |
 
diff --git a/examples/app/commerce/server/src/server.rs b/examples/app/commerce/server/src/server.rs
index 73c1f5fa..ebfd97e7 100644
--- a/examples/app/commerce/server/src/server.rs
+++ b/examples/app/commerce/server/src/server.rs
@@ -494,12 +494,12 @@ mod tests {
             .collect::<String>();
 
         assert!(
-            combined_styles.contains(r#"<style type="module" specifier="mp-product-grid">"#),
-            "module partials should return module CSS definitions separately: {combined_styles}"
+            combined_styles.contains(r#""mp-product-grid":"data:text/css,"#),
+            "module partials should return mp-product-grid CSS as an importmap entry: {combined_styles}"
         );
         assert!(
-            !combined_templates.contains(r#"<style type="module" specifier="mp-product-grid">"#),
-            "template scripts should not be prefixed with module styles: {combined_templates}"
+            !combined_templates.contains(r#""mp-product-grid":"data:text/css,"#),
+            "template scripts should not embed module CSS importmap entries: {combined_templates}"
         );
         assert!(
             !combined_templates.contains(r#"<link rel="stylesheet" href="/mp-product-grid.css""#),
@@ -550,38 +550,37 @@ mod tests {
 
         // mp-cart-panel is a non-route sibling inside mp-app whose FNV-1a hash
         // collides with mp-app (both map to bit 218). The inventory filter must
-        // not drop it due to this collision. The style is emitted inline in the
-        // component's light DOM during SSR rendering.
+        // not drop it due to this collision. The CSS is emitted via a
+        // <script type="importmap"> tag in the component's light DOM during SSR.
         assert!(
-            html.contains(r#"<style type="module""#),
-            "SSR output should contain at least one inline <style type=\"module\"> tag: {html}"
+            html.contains(r#"<script type="importmap""#),
+            "SSR output should contain at least one inline <script type=\"importmap\"> tag: {html}"
         );
         assert!(
-            html.contains(r#"specifier="mp-cart-panel""#),
-            "mp-cart-panel module style should be present in SSR output for /about"
+            html.contains(r#""mp-cart-panel":"data:text/css,"#),
+            "mp-cart-panel CSS module should be registered via importmap in SSR output for /about"
         );
 
-        // Locate the mp-cart-panel <style type="module"> opening tag and verify
-        // it carries a CSP nonce that matches the value in the response's
-        // Content-Security-Policy header. This guards the end-to-end wiring
-        // from `RenderOptions::with_nonce` through to the inline style tag,
-        // which strict `style-src 'nonce-...'` policies require.
-        let cart_panel_specifier = r#"specifier="mp-cart-panel""#;
-        let specifier_pos = html
-            .find(cart_panel_specifier)
-            .expect("mp-cart-panel specifier substring located above");
-        let tag_start = html[..specifier_pos]
-            .rfind("<style")
-            .expect("specifier must be preceded by a <style opening tag");
-        let tag_end = specifier_pos
-            + html[specifier_pos..]
+        // Locate the <script type="importmap"> tag that registers mp-cart-panel
+        // and verify it carries a CSP nonce matching the response's
+        // Content-Security-Policy header. Strict `script-src 'nonce-...'`
+        // policies require this nonce on every importmap script.
+        let cart_panel_entry = r#""mp-cart-panel":"data:text/css,"#;
+        let entry_pos = html
+            .find(cart_panel_entry)
+            .expect("mp-cart-panel importmap entry located above");
+        let tag_start = html[..entry_pos]
+            .rfind("<script")
+            .expect("importmap entry must be inside a <script> tag");
+        let tag_end = tag_start
+            + html[tag_start..]
                 .find('>')
-                .expect("opening <style> tag must terminate");
+                .expect("opening <script> tag must terminate");
         let cart_panel_tag = &html[tag_start..=tag_end];
         let expected_nonce_attr = format!(r#"nonce="{nonce}""#);
         assert!(
             cart_panel_tag.contains(&expected_nonce_attr),
-            "mp-cart-panel <style type=\"module\"> tag should carry the response CSP nonce \
+            "mp-cart-panel <script type=\"importmap\"> tag should carry the response CSP nonce \
              (expected `{expected_nonce_attr}` in `{cart_panel_tag}`)"
         );
     }
diff --git a/packages/webui-framework/README.md b/packages/webui-framework/README.md
index 71111273..71cf1e81 100644
--- a/packages/webui-framework/README.md
+++ b/packages/webui-framework/README.md
@@ -624,7 +624,7 @@ The framework supports three CSS delivery strategies:
 |----------|-------------|
 | **Link** | `<link>` tag baked into `meta.h` — loaded by the browser naturally |
 | **Inline** | `<style>` tag baked into `meta.h` — no external request |
-| **Module** | `<style type="module" specifier="tag-name">` in the HTML payload, parsed into a `CSSStyleSheet` and applied via `adoptedStyleSheets` for shadow DOM isolation |
+| **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 |
 
 CSS module stylesheets are cached so each component instance adopts the same
 parsed sheet without re-parsing CSS.  The `meta.sa` field specifies the
diff --git a/packages/webui-framework/RENDERING.md b/packages/webui-framework/RENDERING.md
index b18550d4..13abb951 100644
--- a/packages/webui-framework/RENDERING.md
+++ b/packages/webui-framework/RENDERING.md
@@ -322,7 +322,7 @@ Three delivery modes, set by the compiler from `<link>` / `<style>` declarations
 |---|---|
 | **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 `<style type="module" specifier="tag-name">` block in the page payload, parsed once into a `CSSStyleSheet` and applied to every instance via `adoptedStyleSheets` (`meta.sa` carries the specifier). |
+| **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). |
 
 Module sheets are cached, so each instance pays the cost of one `adoptedStyleSheets` push, not a full CSS parse.
 
diff --git a/packages/webui-framework/src/element/styles.ts b/packages/webui-framework/src/element/styles.ts
index eefe1c0a..6af1c012 100644
--- a/packages/webui-framework/src/element/styles.ts
+++ b/packages/webui-framework/src/element/styles.ts
@@ -11,17 +11,17 @@
  *
  * - **Style**: Inline `<style>` tags inside each shadow template.
  *
- * - **Module**: Uses the Declarative CSS Module Scripts proposal. During SSR,
- *   `<style type="module" specifier="...">` definitions are emitted inline in
- *   each rendered component's light DOM. The browser registers these globally
- *   and automatically adopts them via `shadowrootadoptedstylesheets` on
- *   declarative shadow roots.
+ * - **Module**: Uses CSS Modules registered via Import Maps. During SSR, the
+ *   handler emits a `<script type="importmap">{"imports":{"<tag>":"data:text/css,..."}}</script>`
+ *   in each rendered component's light DOM. The browser registers the
+ *   stylesheet globally under `<tag>` and automatically adopts it via
+ *   `shadowrootadoptedstylesheets` on declarative shadow roots.
  *
- *   During SPA navigation, the router appends new `<style type="module">`
- *   definitions to `<head>` via `templateStyles[]`. The framework uses
+ *   During SPA navigation, the router appends new importmap script tags to
+ *   `<head>` via `templateStyles[]`. The framework uses
  *   `import(specifier, { with: { type: "css" } })` to retrieve the browser's
  *   registered CSSStyleSheet and adopts it onto the shadow root. This is a
- *   direct hash-map lookup in the browser's module registry — no DOM queries,
+ *   direct hash-map lookup in the browser's module registry - no DOM queries,
  *   no manual CSSStyleSheet construction.
  *
  * For light DOM components (no shadow root), Module mode injects a `<style>`
@@ -54,9 +54,10 @@ export function injectModuleStyle(
     if (shadowRoot.adoptedStyleSheets.length > 0) return;
 
     // SPA path: import the CSS module from the browser's registry.
-    // The <style type="module" specifier="X"> definition was either
-    // emitted inline during SSR or appended to <head> by the router.
-    // The import resolves to the same CSSStyleSheet the browser registered.
+    // 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 = [
diff --git a/packages/webui-router/src/router.test.ts b/packages/webui-router/src/router.test.ts
index 4409a0db..c205f8db 100644
--- a/packages/webui-router/src/router.test.ts
+++ b/packages/webui-router/src/router.test.ts
@@ -191,8 +191,10 @@ describe('WebUIRouter', () => {
       const origHead = (globalThis as any).document.head;
 
       const order: string[] = [];
-      const scriptBodies: string[] = [];
-      const scriptNonces: string[] = [];
+      const templateScriptBodies: string[] = [];
+      const templateScriptNonces: string[] = [];
+      const importmapBodies: string[] = [];
+      const importmapNonces: string[] = [];
 
       (globalThis as any).fetch = async () => ({
         ok: true,
@@ -200,8 +202,8 @@ describe('WebUIRouter', () => {
         json: async () => ({
           state: {},
           templateStyles: [
-            '<style type="module" specifier="alpha">.alpha{color:red}</style>',
-            '<style type="module" specifier="beta">.beta{color:blue}</style>',
+            '<script type="importmap">{"imports":{"alpha":"data:text/css,.alpha{color:red}"}}</script>',
+            '<script type="importmap">{"imports":{"beta":"data:text/css,.beta{color:blue}"}}</script>',
           ],
           templates: [
             '(function(){var w=(window.__webui||(window.__webui={})).templates||(window.__webui.templates={});w["alpha"]={h:"<div>a</div>"};})();',
@@ -226,13 +228,18 @@ describe('WebUIRouter', () => {
       (globalThis as any).document.querySelector = () => null;
       (globalThis as any).document.head = {
         appendChild(el: Record<string, unknown>) {
-          if (el.tagName === 'style') {
-            order.push(`style:${(el.attributes as Record<string, string>).specifier}`);
+          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;
           }
           order.push('script');
-          scriptNonces.push(el.nonce as string);
-          scriptBodies.push(el.textContent as string);
+          templateScriptNonces.push(el.nonce as string);
+          templateScriptBodies.push(el.textContent as string);
           // eslint-disable-next-line no-new-func
           Function(el.textContent as string)();
           return el;
@@ -254,14 +261,49 @@ describe('WebUIRouter', () => {
         const result = await fetchPartial('/test');
 
         assert.ok(result, 'should return partial data');
-        // Styles must be appended BEFORE scripts
-        assert.deepEqual(order, ['style:alpha', 'style:beta', 'script']);
+        // SSR and SPA paths emit ONE <script type="importmap"> per component
+        // (consistent 1:1 mapping); importmap scripts must be appended
+        // BEFORE the batched template script.
+        assert.deepEqual(order, ['importmap:alpha', 'importmap:beta', 'script']);
         // All JS IIFEs batched into one script tag
-        assert.equal(scriptBodies.length, 1, 'all JS should be batched into one script tag');
-        assert.ok(scriptBodies[0].includes('w["alpha"]'), 'batch should include alpha IIFE');
-        assert.ok(scriptBodies[0].includes('w["beta"]'), 'batch should include beta IIFE');
-        // CSP nonce preserved
-        assert.deepEqual(scriptNonces, ['test-nonce'], 'batched script should carry the nonce');
+        assert.equal(
+          templateScriptBodies.length,
+          1,
+          'all JS templates should be batched into one script tag',
+        );
+        assert.ok(
+          templateScriptBodies[0].includes('w["alpha"]'),
+          'batch should include alpha IIFE',
+        );
+        assert.ok(
+          templateScriptBodies[0].includes('w["beta"]'),
+          'batch should include beta IIFE',
+        );
+        // CSP nonce preserved on every emitted script (importmaps + template batch).
+        assert.deepEqual(
+          templateScriptNonces,
+          ['test-nonce'],
+          'batched template 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',
+        );
         // Templates actually registered
         assert.ok(globals().__webui?.templates?.['alpha'], 'alpha template should register');
         assert.ok(globals().__webui?.templates?.['beta'], 'beta template should register');
diff --git a/packages/webui-router/src/router.ts b/packages/webui-router/src/router.ts
index 696dee34..3ca7cea6 100644
--- a/packages/webui-router/src/router.ts
+++ b/packages/webui-router/src/router.ts
@@ -122,8 +122,25 @@ export class WebUIRouter {
         css.push(link.getAttribute('href')!);
       }
       const styles: string[] = [];
-      for (const style of document.querySelectorAll('style[type="module"][specifier]')) {
-        styles.push(style.getAttribute('specifier')!);
+      // Scan SSR-emitted CSS module importmaps (one per component) and
+      // collect their specifiers so SPA partials skip re-registering them.
+      // Other consumers may emit unrelated importmaps; we filter to entries
+      // whose URI starts with `data:text/css,` to stay scoped to WebUI's
+      // CSS module shape.
+      for (const script of document.querySelectorAll('script[type="importmap"]')) {
+        try {
+          const parsed = JSON.parse(script.textContent ?? '{}') as {
+            imports?: Record<string, unknown>;
+          };
+          if (!parsed.imports || typeof parsed.imports !== 'object') continue;
+          for (const [specifier, uri] of Object.entries(parsed.imports)) {
+            if (typeof uri === 'string' && uri.startsWith('data:text/css,')) {
+              styles.push(specifier);
+            }
+          }
+        } catch {
+          // Not WebUI's importmap shape — skip.
+        }
       }
       (window as any).__webui = { inventory: inv, nonce, css, styles, templates: {} };
     }
diff --git a/packages/webui-router/src/templates.ts b/packages/webui-router/src/templates.ts
index 525c190a..882695b2 100644
--- a/packages/webui-router/src/templates.ts
+++ b/packages/webui-router/src/templates.ts
@@ -24,37 +24,46 @@ export function registerTemplatesAndStyles(
     updateInventory(data.inventory);
   }
 
-  // 1. Module CSS: inject <style type="module"> definitions into <head>
+  // 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 styleMarkup of data.templateStyles) {
-      const trimmed = styleMarkup.trim();
-      if (!trimmed.startsWith('<style')) continue;
+    for (const scriptMarkup of data.templateStyles) {
+      const trimmed = scriptMarkup.trim();
+      if (!trimmed.startsWith('<script')) continue;
 
       const openTagEnd = trimmed.indexOf('>');
-      const closeTagStart = trimmed.lastIndexOf('</style>');
+      const closeTagStart = trimmed.lastIndexOf('</script>');
       if (openTagEnd < 0 || closeTagStart <= openTagEnd) continue;
 
-      const specifierToken = 'specifier="';
-      const specStart = trimmed.indexOf(specifierToken);
-      let specifier: string | null = null;
-      if (specStart >= 0) {
-        const valStart = specStart + specifierToken.length;
-        const valEnd = trimmed.indexOf('"', valStart);
-        if (valEnd > valStart) specifier = trimmed.substring(valStart, valEnd);
-      }
-
-      if (specifier && injectedStyles.has(specifier)) {
+      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 style = document.createElement('style');
-      style.type = 'module';
-      if (specifier) {
-        style.setAttribute('specifier', specifier);
+      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;
       }
-      style.textContent = trimmed.substring(openTagEnd + 1, closeTagStart);
-      document.head.appendChild(style);
+      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);
     }
   }
 
