diff --git a/CLAUDE.md b/CLAUDE.md
index f1faa66..73b4308 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -6,7 +6,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 Cargo workspace (`afterglow`, `afterglow-macros`, `supernova`, `supernovi`, `web-shove`) plus a standalone frontend in `app/` that is **not** part of the workspace.
 
-- **`afterglow/`** + **`afterglow-macros/`** — Suspense-style streaming HTML templating: trees with `Node::Pending` futures or `Node::Stream` sources render as a shell with `<?marker name="N">`/`<?start name="N">…<?end>` placeholders (Chrome declarative partial updates wire format), backfilled by streamed `<template for="N">` chunks — one chunk for a `Pending` slot, repeated patches to the same slot for a `Stream` source (live-updating regions). `render_stream` fills in completion order, `render_stream_ordered` in registration order. The `html!{}` proc macro (in `afterglow-macros`) supports `@{future} else { fallback }` for one-shot async widgets and `@*{stream} else { fallback }` for `IntoNodeStream` sources, and folds all static markup (plus `const { expr }` compile-time splices via `concat!`) at expansion time into `&'static str` segments (escaping happens in the macro — keep `afterglow-macros`' escape/void-element copies in sync with `afterglow/src/escape.rs` and `render.rs`); fully static templates are const-constructible. Widget futures and stream sources are driven by the response stream itself — never `tokio::spawn` them, or drop-based cancellation breaks. `IntoNodeStream` is a deliberate abstraction boundary so `std::async_iter`/`async gen` can plug in later without touching the driver or wire format. See `afterglow/README.md` and `cargo run --example axum_demo`.
+- **`afterglow/`** + **`afterglow-macros/`** — Suspense-style streaming HTML templating: trees with `Node::Pending` futures or `Node::Stream` sources render as a shell with `<?marker name="N">`/`<?start name="N">…<?end>` placeholders (Chrome declarative partial updates wire format), backfilled by streamed `<template for="N">` chunks — one chunk for a `Pending` slot, repeated patches to the same slot for a `Stream` source (live-updating regions). `render_stream` fills in completion order, `render_stream_ordered` in registration order. The `html!{}` proc macro (in `afterglow-macros`) supports `@{future} else { fallback }` for one-shot async widgets and `@*{stream} else { fallback }` for `IntoNodeStream` sources, and folds all static markup (plus `const { expr }` compile-time splices via `concat!`) at expansion time into `&'static str` segments (escaping happens in the macro — keep `afterglow-macros`' escape/void-element copies in sync with `afterglow/src/escape.rs` and `render.rs`); fully static templates are const-constructible. Widget futures and stream sources are driven by the response stream itself — never `tokio::spawn` them, or drop-based cancellation breaks. `IntoNodeStream` is a deliberate abstraction boundary so `std::async_iter`/`async gen` can plug in later without touching the driver or wire format. Since the wire format has no attribute-level patch, async attributes (`attr=@{future}`, `Node::element_with_pending_attributes`) work by replacing the *whole element* once the attribute(s) resolve — `shell.rs`'s `Skeleton`/`live_cache` machinery (see the "Async attributes" section in `afterglow/src/lib.rs`) makes that swap reuse marker ids for still-pending nested holes instead of re-running or orphaning them, but it's still a one-time full DOM remount of that element, so keep it scoped to small elements. See `afterglow/README.md` and `cargo run --example axum_demo`.
 - **`web-shove/`** — Library crate implementing Web Push from scratch: RFC 8291 message encryption (ECDH P-256 key exchange, HKDF key derivation, AES-128-GCM, `aes128gcm` content-coding header) in `src/lib.rs`, VAPID key handling in `src/vapid.rs`, and the VAPID JWT `Authorization` header in `src/authorization_header.rs`. Also has a small binary (`src/main.rs`) that generates and prints a new base64url-encoded VAPID private key. Tests use `rstest` fixtures and assert against the RFC 8291 Appendix A test vectors.
 - **`supernova/`** — Axum web server (binds `127.0.0.1:3000`). Routes: `GET /` (server-rendered page from `templates/`), `POST /signin`, `POST /notifications/subscriptions`, `POST /notifications/push`. Static files served from `supernova/public/` (includes the service worker and push-subscription JS). Depends on `web-shove` for push payload encryption. Push subscriptions are held in-memory (`Arc<Mutex<Vec<Subscription>>>` in `AppState`) — nothing is persisted yet.
 - **`supernovi/`** — Minimal scratch binary that only tests Bitwarden Secrets Manager login.
diff --git a/afterglow-macros/src/lib.rs b/afterglow-macros/src/lib.rs
index 9119b4d..cfb46df 100644
--- a/afterglow-macros/src/lib.rs
+++ b/afterglow-macros/src/lib.rs
@@ -2,7 +2,7 @@
 //! this crate directly.
 
 use proc_macro2::{Delimiter, Span, TokenStream, TokenTree};
-use quote::quote;
+use quote::{format_ident, quote};
 
 /// JSX-like templating macro producing an `afterglow::Node`.
 ///
@@ -29,6 +29,16 @@ use quote::quote;
 ///   `<template for="N">` patch as it arrives. Takes the same optional
 ///   `else { fallback }` form; an empty source simply leaves the fallback in
 ///   place. See `Node::stream` for cancellation and termination semantics.
+/// - **Async attributes**: `attr=@{future}`, optionally followed by
+///   `else "literal"` / `else {expr}` for the value shown until it resolves
+///   (omit `else` and the attribute is simply absent until then). There is
+///   no attribute-level patch in the wire format, so once `future` resolves,
+///   the **whole element is replaced** — not just the attribute. See
+///   `Node::element_with_pending_attributes` and the crate-level "Async
+///   attributes" docs for exactly what that costs (a full DOM remount of
+///   the element and its descendants) and what it doesn't (nested
+///   `@{...}`/`@*{...}` holes inside such an element keep resolving
+///   correctly through the swap, never re-run or duplicated).
 /// - **Const interpolation**: `const { expr }` in child position splices a
 ///   compile-time string into the surrounding static segment via `concat!`,
 ///   e.g. `const { env!("CARGO_PKG_NAME") }`. The expression must be a
@@ -103,6 +113,13 @@ enum AttributeValue {
     Bare,
     Literal(String),
     Expression(syn::Expr),
+    /// `attr=@{future}`, optionally followed by `else "literal"` /
+    /// `else {expr}`. With no `else`, the attribute is simply absent from
+    /// the fallback until the future resolves.
+    Pending {
+        future: syn::Expr,
+        fallback: Option<syn::Expr>,
+    },
 }
 
 // ---------------------------------------------------------------------------
@@ -288,23 +305,30 @@ impl Parser {
 
         let value = if self.peek_is_punct('=') {
             self.advance();
-            match self.advance() {
-                Some(TokenTree::Literal(literal)) => {
-                    let syn::Lit::Str(string) = syn::Lit::new(literal.clone()) else {
-                        return Err(syn::Error::new(
-                            literal.span(),
-                            "attribute values must be string literals or `{expr}`",
+            if self.peek_is_punct('@') {
+                self.advance();
+                let future = self.parse_brace_expr("expected `{future}` after `@`")?;
+                let fallback = self.parse_optional_attribute_fallback()?;
+                AttributeValue::Pending { future, fallback }
+            } else {
+                match self.advance() {
+                    Some(TokenTree::Literal(literal)) => {
+                        let syn::Lit::Str(string) = syn::Lit::new(literal.clone()) else {
+                            return Err(syn::Error::new(
+                                literal.span(),
+                                "attribute values must be string literals, `{expr}`, or `@{future}`",
+                            ));
+                        };
+                        AttributeValue::Literal(string.value())
+                    }
+                    Some(TokenTree::Group(group)) if group.delimiter() == Delimiter::Brace => {
+                        AttributeValue::Expression(syn::parse2(group.stream())?)
+                    }
+                    _ => {
+                        return Err(self.error_here(
+                            "expected a string literal, `{expr}`, or `@{future}` after `=`",
                         ));
-                    };
-                    AttributeValue::Literal(string.value())
-                }
-                Some(TokenTree::Group(group)) if group.delimiter() == Delimiter::Brace => {
-                    AttributeValue::Expression(syn::parse2(group.stream())?)
-                }
-                _ => {
-                    return Err(
-                        self.error_here("expected a string literal or `{expr}` after `=`")
-                    );
+                    }
                 }
             }
         } else {
@@ -314,6 +338,35 @@ impl Parser {
         Ok(Attribute { name, value })
     }
 
+    /// Parses an optional `else "literal"` / `else {expr}` after
+    /// `attr=@{future}` — the value shown until the future resolves.
+    fn parse_optional_attribute_fallback(&mut self) -> syn::Result<Option<syn::Expr>> {
+        match self.peek() {
+            Some(TokenTree::Ident(ident)) if ident == "else" => {
+                self.advance();
+                match self.advance() {
+                    Some(TokenTree::Literal(literal)) => {
+                        let syn::Lit::Str(string) = syn::Lit::new(literal.clone()) else {
+                            return Err(syn::Error::new(
+                                literal.span(),
+                                "attribute fallback values must be string literals or `{expr}`",
+                            ));
+                        };
+                        Ok(Some(syn::Expr::Lit(syn::ExprLit {
+                            attrs: Vec::new(),
+                            lit: syn::Lit::Str(string),
+                        })))
+                    }
+                    Some(TokenTree::Group(group)) if group.delimiter() == Delimiter::Brace => {
+                        Ok(Some(syn::parse2(group.stream())?))
+                    }
+                    _ => Err(self.error_here("expected a string literal or `{expr}` after `else`")),
+                }
+            }
+            _ => Ok(None),
+        }
+    }
+
     fn parse_text(&mut self) -> syn::Result<Ast> {
         let Some(TokenTree::Literal(literal)) = self.advance() else {
             unreachable!("parse_text is only called when peeking a literal");
@@ -496,11 +549,19 @@ fn fold_nodes(nodes: Vec<Ast>, buffer: &mut SegmentBuffer, parts: &mut Vec<Token
                 attributes,
                 children,
             } => {
-                let all_attributes_static = attributes
+                let has_pending_attribute = attributes
                     .iter()
-                    .all(|attribute| !matches!(attribute.value, AttributeValue::Expression(_)));
+                    .any(|attribute| matches!(attribute.value, AttributeValue::Pending { .. }));
 
-                if all_attributes_static {
+                let all_attributes_static = !has_pending_attribute
+                    && attributes
+                        .iter()
+                        .all(|attribute| !matches!(attribute.value, AttributeValue::Expression(_)));
+
+                if has_pending_attribute {
+                    flush(buffer, parts);
+                    parts.push(build_pending_attributes_element(tag, attributes, children));
+                } else if all_attributes_static {
                     let out = buffer.literal_mut();
                     out.push('<');
                     out.push_str(&tag);
@@ -514,7 +575,9 @@ fn fold_nodes(nodes: Vec<Ast>, buffer: &mut SegmentBuffer, parts: &mut Vec<Token
                                 escape_attribute_into(&value, out);
                                 out.push('"');
                             }
-                            AttributeValue::Expression(_) => unreachable!("checked above"),
+                            AttributeValue::Expression(_) | AttributeValue::Pending { .. } => {
+                                unreachable!("checked above")
+                            }
                         }
                     }
                     out.push('>');
@@ -587,6 +650,65 @@ fn combine_parts(mut parts: Vec<TokenStream>) -> TokenStream {
     }
 }
 
+/// Builds `Node::element_with_pending_attributes(...)` for an element with
+/// one or more `attr=@{...}` attributes. Static/sync attribute values are
+/// evaluated once for the immediate fallback and again inside the future
+/// for the eventual swap (same accepted tradeoff as children in a whole
+/// element replace: cheap/pure expressions are fine, expressions that move
+/// a non-`Clone` capture won't compile — write the value into a local
+/// beforehand in that case). A `Pending` attribute's future is awaited
+/// exactly once; its resolved value feeds only the swap.
+fn build_pending_attributes_element(
+    tag: String,
+    attributes: Vec<Attribute>,
+    children: Vec<Ast>,
+) -> TokenStream {
+    let mut fallback_tokens = Vec::new();
+    let mut await_statements = Vec::new();
+    let mut resolved_tokens = Vec::new();
+
+    for (index, attribute) in attributes.into_iter().enumerate() {
+        let name = attribute.name;
+        match attribute.value {
+            AttributeValue::Pending { future, fallback } => {
+                if let Some(fallback) = fallback {
+                    fallback_tokens.push(quote! {
+                        (::std::borrow::Cow::Borrowed(#name), ::std::option::Option::Some(
+                            ::std::string::ToString::to_string(&(#fallback)),
+                        ))
+                    });
+                }
+                let binding = format_ident!("__afterglow_attr_{index}");
+                await_statements.push(quote! { let #binding = (#future).await; });
+                resolved_tokens.push(quote! {
+                    (::std::borrow::Cow::Borrowed(#name), ::std::option::Option::Some(
+                        ::std::string::ToString::to_string(&#binding),
+                    ))
+                });
+            }
+            value => {
+                let tokens = attribute_tokens(Attribute { name, value });
+                fallback_tokens.push(tokens.clone());
+                resolved_tokens.push(tokens);
+            }
+        }
+    }
+
+    let children = fold_to_parts(children);
+
+    quote! {
+        ::afterglow::Node::element_with_pending_attributes(
+            #tag,
+            async move {
+                #(#await_statements)*
+                ::std::vec![#(#resolved_tokens),*]
+            },
+            ::std::vec![#(#fallback_tokens),*],
+            ::std::vec![#(#children),*],
+        )
+    }
+}
+
 fn attribute_tokens(attribute: Attribute) -> TokenStream {
     let name = attribute.name;
     let value = match attribute.value {
@@ -597,6 +719,9 @@ fn attribute_tokens(attribute: Attribute) -> TokenStream {
         AttributeValue::Expression(expression) => quote! {
             ::std::option::Option::Some(::std::string::ToString::to_string(&(#expression)))
         },
+        AttributeValue::Pending { .. } => {
+            unreachable!("callers route Pending attributes through build_pending_attributes_element")
+        }
     };
     quote! { (::std::borrow::Cow::Borrowed(#name), #value) }
 }
diff --git a/afterglow/README.md b/afterglow/README.md
index 6452ac4..b7703cf 100644
--- a/afterglow/README.md
+++ b/afterglow/README.md
@@ -67,6 +67,19 @@ let body = render_stream(page);
   `futures::Stream` so that `std::async_iter::AsyncIterator` / `async gen`
   blocks can plug in without changing `Node`, the driver, or the wire format,
   once they stabilize.
+- **Async attributes**: `attr=@{future}` (optionally `else "literal"` / `else
+  {expr}` for the value shown until it resolves). There's no attribute-level
+  patch in the wire format, so once `future` resolves, **the whole element —
+  not just the attribute — is replaced** in one patch, exactly once. Nested
+  `@{...}`/`@*{...}` holes inside such an element are never re-run or
+  duplicated by that swap (an already-resolved one is inlined, a still-
+  pending one reuses its marker id so its future/stream keeps a valid
+  target) — but a nested `@*{...}` hole's history before the swap collapses
+  to its latest value, and the swap itself is still a full DOM remount of
+  the element and its descendants (lost focus/scroll/input state), which is
+  inherent to the wire format and not something this crate can avoid. See
+  the crate docs' "Async attributes" section for the full detail — scope
+  this to small elements.
 
 ## Streaming demo
 
diff --git a/afterglow/examples/axum_demo.rs b/afterglow/examples/axum_demo.rs
index c569738..c6b1688 100644
--- a/afterglow/examples/axum_demo.rs
+++ b/afterglow/examples/axum_demo.rs
@@ -9,7 +9,11 @@
 //! chunks trickle in over the next ~2.5 seconds. The "Live price" section
 //! uses `@*{...}` (a stream hole) instead of `@{...}` (a future hole): it
 //! patches the same slot five times as new ticks arrive, rather than
-//! resolving once.
+//! resolving once. The "Status" section uses an async *attribute*
+//! (`class=@{...}`): watch its whole `<div>` get replaced once the
+//! attribute resolves — including the still-pending nested detail hole
+//! inside it, which keeps the *same* marker id across that replacement and
+//! resolves normally afterward.
 
 use std::net::Ipv4Addr;
 use std::time::Duration;
@@ -61,6 +65,20 @@ fn live_price() -> impl Stream<Item = Node> {
     }
 }
 
+async fn status_class() -> &'static str {
+    sleep(Duration::from_millis(600)).await;
+    "status-ok"
+}
+
+/// Resolves *after* `status_class` (1.8s vs. 0.6s), on purpose: it shows the
+/// swap triggered by the async attribute reusing this hole's marker id
+/// rather than re-running or losing it — its own patch lands normally,
+/// afterward, targeting the marker that survived the swap.
+async fn status_detail() -> Node {
+    sleep(Duration::from_millis(1800)).await;
+    html! { "All systems operational" }
+}
+
 // Fully static — evaluated at compile time; the crate name and version are
 // spliced in via `concat!`, so the whole footer is one `&'static str` in the
 // binary.
@@ -92,6 +110,12 @@ async fn index() -> Response {
                     <h2>"Live price"</h2>
                     @*{live_price()} else { <span>"waiting for first tick…"</span> }
                 </section>
+                <section>
+                    <h2>"Status"</h2>
+                    <div class=@{status_class()} else "status-pending">
+                        "Detail: " @{status_detail()}
+                    </div>
+                </section>
                 {FOOTER}
             </body>
         </html>
diff --git a/afterglow/src/lib.rs b/afterglow/src/lib.rs
index 529a5ee..962e558 100644
--- a/afterglow/src/lib.rs
+++ b/afterglow/src/lib.rs
@@ -24,6 +24,45 @@
 //! cancellation, do **not** `tokio::spawn` them and hand their `JoinHandle`s
 //! to the tree — spawned tasks detach from drop-based cancellation and keep
 //! running after the response is gone.
+//!
+//! # Async attributes
+//!
+//! Attribute values can be async too ([`Node::element_with_pending_attributes`],
+//! or `attr=@{future}` in `html!`), but the mechanism is different from a
+//! content hole, because the wire format has **no attribute-level patch** —
+//! the only way to change an attribute declaratively is to replace the
+//! element that carries it. So instead of a hole *inside* the markup, an
+//! element with a pending attribute renders its fallback attributes
+//! immediately and, once the attribute future resolves, the **entire
+//! element — open tag, attributes, and all descendants — is replaced in one
+//! `<template>` patch.**
+//!
+//! This has a real, unavoidable cost, exactly once per element, at the
+//! moment its attribute(s) resolve:
+//!
+//! - **The whole subtree is torn down and a new DOM node inserted.** Any
+//!   browser-side state tied to it — focus, scroll position, in-progress
+//!   form input, CSS transition/animation state, listeners attached by
+//!   other client-side code — is lost. This is inherent to the wire format
+//!   having no attribute-only patch; nothing in this crate can avoid it, so
+//!   scope `attr=@{...}` to small elements — a large subtree behind an
+//!   async attribute means a large, jarring remount.
+//!
+//! What it does *not* cost, because the replacement is built from the
+//! element's *current* state rather than re-run from scratch:
+//!
+//! - **Nested `@{...}`/`@*{...}` holes are never re-run or duplicated.** A
+//!   child hole that already resolved by the time the attribute resolves is
+//!   inlined directly into the replacement; one that's still pending
+//!   reconstructs its own marker under the *same* id, so its still-running
+//!   future or stream keeps a valid target after the swap and its future
+//!   patches keep landing correctly — no wasted computation, no patch
+//!   addressed to a marker that no longer exists.
+//! - **A nested `@*{...}` stream hole's history before the swap is
+//!   collapsed to its latest value.** If several values arrived before the
+//!   attribute resolved, only the most recent is inlined into the
+//!   replacement — not the full sequence. The stream itself is untouched
+//!   and keeps patching normally afterward.
 
 // Allows macro-generated `::afterglow::...` paths to resolve inside this
 // crate's own tests and examples.
diff --git a/afterglow/src/node.rs b/afterglow/src/node.rs
index abb7609..8b0216b 100644
--- a/afterglow/src/node.rs
+++ b/afterglow/src/node.rs
@@ -44,6 +44,20 @@ pub enum Node {
         stream: NodeStream,
         fallback: Option<Box<Node>>,
     },
+    /// An element whose attribute values are not all known yet. There is no
+    /// attribute-level patch in the wire format, so the shell renders
+    /// immediately with `fallback_attributes`, and once `attributes`
+    /// resolves the **whole element** — open tag, resolved attributes, and
+    /// children — is replaced in one `<template for="N">` patch. `children`
+    /// render immediately and keep patching independently in the meantime;
+    /// see [`Node::element_with_pending_attributes`] for what is preserved
+    /// and what is lost when the swap happens.
+    PendingAttributes {
+        tag: Cow<'static, str>,
+        fallback_attributes: Vec<Attribute>,
+        attributes: BoxFuture<'static, Vec<Attribute>>,
+        children: Vec<Node>,
+    },
 }
 
 /// Opaque handle to a sequence of nodes arriving over time — the payload of
@@ -166,6 +180,44 @@ impl Node {
             fallback: Some(Box::new(fallback)),
         }
     }
+
+    /// Creates an element with one or more async attribute values. The shell
+    /// renders immediately with `fallback_attributes` (omit an attribute
+    /// there and it's simply absent until resolved) and `children` rendered
+    /// and streaming exactly as they would in a normal element. Once
+    /// `attributes` resolves, the **entire element is replaced** — open tag,
+    /// resolved attributes, and children — in a single patch.
+    ///
+    /// `attributes` resolves to `Vec<Attribute>` via plain `ToString`, not
+    /// `Result<T, E>` — there's no sensible HTML representation for "one of
+    /// several attributes failed," so, like the synchronous `attr={expr}`
+    /// form, errors are the caller's responsibility (e.g. via
+    /// `.unwrap_or_else(...)` inside the future).
+    ///
+    /// This full-element replacement is a hard consequence of the wire
+    /// format having no attribute-only patch, not a limitation of this
+    /// crate — see the crate-level docs' "Async attributes" section for
+    /// exactly what is discarded (DOM node identity for the whole subtree)
+    /// and what is preserved (nested `@{...}`/`@*{...}` holes keep patching
+    /// correctly through the swap, never re-run or duplicated — though a
+    /// nested stream hole's history before the swap collapses to its latest
+    /// value).
+    pub fn element_with_pending_attributes<F>(
+        tag: impl Into<Cow<'static, str>>,
+        attributes: F,
+        fallback_attributes: Vec<Attribute>,
+        children: Vec<Node>,
+    ) -> Node
+    where
+        F: Future<Output = Vec<Attribute>> + Send + 'static,
+    {
+        Node::PendingAttributes {
+            tag: tag.into(),
+            fallback_attributes,
+            attributes: Box::pin(attributes),
+            children,
+        }
+    }
 }
 
 /// Conversion into a [`Node`]. This is what interpolated values in the `html!`
diff --git a/afterglow/src/render.rs b/afterglow/src/render.rs
index c1cc6b6..eee307d 100644
--- a/afterglow/src/render.rs
+++ b/afterglow/src/render.rs
@@ -72,6 +72,11 @@ fn write_resolved(node: Node, out: &mut String) {
         Node::Stream { .. } => {
             panic!("render_to_string cannot render Node::Stream; use render_stream instead")
         }
+        Node::PendingAttributes { .. } => {
+            panic!(
+                "render_to_string cannot render Node::PendingAttributes; use render_stream instead"
+            )
+        }
     }
 }
 
diff --git a/afterglow/src/shell.rs b/afterglow/src/shell.rs
index a70714a..b0d5a82 100644
--- a/afterglow/src/shell.rs
+++ b/afterglow/src/shell.rs
@@ -1,11 +1,12 @@
 use std::borrow::Cow;
+use std::sync::{Arc, Mutex};
 
 use bytes::Bytes;
 use futures::future::BoxFuture;
 use futures::stream::BoxStream;
 
 use crate::escape::escape_text;
-use crate::node::Node;
+use crate::node::{Attribute, Node};
 use crate::render::{is_void_element, write_close_tag, write_open_tag};
 
 pub(crate) type SlotId = u64;
@@ -17,6 +18,46 @@ pub(crate) enum SlotSource {
     Stream(BoxStream<'static, Node>),
 }
 
+/// A fragment of an element's children as known at the moment they were
+/// first shell-walked: literal HTML, or a hole whose resolution state is
+/// shared with the normal per-slot driver loop via `state`. Used only for
+/// the children of a [`Node::PendingAttributes`] element — everywhere else,
+/// `write_shell` takes the plain (non-tracked) path.
+///
+/// When that element's attributes resolve, [`serialize_skeleton`] rebuilds
+/// the element from this: a `Hole` already resolved (`state` holding
+/// `Some(html)`) is inlined verbatim; one still unresolved reconstructs its
+/// own marker using the *same* `id`, so its still-running future or stream —
+/// untouched, never re-run or duplicated — keeps targeting a valid location
+/// after the swap.
+#[derive(Clone)]
+enum SkeletonPart {
+    Literal(String),
+    Hole {
+        id: SlotId,
+        fallback: Option<Skeleton>,
+        state: Arc<Mutex<Option<String>>>,
+    },
+}
+
+type Skeleton = Vec<SkeletonPart>;
+
+fn push_literal(skeleton: &mut Skeleton, text: &str) {
+    if text.is_empty() {
+        return;
+    }
+    if let Some(SkeletonPart::Literal(existing)) = skeleton.last_mut() {
+        existing.push_str(text);
+    } else {
+        skeleton.push(SkeletonPart::Literal(text.to_owned()));
+    }
+}
+
+fn write_literal_both(text: &str, shell: &mut Shell, skeleton: &mut Skeleton) {
+    shell.html.owned_mut().push_str(text);
+    push_literal(skeleton, text);
+}
+
 /// Accumulates shell HTML while preserving zero-copy for the fully static
 /// case: the `html!` macro folds static templates into a single
 /// `Node::Html(Cow::Borrowed(...))` segment living in the binary, and a shell
@@ -75,6 +116,12 @@ impl HtmlBuf {
 pub(crate) struct Shell {
     pub(crate) html: HtmlBuf,
     pub(crate) slots: Vec<(SlotId, SlotSource)>,
+    /// Cache cells registered by any `PendingAttributes` element encountered
+    /// during this walk, keyed by the id of the hole whose resolved HTML
+    /// they should receive. The driver merges these into a crate-wide table
+    /// and writes into them whenever the corresponding slot resolves — see
+    /// `stream.rs`.
+    pub(crate) cache_registrations: Vec<(SlotId, Arc<Mutex<Option<String>>>)>,
 }
 
 /// Renders a tree without awaiting anything. Each `Pending` or `Stream` node
@@ -87,6 +134,7 @@ pub(crate) fn render_shell(node: Node, next_id: &mut SlotId) -> Shell {
     let mut shell = Shell {
         html: HtmlBuf::Empty,
         slots: Vec::new(),
+        cache_registrations: Vec::new(),
     };
     write_shell(node, next_id, &mut shell);
     shell
@@ -120,6 +168,25 @@ fn write_shell(node: Node, next_id: &mut SlotId, shell: &mut Shell) {
         Node::Stream { stream, fallback } => {
             write_slot(SlotSource::Stream(stream.inner), fallback, next_id, shell);
         }
+        Node::PendingAttributes {
+            tag,
+            fallback_attributes,
+            attributes,
+            children,
+        } => {
+            // Discard the returned skeleton: nothing above us needs to
+            // represent this element as a hole (that's only needed when
+            // nested inside another PendingAttributes' children — see
+            // write_shell_with_skeleton below).
+            let _ = write_pending_attributes(
+                tag,
+                fallback_attributes,
+                attributes,
+                children,
+                next_id,
+                shell,
+            );
+        }
     }
 }
 
@@ -150,6 +217,236 @@ fn write_slot(
     }
 }
 
+/// Shell-walks a `PendingAttributes` element: writes its immediate
+/// `<?start name="id">`-wrapped fallback rendering into `shell.html` (open
+/// tag with `fallback_attributes`, children walked via
+/// `write_shell_with_skeleton` so their holes are cache-tracked, close tag),
+/// registers its resolution future into `shell.slots`, and returns both the
+/// assigned id and a skeleton reconstructing its fallback markup. Callers
+/// that need to represent this element as a hole inside an *outer* skeleton
+/// (i.e. it's nested inside another `PendingAttributes`' children) use both;
+/// the top-level, non-nested caller discards them.
+fn write_pending_attributes(
+    tag: Cow<'static, str>,
+    fallback_attributes: Vec<Attribute>,
+    attributes: BoxFuture<'static, Vec<Attribute>>,
+    children: Vec<Node>,
+    next_id: &mut SlotId,
+    shell: &mut Shell,
+) -> (SlotId, Skeleton) {
+    let id = *next_id;
+    *next_id += 1;
+
+    shell
+        .html
+        .owned_mut()
+        .push_str(&format!("<?start name=\"{id}\">"));
+
+    // `open`/`close` use `fallback_attributes` and belong only in the
+    // *fallback* reconstruction below — the element's own eventual future
+    // writes its own open/close tag with the resolved attributes, so
+    // `children_skeleton` (used by that future) must hold children only.
+    let mut open = String::new();
+    write_open_tag(&tag, &fallback_attributes, &mut open);
+    shell.html.owned_mut().push_str(&open);
+
+    let mut children_skeleton: Skeleton = Vec::new();
+    let mut close = String::new();
+    if !is_void_element(&tag) {
+        for child in children {
+            write_shell_with_skeleton(child, next_id, shell, &mut children_skeleton);
+        }
+        write_close_tag(&tag, &mut close);
+        shell.html.owned_mut().push_str(&close);
+    }
+
+    shell.html.owned_mut().push_str("<?end>");
+
+    // The eventual replacement: await the attributes, then serialize using
+    // whatever is currently known in the skeleton's hole states — anything
+    // not yet resolved reconstructs its own marker with the same id, so its
+    // still-running future or stream keeps a valid target after the swap.
+    let skeleton_for_swap = children_skeleton.clone();
+    let tag_for_future = tag.clone();
+    let future: BoxFuture<'static, Node> = Box::pin(async move {
+        let resolved_attributes = attributes.await;
+        Node::Html(Cow::Owned(serialize_skeleton(
+            &tag_for_future,
+            &resolved_attributes,
+            &skeleton_for_swap,
+        )))
+    });
+    shell.slots.push((id, SlotSource::Future(future)));
+
+    // Returned to a caller that needs to represent this element as a hole in
+    // an *ancestor's* skeleton: the full fallback markup (open tag with
+    // fallback_attributes + children + close tag), used only if this
+    // element hasn't resolved by the time that ancestor freezes.
+    let mut fallback_skeleton: Skeleton = Vec::new();
+    push_literal(&mut fallback_skeleton, &open);
+    fallback_skeleton.extend(children_skeleton);
+    push_literal(&mut fallback_skeleton, &close);
+
+    (id, fallback_skeleton)
+}
+
+/// Like `write_shell`, but also builds a parallel [`Skeleton`] of `node` as
+/// it's walked, so an enclosing `PendingAttributes` element can later
+/// reconstruct this content from current state rather than re-walking the
+/// (by-then partially consumed) original tree. Used only for the children of
+/// a `PendingAttributes` element — everywhere else `write_shell` is the fast
+/// path and stays untouched.
+fn write_shell_with_skeleton(
+    node: Node,
+    next_id: &mut SlotId,
+    shell: &mut Shell,
+    skeleton: &mut Skeleton,
+) {
+    match node {
+        Node::Html(html) => write_literal_both(&html, shell, skeleton),
+        Node::Text(text) => {
+            let mut escaped = String::new();
+            escape_text(&text, &mut escaped);
+            write_literal_both(&escaped, shell, skeleton);
+        }
+        Node::Element {
+            tag,
+            attributes,
+            children,
+        } => {
+            let mut open = String::new();
+            write_open_tag(&tag, &attributes, &mut open);
+            write_literal_both(&open, shell, skeleton);
+
+            if !is_void_element(&tag) {
+                for child in children {
+                    write_shell_with_skeleton(child, next_id, shell, skeleton);
+                }
+                let mut close = String::new();
+                write_close_tag(&tag, &mut close);
+                write_literal_both(&close, shell, skeleton);
+            }
+        }
+        Node::Fragment(children) => {
+            for child in children {
+                write_shell_with_skeleton(child, next_id, shell, skeleton);
+            }
+        }
+        Node::Pending { future, fallback } => {
+            write_slot_with_skeleton(SlotSource::Future(future), fallback, next_id, shell, skeleton);
+        }
+        Node::Stream { stream, fallback } => {
+            write_slot_with_skeleton(
+                SlotSource::Stream(stream.inner),
+                fallback,
+                next_id,
+                shell,
+                skeleton,
+            );
+        }
+        Node::PendingAttributes {
+            tag,
+            fallback_attributes,
+            attributes,
+            children,
+        } => {
+            let (id, fallback_skeleton) = write_pending_attributes(
+                tag,
+                fallback_attributes,
+                attributes,
+                children,
+                next_id,
+                shell,
+            );
+            let state = Arc::new(Mutex::new(None));
+            shell.cache_registrations.push((id, Arc::clone(&state)));
+            skeleton.push(SkeletonPart::Hole {
+                id,
+                fallback: Some(fallback_skeleton),
+                state,
+            });
+        }
+    }
+}
+
+fn write_slot_with_skeleton(
+    source: SlotSource,
+    fallback: Option<Box<Node>>,
+    next_id: &mut SlotId,
+    shell: &mut Shell,
+    skeleton: &mut Skeleton,
+) {
+    let id = *next_id;
+    *next_id += 1;
+    shell.slots.push((id, source));
+
+    let state = Arc::new(Mutex::new(None));
+    shell.cache_registrations.push((id, Arc::clone(&state)));
+
+    match fallback {
+        None => {
+            shell
+                .html
+                .owned_mut()
+                .push_str(&format!("<?marker name=\"{id}\">"));
+            skeleton.push(SkeletonPart::Hole {
+                id,
+                fallback: None,
+                state,
+            });
+        }
+        Some(fallback) => {
+            shell
+                .html
+                .owned_mut()
+                .push_str(&format!("<?start name=\"{id}\">"));
+            let mut fallback_skeleton: Skeleton = Vec::new();
+            write_shell_with_skeleton(*fallback, next_id, shell, &mut fallback_skeleton);
+            shell.html.owned_mut().push_str("<?end>");
+            skeleton.push(SkeletonPart::Hole {
+                id,
+                fallback: Some(fallback_skeleton),
+                state,
+            });
+        }
+    }
+}
+
+/// Rebuilds a `PendingAttributes` element's replacement markup from its
+/// resolved attributes and the current state of its children's skeleton —
+/// see [`SkeletonPart`].
+fn serialize_skeleton(tag: &str, attributes: &[Attribute], skeleton: &Skeleton) -> String {
+    let mut out = String::new();
+    write_open_tag(tag, attributes, &mut out);
+    if !is_void_element(tag) {
+        write_skeleton_parts(skeleton, &mut out);
+        write_close_tag(tag, &mut out);
+    }
+    out
+}
+
+fn write_skeleton_parts(skeleton: &Skeleton, out: &mut String) {
+    for part in skeleton {
+        match part {
+            SkeletonPart::Literal(text) => out.push_str(text),
+            SkeletonPart::Hole { id, fallback, state } => {
+                let resolved = state.lock().expect("cache mutex is never held across a panic");
+                match &*resolved {
+                    Some(html) => out.push_str(html),
+                    None => match fallback {
+                        None => out.push_str(&format!("<?marker name=\"{id}\">")),
+                        Some(fallback_skeleton) => {
+                            out.push_str(&format!("<?start name=\"{id}\">"));
+                            write_skeleton_parts(fallback_skeleton, out);
+                            out.push_str("<?end>");
+                        }
+                    },
+                }
+            }
+        }
+    }
+}
+
 #[cfg(test)]
 mod test {
     use futures::FutureExt;
@@ -295,4 +592,127 @@ mod test {
         // Zero-copy: the Bytes point directly at the static data.
         assert_eq!(HTML.as_ptr(), bytes.as_ptr());
     }
+
+    fn attr(name: &'static str, value: &str) -> (std::borrow::Cow<'static, str>, Option<String>) {
+        (name.into(), Some(value.to_owned()))
+    }
+
+    #[test]
+    fn pending_attributes_wraps_whole_element_and_queues_one_future() {
+        let tree = Node::element_with_pending_attributes(
+            "div",
+            ready(vec![attr("class", "resolved")]),
+            vec![attr("class", "loading")],
+            vec![Node::text("content")],
+        );
+
+        let mut next_id = 0;
+        let shell = render_shell(tree, &mut next_id);
+
+        assert_eq!(
+            "<?start name=\"0\"><div class=\"loading\">content</div><?end>",
+            shell.html.as_str()
+        );
+        assert_eq!(1, shell.slots.len());
+        assert_eq!(0, shell.slots[0].0);
+        assert!(matches!(shell.slots[0].1, SlotSource::Future(_)));
+        // No nested holes in this tree, so no cache cells are registered.
+        assert!(shell.cache_registrations.is_empty());
+        assert_eq!(1, next_id);
+    }
+
+    #[test]
+    fn pending_attributes_future_resolves_to_the_full_replacement_element() {
+        let tree = Node::element_with_pending_attributes(
+            "div",
+            ready(vec![attr("class", "resolved")]),
+            vec![attr("class", "loading")],
+            vec![Node::text("content")],
+        );
+
+        let mut next_id = 0;
+        let mut shell = render_shell(tree, &mut next_id);
+        let (_, source) = shell.slots.pop().unwrap();
+        let SlotSource::Future(future) = source else {
+            panic!("pending-attributes node should register a future slot");
+        };
+        let resolved = future
+            .now_or_never()
+            .expect("ready future should resolve immediately");
+
+        assert_eq!(
+            "<div class=\"resolved\">content</div>",
+            crate::render_to_string(resolved)
+        );
+    }
+
+    #[test]
+    fn nested_hole_inside_pending_attributes_registers_a_cache_cell() {
+        let tree = Node::element_with_pending_attributes(
+            "div",
+            ready(vec![attr("class", "resolved")]),
+            vec![attr("class", "loading")],
+            vec![
+                Node::text("child: "),
+                Node::pending(ready(Node::text("inner"))),
+            ],
+        );
+
+        let mut next_id = 0;
+        let shell = render_shell(tree, &mut next_id);
+
+        assert_eq!(
+            "<?start name=\"0\"><div class=\"loading\">child: <?marker name=\"1\"></div><?end>",
+            shell.html.as_str()
+        );
+        // Two slots: the outer attribute future (id 0) and the nested
+        // pending child (id 1) — the child's slot is pushed first since its
+        // walk completes before the outer's own future is built, but the
+        // driver (a SelectAll) doesn't care about push order.
+        let mut ids: Vec<_> = shell.slots.iter().map(|(id, _)| *id).collect();
+        ids.sort_unstable();
+        assert_eq!(vec![0, 1], ids);
+        // The nested hole's cache cell is registered, starting empty.
+        assert_eq!(1, shell.cache_registrations.len());
+        let (cache_id, state) = &shell.cache_registrations[0];
+        assert_eq!(1, *cache_id);
+        assert!(state.lock().unwrap().is_none());
+    }
+
+    #[test]
+    fn nested_pending_attributes_registers_its_own_cache_cell_too() {
+        let inner = Node::element_with_pending_attributes(
+            "span",
+            ready(vec![attr("data-inner", "resolved")]),
+            vec![attr("data-inner", "loading")],
+            vec![Node::text("inner")],
+        );
+        let outer = Node::element_with_pending_attributes(
+            "div",
+            ready(vec![attr("data-outer", "resolved")]),
+            vec![attr("data-outer", "loading")],
+            vec![inner],
+        );
+
+        let mut next_id = 0;
+        let shell = render_shell(outer, &mut next_id);
+
+        assert_eq!(
+            "<?start name=\"0\"><div data-outer=\"loading\">\
+             <?start name=\"1\"><span data-inner=\"loading\">inner</span><?end>\
+             </div><?end>",
+            shell.html.as_str()
+        );
+        let mut slot_ids: Vec<_> = shell.slots.iter().map(|(id, _)| *id).collect();
+        slot_ids.sort_unstable();
+        assert_eq!(vec![0, 1], slot_ids);
+        // The nested PendingAttributes element (id 1) gets its own cache
+        // cell too, so an ancestor's swap can inline it once resolved.
+        let cache_ids: Vec<_> = shell
+            .cache_registrations
+            .iter()
+            .map(|(id, _)| *id)
+            .collect();
+        assert_eq!(vec![1], cache_ids);
+    }
 }
diff --git a/afterglow/src/stream.rs b/afterglow/src/stream.rs
index 93fc754..fd65d2d 100644
--- a/afterglow/src/stream.rs
+++ b/afterglow/src/stream.rs
@@ -1,5 +1,6 @@
-use std::collections::{BTreeMap, BTreeSet};
+use std::collections::{BTreeMap, BTreeSet, HashMap};
 use std::io;
+use std::sync::{Arc, Mutex};
 
 use async_stream::stream;
 use bytes::Bytes;
@@ -8,6 +9,21 @@ use futures::stream::{BoxStream, SelectAll, Stream, StreamExt};
 use crate::node::{Node, Render};
 use crate::shell::{HtmlBuf, Shell, SlotId, SlotSource, render_shell};
 
+/// Cache cells registered by `PendingAttributes` elements, keyed by the id
+/// of the hole whose resolved HTML they should receive. Seeded from the
+/// initial shell and extended after every subsequent resolution (a newly
+/// resolved subtree can itself contain a new `PendingAttributes` element).
+/// Written to — in addition to the normal `<template>` patch — whenever a
+/// tracked slot resolves, so a later element-attribute swap can inline
+/// whatever is currently known instead of re-running or duplicating work.
+type LiveCache = HashMap<SlotId, Arc<Mutex<Option<String>>>>;
+
+fn record_resolution(live_cache: &LiveCache, id: SlotId, html: &str) {
+    if let Some(state) = live_cache.get(&id) {
+        *state.lock().expect("cache mutex is never held across a panic") = Some(html.to_owned());
+    }
+}
+
 /// A slot event tagged with the slot's id: a value to patch into the slot,
 /// or the end of the slot's source (used by the ordered driver's gate).
 enum SlotEvent {
@@ -60,21 +76,24 @@ pub fn render_stream(root: impl Render) -> impl Stream<Item = io::Result<Bytes>>
     let root = root.into_node();
     stream! {
         let mut next_id: SlotId = 0;
-        let shell = render_shell(root, &mut next_id);
+        let Shell { html, slots, cache_registrations } = render_shell(root, &mut next_id);
+        let mut live_cache: LiveCache = cache_registrations.into_iter().collect();
         let mut pending: SelectAll<TaggedStream> = futures::stream::select_all(
-            shell.slots.into_iter().map(|(id, source)| tag(id, source)),
+            slots.into_iter().map(|(id, source)| tag(id, source)),
         );
 
-        yield Ok(shell.html.into_bytes());
+        yield Ok(html.into_bytes());
 
         while let Some(event) = pending.next().await {
             let SlotEvent::Value(id, node) = event else {
                 continue;
             };
-            let Shell { html, slots } = render_shell(node, &mut next_id);
+            let Shell { html, slots, cache_registrations } = render_shell(node, &mut next_id);
+            live_cache.extend(cache_registrations);
             for (new_id, source) in slots {
                 pending.push(tag(new_id, source));
             }
+            record_resolution(&live_cache, id, html.as_str());
             yield Ok(template_chunk(id, html.as_str()));
         }
     }
@@ -96,12 +115,13 @@ pub fn render_stream_ordered(
     let root = root.into_node();
     stream! {
         let mut next_id: SlotId = 0;
-        let shell = render_shell(root, &mut next_id);
+        let Shell { html, slots, cache_registrations } = render_shell(root, &mut next_id);
+        let mut live_cache: LiveCache = cache_registrations.into_iter().collect();
         let mut pending: SelectAll<TaggedStream> = futures::stream::select_all(
-            shell.slots.into_iter().map(|(id, source)| tag(id, source)),
+            slots.into_iter().map(|(id, source)| tag(id, source)),
         );
 
-        yield Ok(shell.html.into_bytes());
+        yield Ok(html.into_bytes());
 
         // The gate: `emit_next` is the lowest still-blocked slot. Chunks for
         // blocked slots are buffered; ends without a value are remembered so
@@ -113,10 +133,12 @@ pub fn render_stream_ordered(
         while let Some(event) = pending.next().await {
             match event {
                 SlotEvent::Value(id, node) => {
-                    let Shell { html, slots } = render_shell(node, &mut next_id);
+                    let Shell { html, slots, cache_registrations } = render_shell(node, &mut next_id);
+                    live_cache.extend(cache_registrations);
                     for (new_id, source) in slots {
                         pending.push(tag(new_id, source));
                     }
+                    record_resolution(&live_cache, id, html.as_str());
                     if id < emit_next {
                         yield Ok(template_chunk(id, html.as_str()));
                     } else {
diff --git a/afterglow/tests/pending_attributes.rs b/afterglow/tests/pending_attributes.rs
new file mode 100644
index 0000000..5e9bf15
--- /dev/null
+++ b/afterglow/tests/pending_attributes.rs
@@ -0,0 +1,312 @@
+//! Async attribute values: `Node::element_with_pending_attributes` /
+//! `html! { attr=@{...} }`. There is no attribute-level patch in the wire
+//! format, so once the attribute(s) resolve, the *whole element* is
+//! replaced. These tests verify that replacement never re-runs or
+//! duplicates a nested hole's work, regardless of whether that hole
+//! resolves before or after the attribute — the two failure modes a naive
+//! "rebuild the element from scratch" implementation would hit (content
+//! silently discarded, or an orphaned patch targeting a removed marker).
+
+use std::borrow::Cow;
+use std::io;
+use std::time::Duration;
+
+use afterglow::{Node, html, render_stream};
+use bytes::Bytes;
+use futures::stream::{Stream, StreamExt};
+use tokio::time::sleep;
+
+async fn collect_chunks(stream: impl Stream<Item = io::Result<Bytes>>) -> Vec<String> {
+    stream
+        .map(|chunk| String::from_utf8(chunk.unwrap().to_vec()).unwrap())
+        .collect()
+        .await
+}
+
+fn attr(name: &'static str, value: &str) -> (Cow<'static, str>, Option<String>) {
+    (name.into(), Some(value.to_owned()))
+}
+
+#[tokio::test(start_paused = true)]
+async fn attribute_resolves_with_no_nested_holes() {
+    let panel = Node::element_with_pending_attributes(
+        "div",
+        async move {
+            sleep(Duration::from_millis(10)).await;
+            vec![attr("class", "theme-dark"), attr("id", "panel")]
+        },
+        vec![attr("class", "theme-loading"), attr("id", "panel")],
+        vec![Node::text("Ready")],
+    );
+
+    let chunks = collect_chunks(render_stream(Node::element("main", vec![], vec![panel]))).await;
+
+    assert_eq!(
+        vec![
+            "<main><?start name=\"0\"><div class=\"theme-loading\" id=\"panel\">Ready</div><?end></main>",
+            "<template for=\"0\"><div class=\"theme-dark\" id=\"panel\">Ready</div></template>",
+        ],
+        chunks
+    );
+}
+
+#[tokio::test(start_paused = true)]
+async fn nested_pending_child_resolving_before_the_attribute_is_inlined_not_re_marked() {
+    let panel = Node::element_with_pending_attributes(
+        "div",
+        async move {
+            sleep(Duration::from_millis(30)).await;
+            vec![attr("class", "theme-dark")]
+        },
+        vec![attr("class", "theme-loading")],
+        vec![
+            Node::text("child: "),
+            Node::pending(async move {
+                sleep(Duration::from_millis(10)).await;
+                Node::text("resolved-child")
+            }),
+        ],
+    );
+
+    let chunks = collect_chunks(render_stream(panel)).await;
+
+    assert_eq!(
+        vec![
+            "<?start name=\"0\"><div class=\"theme-loading\">child: <?marker name=\"1\"></div><?end>",
+            "<template for=\"1\">resolved-child</template>",
+            // The swap inlines the already-resolved child directly — no
+            // marker for it in the new markup, and no second patch for it.
+            "<template for=\"0\"><div class=\"theme-dark\">child: resolved-child</div></template>",
+        ],
+        chunks
+    );
+}
+
+#[tokio::test(start_paused = true)]
+async fn nested_pending_child_resolving_after_the_attribute_reuses_its_marker_id() {
+    let panel = Node::element_with_pending_attributes(
+        "div",
+        async move {
+            sleep(Duration::from_millis(10)).await;
+            vec![attr("class", "theme-dark")]
+        },
+        vec![attr("class", "theme-loading")],
+        vec![
+            Node::text("child: "),
+            Node::pending(async move {
+                sleep(Duration::from_millis(30)).await;
+                Node::text("resolved-child")
+            }),
+        ],
+    );
+
+    let chunks = collect_chunks(render_stream(panel)).await;
+
+    assert_eq!(
+        vec![
+            "<?start name=\"0\"><div class=\"theme-loading\">child: <?marker name=\"1\"></div><?end>",
+            // The swap reuses marker id 1 — the child's own future is
+            // untouched, still running, and its later patch still lands.
+            "<template for=\"0\"><div class=\"theme-dark\">child: <?marker name=\"1\"></div></template>",
+            "<template for=\"1\">resolved-child</template>",
+        ],
+        chunks
+    );
+}
+
+#[tokio::test(start_paused = true)]
+async fn nested_stream_hole_swap_uses_only_the_latest_value() {
+    let ticks = async_stream::stream! {
+        for i in 1..=3u32 {
+            sleep(Duration::from_millis(10)).await;
+            yield Node::text(format!("tick {i}"));
+        }
+    };
+
+    let panel = Node::element_with_pending_attributes(
+        "div",
+        async move {
+            sleep(Duration::from_millis(25)).await; // after ticks 1, 2; before 3
+            vec![attr("class", "theme-dark")]
+        },
+        vec![attr("class", "theme-loading")],
+        vec![Node::stream_with_fallback(ticks, Node::text("waiting…"))],
+    );
+
+    let chunks = collect_chunks(render_stream(panel)).await;
+
+    assert_eq!(
+        vec![
+            "<?start name=\"0\"><div class=\"theme-loading\"><?start name=\"1\">waiting…<?end></div><?end>",
+            "<template for=\"1\">tick 1</template>",
+            "<template for=\"1\">tick 2</template>",
+            // The swap inlines only the latest value (tick 2), not the
+            // accumulated history — documented as a deliberate limitation.
+            "<template for=\"0\"><div class=\"theme-dark\">tick 2</div></template>",
+            // The stream itself is untouched and keeps patching afterward.
+            "<template for=\"1\">tick 3</template>",
+        ],
+        chunks
+    );
+}
+
+#[tokio::test(start_paused = true)]
+async fn nested_pending_attributes_resolving_before_the_outer_is_inlined() {
+    let inner = Node::element_with_pending_attributes(
+        "span",
+        async move {
+            sleep(Duration::from_millis(10)).await;
+            vec![attr("data-inner", "resolved")]
+        },
+        vec![attr("data-inner", "loading")],
+        vec![Node::text("inner")],
+    );
+    let outer = Node::element_with_pending_attributes(
+        "div",
+        async move {
+            sleep(Duration::from_millis(30)).await;
+            vec![attr("data-outer", "resolved")]
+        },
+        vec![attr("data-outer", "loading")],
+        vec![inner],
+    );
+
+    let chunks = collect_chunks(render_stream(outer)).await;
+
+    assert_eq!(
+        vec![
+            "<?start name=\"0\"><div data-outer=\"loading\">\
+             <?start name=\"1\"><span data-inner=\"loading\">inner</span><?end>\
+             </div><?end>",
+            "<template for=\"1\"><span data-inner=\"resolved\">inner</span></template>",
+            "<template for=\"0\"><div data-outer=\"resolved\"><span data-inner=\"resolved\">inner</span></div></template>",
+        ],
+        chunks
+    );
+}
+
+#[tokio::test(start_paused = true)]
+async fn nested_pending_attributes_resolving_after_the_outer_reuses_its_marker_id() {
+    let inner = Node::element_with_pending_attributes(
+        "span",
+        async move {
+            sleep(Duration::from_millis(30)).await;
+            vec![attr("data-inner", "resolved")]
+        },
+        vec![attr("data-inner", "loading")],
+        vec![Node::text("inner")],
+    );
+    let outer = Node::element_with_pending_attributes(
+        "div",
+        async move {
+            sleep(Duration::from_millis(10)).await;
+            vec![attr("data-outer", "resolved")]
+        },
+        vec![attr("data-outer", "loading")],
+        vec![inner],
+    );
+
+    let chunks = collect_chunks(render_stream(outer)).await;
+
+    assert_eq!(
+        vec![
+            "<?start name=\"0\"><div data-outer=\"loading\">\
+             <?start name=\"1\"><span data-inner=\"loading\">inner</span><?end>\
+             </div><?end>",
+            "<template for=\"0\"><div data-outer=\"resolved\">\
+             <?start name=\"1\"><span data-inner=\"loading\">inner</span><?end>\
+             </div></template>",
+            "<template for=\"1\"><span data-inner=\"resolved\">inner</span></template>",
+        ],
+        chunks
+    );
+}
+
+async fn theme_class() -> &'static str {
+    sleep(Duration::from_millis(10)).await;
+    "theme-dark"
+}
+
+#[tokio::test(start_paused = true)]
+async fn macro_pending_attribute_with_no_fallback_omits_it_until_resolved() {
+    let page = html! { <div class=@{theme_class()} id="panel">"Ready"</div> };
+
+    let chunks = collect_chunks(render_stream(page)).await;
+
+    assert_eq!(
+        vec![
+            "<?start name=\"0\"><div id=\"panel\">Ready</div><?end>",
+            "<template for=\"0\"><div class=\"theme-dark\" id=\"panel\">Ready</div></template>",
+        ],
+        chunks
+    );
+}
+
+#[tokio::test(start_paused = true)]
+async fn macro_pending_attribute_with_string_fallback() {
+    let page = html! {
+        <div class=@{theme_class()} else "theme-loading" id="panel">"Ready"</div>
+    };
+
+    let chunks = collect_chunks(render_stream(page)).await;
+
+    assert_eq!(
+        vec![
+            "<?start name=\"0\"><div class=\"theme-loading\" id=\"panel\">Ready</div><?end>",
+            "<template for=\"0\"><div class=\"theme-dark\" id=\"panel\">Ready</div></template>",
+        ],
+        chunks
+    );
+}
+
+#[tokio::test(start_paused = true)]
+async fn macro_pending_attribute_composes_with_a_nested_content_hole() {
+    async fn child() -> Node {
+        sleep(Duration::from_millis(30)).await;
+        Node::text("resolved-child")
+    }
+
+    let page = html! {
+        <div class=@{theme_class()} else "theme-loading">
+            "child: " @{child()}
+        </div>
+    };
+
+    let chunks = collect_chunks(render_stream(page)).await;
+
+    assert_eq!(
+        vec![
+            "<?start name=\"0\"><div class=\"theme-loading\">child: <?marker name=\"1\"></div><?end>",
+            "<template for=\"0\"><div class=\"theme-dark\">child: <?marker name=\"1\"></div></template>",
+            "<template for=\"1\">resolved-child</template>",
+        ],
+        chunks
+    );
+}
+
+#[tokio::test(start_paused = true)]
+async fn macro_output_matches_hand_built_tree() {
+    let by_macro = html! {
+        <div class=@{theme_class()} else "theme-loading" id="fixed">"x"</div>
+    };
+    let by_hand = Node::element_with_pending_attributes(
+        "div",
+        async move {
+            let class = theme_class().await;
+            vec![
+                ("class".into(), Some(class.to_string())),
+                ("id".into(), Some("fixed".to_owned())),
+            ]
+        },
+        vec![
+            attr("class", "theme-loading"),
+            attr("id", "fixed"),
+        ],
+        vec![Node::text("x")],
+    );
+
+    let macro_chunks = collect_chunks(render_stream(by_macro)).await;
+    let hand_chunks = collect_chunks(render_stream(by_hand)).await;
+
+    assert_eq!(hand_chunks, macro_chunks);
+}