diff --git a/examples/app/component-assets/tests/component-assets.spec.ts b/examples/app/component-assets/tests/component-assets.spec.ts
index 74910f9f1..a97e082dd 100644
--- a/examples/app/component-assets/tests/component-assets.spec.ts
+++ b/examples/app/component-assets/tests/component-assets.spec.ts
@@ -39,6 +39,19 @@ async function loadedTemplateNames(page: Page): Promise<string[]> {
   });
 }
 
+function lazyPanelStylesheets(
+  page: Page,
+): Promise<{ adopted: number; disabled: boolean; links: number }> {
+  return page.locator('lazy-panel').evaluate((panel) => ({
+    adopted: panel.shadowRoot?.adoptedStyleSheets.length ?? 0,
+    disabled:
+      (panel.shadowRoot?.querySelector(
+        'link[rel~="stylesheet"]',
+      ) as HTMLLinkElement | null)?.disabled ?? false,
+    links: panel.shadowRoot?.querySelectorAll('link[rel~="stylesheet"]').length ?? 0,
+  }));
+}
+
 test.describe('static component assets', () => {
   test('recovers a failed speculative native import through an explicit reload', async ({ page }) => {
     let assetRequests = 0;
@@ -150,14 +163,43 @@ test.describe('static component assets', () => {
 
     releaseCss();
     await expect(page.locator('lazy-panel')).toHaveCount(1);
-    await expect(page.locator('lazy-panel').evaluate((panel) => ({
-      adopted: panel.shadowRoot?.adoptedStyleSheets.length ?? 0,
-      disabled:
-        (panel.shadowRoot?.querySelector(
-          'link[rel~="stylesheet"]',
-        ) as HTMLLinkElement | null)?.disabled ?? false,
-      links: panel.shadowRoot?.querySelectorAll('link[rel~="stylesheet"]').length ?? 0,
-    }))).resolves.toEqual({ adopted: 1, disabled: true, links: 1 });
+    // A component used once stays on its native stylesheet link. Promoting it
+    // would serialize and reparse CSS that no other root shares; the next
+    // instance promotes instead (see the reopen test below).
+    await expect(lazyPanelStylesheets(page)).resolves.toEqual({
+      adopted: 0,
+      disabled: false,
+      links: 1,
+    });
+  });
+
+  test('shares the promoted Link stylesheet with a reopened lazy component', async ({ page }) => {
+    await page.goto('/');
+    const button = page.getByRole('button', { name: 'Load lazy panel' });
+    await expect(button).toBeVisible();
+    await button.click();
+    await expect(page.locator('lazy-panel')).toHaveCount(1);
+    await expect(lazyPanelStylesheets(page)).resolves.toEqual({
+      adopted: 0,
+      disabled: false,
+      links: 1,
+    });
+    await page.locator('lazy-panel').evaluate((panel) => {
+      (panel as HTMLElement & { firstInstance?: boolean }).firstInstance = true;
+    });
+
+    // The second instance promotes the CSSOM that the first native load
+    // authorized, adopts that shared sheet, and keeps its own link disabled.
+    // Every later instance adopts the same sheet without a link.
+    await button.click();
+    await expect.poll(() => page.locator('lazy-panel').evaluate((panel) => {
+      return (panel as HTMLElement & { firstInstance?: boolean }).firstInstance ?? false;
+    })).toBe(false);
+    await expect.poll(() => lazyPanelStylesheets(page)).toEqual({
+      adopted: 1,
+      disabled: true,
+      links: 1,
+    });
   });
 
   test('lets the application bundler split and reuse the lazy graph', async ({ page }) => {
diff --git a/packages/webui-framework/README.md b/packages/webui-framework/README.md
index 9ee105bdc..656c02341 100644
--- a/packages/webui-framework/README.md
+++ b/packages/webui-framework/README.md
@@ -998,6 +998,23 @@ guard, and completes deferred hydration. The component may be unstyled after a
 definitive stylesheet failure, but it remains visible and usable. SSR hydration,
 Style, Module, and authored/global Light DOM behavior are unchanged.
 
+Compiler-owned component stylesheets follow the same authority rules but
+promote on their second use. The first newly attached client Shadow root to
+mount a stylesheet in a Document keeps its native link and only records whether
+that load is authorized, so a component used once costs no CSSOM serialization
+or second parse. The next root promotes the authorized CSSOM of a loaded link
+once; every later root adopts that shared sheet before its template is
+appended, with no link, guard, or load wait. Memory-cached links promote during
+the mount, so every root created in one pass after `assets.preload()` or router
+preparation shares one sheet. A root still hidden by its guard may switch to
+the shared sheet before it is revealed; a visible root never switches.
+Roots whose cascade includes other author styles (a template's own `<style>`
+or `<link>`, server-rendered or reused roots, and Light descendants) promote on
+first use instead, so every instance adopts the same sheet. A response that
+fails authorization is remembered, so later roots keep native links without
+another timing lookup. Shared sheets and authorization results live as long as
+the Document's style catalog.
+
 ### Intent-time Link preloading for component assets
 
 In a Shadow build, call `assets.preload(tag)` from pointer, focus, or other
diff --git a/packages/webui-framework/src/element/link-styles.test.ts b/packages/webui-framework/src/element/link-styles.test.ts
index 700c32637..5226a218c 100644
--- a/packages/webui-framework/src/element/link-styles.test.ts
+++ b/packages/webui-framework/src/element/link-styles.test.ts
@@ -7,6 +7,7 @@ import { describe, test } from 'node:test';
 import {
   preloadComponentAssetStyles,
   rewriteCssUrls,
+  templateMayContainAuthorStyles,
   templateMayContainLinkStyles,
 } from './link-styles.js';
 
@@ -42,6 +43,52 @@ describe('Link stylesheet scanning', () => {
     );
   });
 
+  test('finds author styles in any template block', () => {
+    assert.equal(
+      templateMayContainAuthorStyles({ h: '<p class="card">Ready</p>' }),
+      false,
+    );
+    assert.equal(
+      templateMayContainAuthorStyles({ h: '<style-card></style-card><link-card></link-card>' }),
+      false,
+    );
+    assert.equal(
+      templateMayContainAuthorStyles({ h: '<STYLE>.a{}</STYLE><p></p>' }),
+      true,
+    );
+    assert.equal(
+      templateMayContainAuthorStyles({
+        h: '<p></p>',
+        b: [{ h: '<span></span>' }, { h: '<link rel="stylesheet" href="x.css">' }],
+      }),
+      true,
+    );
+  });
+
+  test('returns rules without URL candidates unchanged', () => {
+    const href = 'https://cdn.example.test/components/card.css';
+    const css = '.a{color:rgb(1,2,3);margin:calc(1px + 2px);width:var(--w)}';
+    assert.equal(rewriteCssUrls(css, href), css);
+    assert.equal(rewriteCssUrls('.a{content:"\\2014"}', href), '.a{content:"\\2014"}');
+    assert.equal(
+      rewriteCssUrls('/* url(old.svg) */.a{color:red}', href),
+      '/* url(old.svg) */.a{color:red}',
+    );
+  });
+
+  test('still scans mixed-case URL functions and escapes', () => {
+    const href = 'https://cdn.example.test/components/card.css';
+    assert.equal(
+      rewriteCssUrls('.a{width:calc(1px);--icon:URL(icons/a.svg)}', href),
+      '.a{width:calc(1px);--icon:URL("https://cdn.example.test/components/icons/a.svg")}',
+    );
+    assert.equal(
+      rewriteCssUrls('.a{background:-WEBKIT-IMAGE-SET("a.png" 1x)}', href),
+      undefined,
+    );
+    assert.equal(rewriteCssUrls('.a\\:hover{color:red}', href), undefined);
+  });
+
   test('resolves quoted and unquoted URLs against the stylesheet', () => {
     assert.equal(
       rewriteCssUrls(
diff --git a/packages/webui-framework/src/element/link-styles.ts b/packages/webui-framework/src/element/link-styles.ts
index 54fee4dac..dfc90c229 100644
--- a/packages/webui-framework/src/element/link-styles.ts
+++ b/packages/webui-framework/src/element/link-styles.ts
@@ -3,6 +3,7 @@
 
 import {
   templateHtmlMayContainLink,
+  templateHtmlMayContainStyles,
   getTemplateStylesheets,
   type TemplateStylesheetDescriptor,
 } from '../template-content.js';
@@ -26,8 +27,11 @@ interface TemplateLinkStyleState {
 interface SpeculativeStylesheetPreload {
   claimed: boolean;
   cleanupTimer?: ReturnType<typeof setTimeout>;
+  /** Preload result, recorded synchronously once `ready` settles. */
+  failure?: LinkStyleFailure;
   readonly link: HTMLLinkElement;
   readonly ready: Promise<LinkStyleFailure | undefined>;
+  settled: boolean;
   readonly startedAt: number;
 }
 
@@ -47,6 +51,56 @@ interface DeferredContentCallbacks {
   readonly hasAuthorHydrationLifecycle?: boolean;
 }
 
+/**
+ * One compiler-owned component stylesheet URL within a Document.
+ *
+ * The first root to mount the URL keeps its native link, so a component used
+ * once pays no CSSOM serialization or second parse. A later root promotes the
+ * authorized CSSOM of a loaded link once; every root after it adopts the
+ * shared sheet without a link, guard, or load wait.
+ */
+interface ComponentLinkRecord {
+  /** A native load of this URL passed `hasUnredirectedNativeTiming`. */
+  authorized: boolean;
+  /**
+   * Timing window opened by the first use. Concurrent roots share its fetch,
+   * so they authorize against it whichever load event settles first.
+   */
+  firstUseStartedAt: number;
+  sheet?: CSSStyleSheet;
+  /**
+   * Loaded, authorized link that can be promoted without a new load. Held
+   * weakly: the record lives as long as the Document, and the link would keep
+   * its removed root and host reachable when no later root needs this URL.
+   */
+  source?: WeakRef<HTMLLinkElement>;
+  /**
+   * Promotion failed for this Document's response: it is not authorized, or
+   * its CSS cannot be represented as a constructable sheet. Neither changes,
+   * because memory-cache hits add no new timing entry.
+   */
+  unpromotable: boolean;
+  /** Some root has already mounted this URL. */
+  used: boolean;
+}
+
+/**
+ * `installComponentLinkStyles` flag: promote a stylesheet on its first use.
+ *
+ * For roots whose cascade includes other author styles (a template's own
+ * `<style>` or `<link>`, server-rendered content, or Light descendants), so
+ * every instance adopts the same shared sheet.
+ */
+export const COMPONENT_LINKS_EAGER = 1;
+
+/**
+ * `installComponentLinkStyles` flag: the framework attached this ShadowRoot in
+ * the current mount, so it cannot hold adopted sheets yet. Synchronous
+ * adoption then writes `adoptedStyleSheets` without reading it; a read
+ * materializes a per-root wrapper that lives as long as the root.
+ */
+export const COMPONENT_ROOT_FRESH = 2;
+
 const READY = Promise.resolve();
 const NO_DESCRIPTORS: readonly TemplateStylesheetDescriptor[] = Object.freeze([]);
 const NO_LINK_STYLE_STATE: TemplateLinkStyleState = {
@@ -60,6 +114,24 @@ const GUARD_CSS =
   '@layer{:host{transition:none!important;visibility:hidden!important}}';
 const templateLinkStyles = new WeakMap<TemplateBlockMeta, TemplateLinkStyleState>();
 const activeStyleMounts = new WeakMap<ShadowRoot, (discardRoot?: boolean) => void>();
+const authorStyleTemplates = new WeakMap<TemplateMeta, boolean>();
+/**
+ * Per-Document state for compiler-owned component links, keyed by resolved
+ * stylesheet URL. Component links carry no media or request attributes, so
+ * the URL is the whole parse input.
+ *
+ * Entries describe the Document's memory-cached response and live as long as
+ * its style catalog, which never removes a resource, so the map is bounded by
+ * the distinct Link resources the page has mounted. They hold no DOM strongly.
+ * Dropping an entry would send the next mount back to a native load that can
+ * no longer be authorized: memory cache hits add no new resource timing entry.
+ */
+const componentLinkRecords = new WeakMap<Document, Map<string, ComponentLinkRecord>>();
+/** Catalog hrefs resolved against one Document base URL; see {@link resolveComponentHref}. */
+const resolvedComponentHrefs = new WeakMap<
+  Document,
+  { readonly base: string; readonly hrefs: Map<string, string> }
+>();
 let speculativeStylesheetPreloads:
   | Map<string, SpeculativeStylesheetPreload | undefined>
   | undefined;
@@ -131,8 +203,14 @@ export function preloadComponentAssetStyles(
       claimed: false,
       link,
       ready: waitForStylesheetPreload(link, href),
+      settled: false,
       startedAt,
     };
+    // Registered first, so every awaiting caller observes the settled state.
+    void preload.ready.then(failure => {
+      preload.settled = true;
+      preload.failure = failure;
+    });
     preloads.set(href, preload);
     (pending ??= []).push(preload.ready);
     preload.cleanupTimer = setTimeout(() => {
@@ -143,31 +221,115 @@ export function preloadComponentAssetStyles(
 }
 
 /**
- * Promote compiler-owned component links after their native loads complete.
+ * Adopt shared sheets for every component link href a root still needs.
+ *
+ * An href qualifies once an earlier root mounted it and its sheet exists or
+ * can be promoted from that root's loaded, authorized link. Returns false
+ * without touching the root otherwise; the caller then installs native links.
+ */
+export function adoptPromotedComponentLinks(
+  root: ShadowRoot,
+  hrefs: readonly string[],
+  flags = 0,
+): boolean {
+  const owner = root.ownerDocument;
+  const records = componentLinkRecords.get(owner);
+  if (!records || hrefs.length === 0) return false;
+  const sheets = new Array<CSSStyleSheet>(hrefs.length);
+  for (let i = 0; i < hrefs.length; i++) {
+    const record = records.get(resolveComponentHref(owner, hrefs[i]));
+    const sheet = record && (record.sheet ?? promoteSource(record));
+    if (!sheet) return false;
+    sheets[i] = sheet;
+  }
+  return adoptPreparedSheets(root, sheets, (flags & COMPONENT_ROOT_FRESH) !== 0);
+}
+
+/**
+ * Resolve a catalog href the way a native link created now would, without
+ * parsing a URL for every mounted root. A base URL change, from a `<base>`
+ * edit or a soft navigation in a Document without one, starts a new cache.
+ */
+function resolveComponentHref(owner: Document, href: string): string {
+  const base = owner.baseURI;
+  let cache = resolvedComponentHrefs.get(owner);
+  if (cache === undefined || cache.base !== base) {
+    cache = { base, hrefs: new Map() };
+    resolvedComponentHrefs.set(owner, cache);
+  }
+  let resolved = cache.hrefs.get(href);
+  if (resolved === undefined) {
+    resolved = resolveHref(href, base);
+    cache.hrefs.set(href, resolved);
+  }
+  return resolved;
+}
+
+/**
+ * Settle compiler-owned component links for one client Shadow root.
  *
  * Component style links are installed before a client template is wired, so
- * they cannot use the staging-root path below. Keep the host guarded while
- * the cache-warmed native links become readable, then adopt their CSSOM and
- * disable the links just like template-owned styles.
+ * they cannot use the staging-root path below. The first root to use an href
+ * keeps its native link and only records whether that load is authorized,
+ * unless `flags` has {@link COMPONENT_LINKS_EAGER}. Later roots promote the
+ * authorized CSSOM once and adopt the shared sheet, disabling their links. A
+ * root is guarded until its native links load and never switches
+ * representation after it becomes visible.
  */
 export function installComponentLinkStyles(
   host: HTMLElement,
   root: ShadowRoot,
   links: readonly HTMLLinkElement[],
+  flags = 0,
 ): void {
   if (links.length === 0 || !supportsConstructableStylesheets()) return;
 
   const mountStartedAt = performanceNow();
   let timingStartedAt = mountStartedAt;
+  let preloadsSettled = true;
+  let preloadFailed = false;
   const preloads: SpeculativeStylesheetPreload[] = [];
   const pendingPreloads: Promise<LinkStyleFailure | undefined>[] = [];
   for (let i = 0; i < links.length; i++) {
-    const speculative = speculativeStylesheetPreloads?.get(resolveHref(links[i].href));
+    // `link.href` is already the absolute, serialized URL that keys the map.
+    const speculative = speculativeStylesheetPreloads?.get(links[i].href);
     if (!speculative) continue;
     speculative.claimed = true;
     preloads.push(speculative);
     pendingPreloads.push(speculative.ready);
     timingStartedAt = Math.min(timingStartedAt, speculative.startedAt);
+    if (!speculative.settled) preloadsSettled = false;
+    else if (speculative.failure) preloadFailed = true;
+  }
+
+  const records = componentLinkRecordsFor(root.ownerDocument, links);
+  let share = true;
+  for (let i = 0; i < records.length; i++) {
+    if (records[i].used) continue;
+    records[i].used = true;
+    records[i].firstUseStartedAt = timingStartedAt;
+    share = false;
+  }
+  if ((flags & COMPONENT_LINKS_EAGER) !== 0) share = true;
+
+  const releasePreloads = (): void => {
+    for (let i = 0; i < preloads.length; i++) {
+      releaseStylesheetPreload(preloads[i].link);
+    }
+  };
+
+  // Memory-cached links expose their native sheets on insertion. Settle them
+  // before the template is wired: nothing paints in between, so no guard or
+  // load wait is needed, and later mounts in this pass can share the result.
+  if (preloadsSettled && hasLoadedSheets(links)) {
+    if (!preloadFailed) {
+      authorizeLoadedLinks(links, records, timingStartedAt);
+      if (share) {
+        shareLoadedLinks(root, links, records, (flags & COMPONENT_ROOT_FRESH) !== 0);
+      }
+    }
+    releasePreloads();
+    return;
   }
 
   const guard = installGuard(host, root);
@@ -177,11 +339,6 @@ export function installComponentLinkStyles(
   let remaining = 0;
   let cancelled = false;
 
-  const releasePreloads = (): void => {
-    for (let i = 0; i < preloads.length; i++) {
-      releaseStylesheetPreload(preloads[i].link);
-    }
-  };
   const cleanup = (): void => {
     for (let i = 0; i < links.length; i++) {
       const onLoad = loadHandlers[i];
@@ -191,7 +348,7 @@ export function installComponentLinkStyles(
     }
     releasePreloads();
   };
-  const fail = (): void => {
+  const reveal = (): void => {
     if (cancelled) return;
     cancelled = true;
     cleanup();
@@ -200,19 +357,15 @@ export function installComponentLinkStyles(
   const finish = (): void => {
     if (cancelled || remaining !== 0) return;
     void Promise.all(pendingPreloads).then(results => {
-      if (cancelled || results.some(result => result !== undefined)) {
-        fail();
-        return;
-      }
-      const sheets = constructComponentStylesheets(links, timingStartedAt);
-      if (!sheets || !adoptPreparedSheets(root, sheets)) {
-        fail();
-        return;
+      if (cancelled) return;
+      if (!results.some(result => result !== undefined)) {
+        authorizeLoadedLinks(links, records, timingStartedAt);
+        // Still hidden by the guard, so switching to the shared sheet is
+        // never visible. Author code may have adopted sheets meanwhile, so
+        // the list is read and preserved.
+        if (share) shareLoadedLinks(root, links, records, false);
       }
-      deactivatePromotedLinks(links);
-      cancelled = true;
-      cleanup();
-      guard.release();
+      reveal();
     });
   };
   const settle = (index: number): void => {
@@ -237,7 +390,7 @@ export function installComponentLinkStyles(
     }
     remaining += 1;
     const onLoad = (): void => settle(i);
-    const onError = (): void => fail();
+    const onError = (): void => reveal();
     loadHandlers[i] = onLoad;
     errorHandlers[i] = onError;
     links[i].addEventListener('load', onLoad, { once: true });
@@ -246,6 +399,28 @@ export function installComponentLinkStyles(
   if (remaining === 0) finish();
 }
 
+/**
+ * Whether any block of a template may add its own `<style>` or `<link>`.
+ *
+ * Roots with such styles promote compiler-owned links on first use, so every
+ * instance adopts the shared sheet and cascades it after the tree's styles.
+ */
+export function templateMayContainAuthorStyles(meta: TemplateMeta): boolean {
+  let result = authorStyleTemplates.get(meta);
+  if (result !== undefined) return result;
+  result = templateHtmlMayContainStyles(meta.h);
+  const blocks = meta.b;
+  if (!result && blocks) {
+    for (let i = 0; i < blocks.length; i++) {
+      if (!templateHtmlMayContainStyles(blocks[i].h)) continue;
+      result = true;
+      break;
+    }
+  }
+  authorStyleTemplates.set(meta, result);
+  return result;
+}
+
 /** Return whether a template can create a stylesheet link after bindings run. */
 export function templateMayContainLinkStyles(meta: TemplateBlockMeta): boolean {
   return getTemplateLinkStyleState(meta) !== NO_LINK_STYLE_STATE;
@@ -505,6 +680,9 @@ export function rewriteCssUrls(
   cssText: string,
   stylesheetHref: string,
 ): string | undefined {
+  // Most rules contain neither a URL function nor an escape; the scan below
+  // could only return them unchanged.
+  if (!hasCssUrlCandidate(cssText)) return cssText;
   let quote = 0;
   let output = '';
   let copiedThrough = 0;
@@ -777,9 +955,9 @@ function unsupportedLinkReason(
   return undefined;
 }
 
-function resolveHref(href: string): string {
+function resolveHref(href: string, base: string = document.baseURI): string {
   try {
-    return new URL(href, document.baseURI).href;
+    return new URL(href, base).href;
   } catch {
     return href;
   }
@@ -893,23 +1071,126 @@ function constructNativeStylesheets(
   return sheets;
 }
 
-function constructComponentStylesheets(
+function hasLoadedSheets(links: readonly HTMLLinkElement[]): boolean {
+  for (let i = 0; i < links.length; i++) {
+    if (requiresNativeLoad(links[i]) && !links[i].sheet) return false;
+  }
+  return true;
+}
+
+function componentLinkRecordsFor(
+  owner: Document,
   links: readonly HTMLLinkElement[],
-  mountStartedAt: number,
-): CSSStyleSheet[] | undefined {
+): ComponentLinkRecord[] {
+  let records = componentLinkRecords.get(owner);
+  if (!records) {
+    records = new Map();
+    componentLinkRecords.set(owner, records);
+  }
+  const result = new Array<ComponentLinkRecord>(links.length);
+  for (let i = 0; i < links.length; i++) {
+    const href = links[i].href;
+    let record = records.get(href);
+    if (!record) {
+      record = {
+        authorized: false,
+        firstUseStartedAt: Number.POSITIVE_INFINITY,
+        unpromotable: false,
+        used: false,
+      };
+      records.set(href, record);
+    }
+    result[i] = record;
+  }
+  return result;
+}
+
+/** Record which loaded links prove their Document's response is promotable. */
+function authorizeLoadedLinks(
+  links: readonly HTMLLinkElement[],
+  records: readonly ComponentLinkRecord[],
+  timingStartedAt: number,
+): void {
+  for (let i = 0; i < links.length; i++) {
+    const record = records[i];
+    if (!record.authorized && !record.unpromotable) {
+      record.authorized = hasUnredirectedNativeTiming(
+        links[i],
+        Math.min(timingStartedAt, record.firstUseStartedAt),
+      );
+      // Later links reuse the same cached response, so they cannot pass either.
+      if (!record.authorized) record.unpromotable = true;
+    }
+    if (
+      record.authorized &&
+      !record.unpromotable &&
+      !record.sheet &&
+      !record.source?.deref()?.sheet &&
+      links[i].sheet
+    ) {
+      record.source = new WeakRef(links[i]);
+    }
+  }
+}
+
+/** Adopt the shared sheets for loaded links, promoting each URL at most once. */
+function shareLoadedLinks(
+  root: ShadowRoot,
+  links: readonly HTMLLinkElement[],
+  records: readonly ComponentLinkRecord[],
+  fresh: boolean,
+): boolean {
   const sheets = new Array<CSSStyleSheet>(links.length);
   for (let i = 0; i < links.length; i++) {
-    const cssText = readNativeStylesheet(links[i], mountStartedAt);
-    if (cssText === undefined) return undefined;
+    const record = records[i];
+    const sheet =
+      record.sheet ??
+      (links[i].sheet ? promoteLink(record, links[i]) : promoteSource(record));
+    if (!sheet) return false;
+    sheets[i] = sheet;
+  }
+  if (!adoptPreparedSheets(root, sheets, fresh)) return false;
+  deactivatePromotedLinks(links);
+  return true;
+}
+
+function promoteSource(record: ComponentLinkRecord): CSSStyleSheet | undefined {
+  const source = record.source?.deref();
+  if (!source?.sheet) {
+    // Collected, removed, or disabled since it loaded; a later load can
+    // replace it.
+    record.source = undefined;
+    return undefined;
+  }
+  return promoteLink(record, source);
+}
+
+/** Construct the shared sheet from an authorized link's native CSSOM. */
+function promoteLink(
+  record: ComponentLinkRecord,
+  link: HTMLLinkElement,
+): CSSStyleSheet | undefined {
+  if (record.sheet) return record.sheet;
+  if (!record.authorized || record.unpromotable) return undefined;
+  const cssText = readStylesheetText(link);
+  let sheet: CSSStyleSheet | undefined;
+  if (cssText !== undefined) {
     try {
-      const sheet = new CSSStyleSheet({ baseURL: links[i].href });
+      sheet = new CSSStyleSheet({ baseURL: link.href });
       sheet.replaceSync(cssText);
-      sheets[i] = sheet;
     } catch {
-      return undefined;
+      sheet = undefined;
     }
   }
-  return sheets;
+  record.source = undefined;
+  if (!sheet) {
+    // Imports, unreadable rules, and unrewritable URLs do not change for the
+    // same response, so later roots skip the CSSOM read.
+    record.unpromotable = true;
+    return undefined;
+  }
+  record.sheet = sheet;
+  return sheet;
 }
 
 function readNativeStylesheet(
@@ -917,6 +1198,10 @@ function readNativeStylesheet(
   mountStartedAt: number,
 ): string | undefined {
   if (!hasUnredirectedNativeTiming(link, mountStartedAt)) return undefined;
+  return readStylesheetText(link);
+}
+
+function readStylesheetText(link: HTMLLinkElement): string | undefined {
   const sheet = link.sheet;
   if (!sheet) return undefined;
 
@@ -978,10 +1263,11 @@ function hasUnredirectedNativeTiming(
 function adoptPreparedSheets(
   root: ShadowRoot,
   sheets: CSSStyleSheet[],
+  fresh = false,
 ): boolean {
   if (!('adoptedStyleSheets' in root)) return false;
-  const current = root.adoptedStyleSheets;
-  if (current.length === 0) {
+  const current = fresh ? undefined : root.adoptedStyleSheets;
+  if (current === undefined || current.length === 0) {
     try {
       root.adoptedStyleSheets = sheets;
       return true;
@@ -1104,6 +1390,40 @@ function installInlineGuard(host: HTMLElement): () => void {
   };
 }
 
+/**
+ * Whether `rewriteCssUrls` must scan: any escape, or any `(` preceded
+ * case-insensitively by `url` or `image-set` (covering `-webkit-image-set`),
+ * including false positives inside strings and comments.
+ */
+function hasCssUrlCandidate(cssText: string): boolean {
+  if (cssText.indexOf('\\') !== -1) return true;
+  for (
+    let open = cssText.indexOf('(');
+    open !== -1;
+    open = cssText.indexOf('(', open + 1)
+  ) {
+    if (
+      endsWithCssName(cssText, open, 'url') ||
+      endsWithCssName(cssText, open, 'image-set')
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/** Compare the ASCII-lowercase name that ends at `end` without allocating. */
+function endsWithCssName(cssText: string, end: number, name: string): boolean {
+  const start = end - name.length;
+  if (start < 0) return false;
+  for (let i = 0; i < name.length; i++) {
+    let code = cssText.charCodeAt(start + i);
+    if (code >= 65 && code <= 90) code += 32;
+    if (code !== name.charCodeAt(i)) return false;
+  }
+  return true;
+}
+
 function skipComment(cssText: string, start: number): number {
   for (let i = start; i < cssText.length - 1; i++) {
     if (cssText.charCodeAt(i) === 42 && cssText.charCodeAt(i + 1) === 47) {
diff --git a/packages/webui-framework/src/element/styles.test.ts b/packages/webui-framework/src/element/styles.test.ts
index 3d2d87d35..ef5f70a89 100644
--- a/packages/webui-framework/src/element/styles.test.ts
+++ b/packages/webui-framework/src/element/styles.test.ts
@@ -5,7 +5,10 @@ import { strict as assert } from 'node:assert';
 import { describe, test } from 'node:test';
 import {
   claimSsrComponentStyles,
+  COMPONENT_LINKS_EAGER,
+  COMPONENT_ROOT_FRESH,
   installComponentStyles,
+  installMountedComponentStyles,
   registerComponentStyles,
   setCssModuleLoaderForTests,
   type ComponentStyles,
@@ -725,4 +728,325 @@ describe('component style resources', () => {
     );
     assert.equal(importMaps.length, 0);
   });
+
+  test('remembers every closure completed in one target', async () => {
+    const document = fakeDocument();
+    const root = fakeShadow(document);
+    registerComponentStyles(styles({ first: ['first'], second: ['second'] }), document);
+
+    await installComponentStyles('first', root);
+    await installComponentStyles('second', root);
+    (root as unknown as FakeParent).children[0].remove();
+    await installComponentStyles('first', root);
+    await installComponentStyles('second', root);
+
+    assert.deepEqual(
+      (root as unknown as FakeParent).children.map(child =>
+        child.getAttribute('data-webui-resource')
+      ),
+      ['second'],
+      'completed closures must not reinstall a resource removed afterward',
+    );
+  });
+});
+
+describe('shared component link sheets', () => {
+  const BASE = 'https://example.test/app/';
+  type GlobalName = 'CSSStyleSheet' | 'ShadowRoot' | 'document';
+
+  /** A `<link>` whose sheet is readable only while connected and enabled. */
+  class FakeLink {
+    readonly localName = 'link';
+    rel = '';
+    type = '';
+    disabled = false;
+    parent?: FakeParent;
+    private resolvedHref = '';
+    private readonly attributes = new Map<string, string>();
+
+    constructor(private readonly owner: { readonly baseURI: string }) {}
+
+    get href(): string {
+      return this.resolvedHref;
+    }
+
+    set href(value: string) {
+      // Like a native link, resolve against the owner's current base URL.
+      this.resolvedHref = new URL(value, this.owner.baseURI).href;
+      this.attributes.set('href', value);
+    }
+
+    get relList(): { contains(token: string): boolean } {
+      return { contains: token => this.rel.split(' ').includes(token) };
+    }
+
+    get sheet(): { cssRules: Array<{ cssText: string; type: number }> } | null {
+      if (this.disabled || !this.parent) return null;
+      return { cssRules: [{ cssText: '.card { color: red; }', type: 1 }] };
+    }
+
+    setAttribute(name: string, value: string): void {
+      this.attributes.set(name, value);
+    }
+
+    getAttribute(name: string): string | null {
+      return this.attributes.get(name) ?? null;
+    }
+
+    hasAttribute(name: string): boolean {
+      return this.attributes.has(name);
+    }
+
+    remove(): void {
+      this.parent?.detach(this as unknown as FakeElement);
+    }
+  }
+
+  class FakeConstructedSheet {
+    cssText = '';
+
+    replaceSync(cssText: string): void {
+      this.cssText = cssText;
+    }
+  }
+
+  class FakeShadowRoot {}
+
+  function linkDocument(): Document {
+    const document = fakeDocument();
+    Object.assign(document, {
+      baseURI: BASE,
+      createElement: (name: string) =>
+        name === 'link' ? new FakeLink(document) : new FakeElement(name),
+    });
+    return document;
+  }
+
+  function linkStyles(href = '/card.css'): ComponentStyles {
+    return {
+      version: 1,
+      strategy: 'link',
+      resources: { card: { kind: 'link', href } },
+      closures: { card: ['card'] },
+    };
+  }
+
+  /** One unredirected, non-service-worker native load inside every mount window. */
+  const AUTHORIZED_LOAD = {
+    initiatorType: 'link',
+    redirectEnd: 0,
+    redirectStart: 0,
+    responseStatus: 200,
+    startTime: Number.MAX_SAFE_INTEGER,
+    workerStart: 0,
+  };
+  let timingLookups = 0;
+
+  function withBrowserGlobals(run: () => void, load: object = AUTHORIZED_LOAD): void {
+    const previous = new Map<GlobalName, PropertyDescriptor | undefined>();
+    const define = (name: GlobalName, value: unknown): void => {
+      previous.set(name, Object.getOwnPropertyDescriptor(globalThis, name));
+      Object.defineProperty(globalThis, name, { configurable: true, value, writable: true });
+    };
+    Object.defineProperty(FakeShadowRoot.prototype, 'adoptedStyleSheets', {
+      configurable: true,
+      value: [],
+      writable: true,
+    });
+    define('CSSStyleSheet', FakeConstructedSheet);
+    define('ShadowRoot', FakeShadowRoot);
+    define('document', {
+      baseURI: BASE,
+      head: {},
+      createElement() {
+        throw new Error('a promoted or native-loaded root must not install a guard');
+      },
+    });
+    timingLookups = 0;
+    Object.defineProperty(performance, 'getEntriesByName', {
+      configurable: true,
+      value: () => {
+        timingLookups += 1;
+        return [load];
+      },
+    });
+    try {
+      run();
+    } finally {
+      Reflect.deleteProperty(performance, 'getEntriesByName');
+      for (const [name, descriptor] of previous) {
+        if (descriptor) Object.defineProperty(globalThis, name, descriptor);
+        else Reflect.deleteProperty(globalThis, name);
+      }
+    }
+  }
+
+  function links(root: ShadowRoot): FakeLink[] {
+    return (root as unknown as FakeParent).children as unknown as FakeLink[];
+  }
+
+  test('keeps the first root native and shares one promoted sheet after it', () => {
+    withBrowserGlobals(() => {
+      const document = linkDocument();
+      registerComponentStyles(linkStyles(), document);
+      const host = {} as HTMLElement;
+
+      const first = fakeShadow(document);
+      installComponentStyles('card', first, host);
+      assert.equal(links(first).length, 1);
+      assert.equal(links(first)[0].disabled, false);
+      assert.deepEqual(first.adoptedStyleSheets, []);
+
+      const second = fakeShadow(document);
+      const third = fakeShadow(document);
+      installComponentStyles('card', second, host);
+      installComponentStyles('card', third, host);
+      assert.equal(links(second).length, 0, 'later roots need no link of their own');
+      assert.equal(links(third).length, 0);
+      assert.equal(second.adoptedStyleSheets.length, 1);
+      assert.equal(third.adoptedStyleSheets[0], second.adoptedStyleSheets[0]);
+      assert.equal(
+        (second.adoptedStyleSheets[0] as unknown as FakeConstructedSheet).cssText,
+        '.card { color: red; }',
+      );
+      assert.equal(links(first)[0].disabled, false, 'a visible root is never switched');
+    });
+  });
+
+  test('promotes from a later root after the first root is removed', () => {
+    withBrowserGlobals(() => {
+      const document = linkDocument();
+      registerComponentStyles(linkStyles(), document);
+      const host = {} as HTMLElement;
+      const first = fakeShadow(document);
+      installComponentStyles('card', first, host);
+      links(first)[0].remove();
+
+      const second = fakeShadow(document);
+      installComponentStyles('card', second, host);
+      assert.equal(links(second).length, 1);
+      assert.equal(links(second)[0].disabled, true);
+      assert.equal(second.adoptedStyleSheets.length, 1);
+
+      const third = fakeShadow(document);
+      installComponentStyles('card', third, host);
+      assert.equal(links(third).length, 0);
+      assert.equal(third.adoptedStyleSheets[0], second.adoptedStyleSheets[0]);
+    });
+  });
+
+  test('promotes eagerly when the root has other author styles', () => {
+    withBrowserGlobals(() => {
+      const document = linkDocument();
+      registerComponentStyles(linkStyles(), document);
+      const host = {} as HTMLElement;
+
+      const styled = fakeShadow(document);
+      installMountedComponentStyles('card', styled, host, COMPONENT_LINKS_EAGER);
+      assert.equal(links(styled).length, 1);
+      assert.equal(links(styled)[0].disabled, true, 'the first eager root adopts too');
+      assert.equal(styled.adoptedStyleSheets.length, 1);
+
+      const plain = fakeShadow(document);
+      installComponentStyles('card', plain, host);
+      assert.equal(links(plain).length, 0);
+      assert.equal(plain.adoptedStyleSheets[0], styled.adoptedStyleSheets[0]);
+    });
+  });
+
+  test('adopts into a root attached in this mount without reading its sheets', () => {
+    withBrowserGlobals(() => {
+      const document = linkDocument();
+      registerComponentStyles(linkStyles(), document);
+      const host = {} as HTMLElement;
+      installComponentStyles('card', fakeShadow(document), host);
+
+      const fresh = fakeShadow(document);
+      let reads = 0;
+      let assigned: CSSStyleSheet[] = [];
+      Object.defineProperty(fresh, 'adoptedStyleSheets', {
+        configurable: true,
+        get() {
+          reads += 1;
+          return assigned;
+        },
+        set(value: CSSStyleSheet[]) {
+          assigned = value;
+        },
+      });
+      installMountedComponentStyles('card', fresh, host, COMPONENT_ROOT_FRESH);
+      assert.equal(reads, 0, 'a read would materialize a per-root wrapper');
+      assert.equal(assigned.length, 1);
+      assert.equal(links(fresh).length, 0);
+    });
+  });
+
+  test('keeps sheets a root already adopted', () => {
+    withBrowserGlobals(() => {
+      const document = linkDocument();
+      registerComponentStyles(linkStyles(), document);
+      const host = {} as HTMLElement;
+      installComponentStyles('card', fakeShadow(document), host);
+
+      const root = fakeShadow(document);
+      const author = new FakeConstructedSheet() as unknown as CSSStyleSheet;
+      root.adoptedStyleSheets = [author];
+      installComponentStyles('card', root, host);
+      assert.equal(root.adoptedStyleSheets.length, 2);
+      assert.equal(root.adoptedStyleSheets[1], author);
+    });
+  });
+
+  test('checks resource timing once for a response that cannot be promoted', () => {
+    withBrowserGlobals(() => {
+      const document = linkDocument();
+      registerComponentStyles(linkStyles(), document);
+      const host = {} as HTMLElement;
+      const roots = [fakeShadow(document), fakeShadow(document), fakeShadow(document)];
+      for (const root of roots) installComponentStyles('card', root, host);
+
+      assert.equal(timingLookups, 1);
+      for (const root of roots) {
+        assert.equal(links(root).length, 1);
+        assert.equal(links(root)[0].disabled, false);
+        assert.deepEqual(root.adoptedStyleSheets, []);
+      }
+    }, { ...AUTHORIZED_LOAD, redirectEnd: 2, redirectStart: 1 });
+  });
+
+  test('re-resolves catalog hrefs when the Document base URL changes', () => {
+    withBrowserGlobals(() => {
+      const document = linkDocument();
+      registerComponentStyles(linkStyles('card.css'), document);
+      const host = {} as HTMLElement;
+      installComponentStyles('card', fakeShadow(document), host);
+      const shared = fakeShadow(document);
+      installComponentStyles('card', shared, host);
+      assert.equal(links(shared).length, 0);
+
+      (document as { baseURI: string }).baseURI = 'https://example.test/other/';
+      const moved = fakeShadow(document);
+      installComponentStyles('card', moved, host);
+      assert.equal(links(moved).length, 1, 'a different stylesheet URL is a first use');
+      assert.equal(links(moved)[0].href, 'https://example.test/other/card.css');
+      assert.deepEqual(moved.adoptedStyleSheets, []);
+    });
+  });
+
+  test('shares promoted sheets only within one Document', () => {
+    withBrowserGlobals(() => {
+      const host = {} as HTMLElement;
+      const document = linkDocument();
+      registerComponentStyles(linkStyles(), document);
+      installComponentStyles('card', fakeShadow(document), host);
+      installComponentStyles('card', fakeShadow(document), host);
+
+      const other = linkDocument();
+      registerComponentStyles(linkStyles(), other);
+      const first = fakeShadow(other);
+      installComponentStyles('card', first, host);
+      assert.equal(links(first).length, 1);
+      assert.deepEqual(first.adoptedStyleSheets, []);
+    });
+  });
 });
diff --git a/packages/webui-framework/src/element/styles.ts b/packages/webui-framework/src/element/styles.ts
index dbd723069..730ac2571 100644
--- a/packages/webui-framework/src/element/styles.ts
+++ b/packages/webui-framework/src/element/styles.ts
@@ -1,11 +1,18 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { installComponentLinkStyles } from './link-styles.js';
+import {
+  adoptPromotedComponentLinks,
+  installComponentLinkStyles,
+} from './link-styles.js';
 import { setImportMapContent } from '../trusted-types-policy.js';
 import { catalogFor } from './style-catalog.js';
 import type { ComponentStyleResource, DocumentCatalog } from './style-catalog.js';
 
+export {
+  COMPONENT_LINKS_EAGER,
+  COMPONENT_ROOT_FRESH,
+} from './link-styles.js';
 export {
   hasComponentStyleWork,
   hasRegisteredComponentStyleResource,
@@ -26,9 +33,26 @@ export type { ComponentStyleResource, ComponentStyles } from './style-catalog.js
 declare const __WEBUI_DEV__: boolean;
 const DEV: boolean = typeof __WEBUI_DEV__ === 'undefined' || __WEBUI_DEV__;
 
-interface SsrStyleMarkerState {
-  moduleIds?: string[];
-  moduleElements?: Map<string, Element>;
+/** One ID, or a Set once a second distinct ID is added. */
+type CompactIds = string | Set<string> | undefined;
+
+/**
+ * Style bookkeeping for one Document or ShadowRoot.
+ *
+ * Most targets are client Shadow roots that install one closure with one
+ * resource, so IDs stay plain strings until a second one arrives, and the
+ * record costs a single WeakMap entry per target.
+ */
+interface TargetStyleState {
+  /** Closure root IDs fully installed in this tree. */
+  completed: CompactIds;
+  /** Resource IDs installed in this tree, including bundle members. */
+  installed: CompactIds;
+  /** Cached direct resource markers; see {@link directResourceMarkers}. */
+  markers: ResourceMarkerCache | undefined;
+  /** SSR Module markers by resource ID, in document order. */
+  moduleElements: Map<string, Element> | undefined;
+  moduleIds: string[] | undefined;
 }
 
 /**
@@ -36,10 +60,12 @@ interface SsrStyleMarkerState {
  *
  * Three CSS strategies are supported:
  *
- * - **Link**: The first client shadow mount authorizes external CSS through its
- *   native links, then promotes their CSSOM into shared constructable sheets.
- *   Warm mounts adopt those sheets synchronously; guarded native links remain
- *   the compatibility and failure path.
+ * - **Link**: A fresh client Shadow root keeps the native links of a
+ *   stylesheet's first mount in the Document and records whether that load is
+ *   authorized. The next root to need the stylesheet promotes the authorized
+ *   CSSOM once; later roots adopt that shared constructable sheet
+ *   synchronously. Roots whose cascade includes other author styles promote
+ *   every instance. Guarded native links remain the cold-load and failure path.
  *
  * - **Style**: Inline `<style>` tags inside each shadow template.
  *
@@ -96,11 +122,8 @@ interface WebUIStyleGlobal {
   [key: string]: unknown;
 }
 
-const installed = new WeakMap<StyleTarget, Set<string>>();
-const completedClosures = new WeakMap<StyleTarget, Set<string>>();
+const targetStates = new WeakMap<StyleTarget, TargetStyleState>();
 const pending = new WeakMap<StyleTarget, Map<string, Promise<CSSStyleSheet>>>();
-const ssrMarkers = new WeakMap<StyleTarget, SsrStyleMarkerState>();
-const resourceMarkers = new WeakMap<StyleTarget, ResourceMarkerCache>();
 const moduleAdoption = new WeakMap<StyleTarget, ModuleAdoptionState>();
 const moduleImportsInstalled = new WeakMap<Document, Set<string>>();
 const moduleImportsSeeded = new WeakSet<Document>();
@@ -138,24 +161,47 @@ function readNonce(target: StyleTarget = document): string {
   return meta?.content ?? '';
 }
 
-function targetInstalledResources(target: StyleTarget): Set<string> {
-  let targetInstalled = installed.get(target);
-  if (!targetInstalled) {
-    targetInstalled = new Set();
-    installed.set(target, targetInstalled);
-  }
-  return targetInstalled;
+function hasCompactId(ids: CompactIds, id: string): boolean {
+  return typeof ids === 'string' ? ids === id : ids !== undefined && ids.has(id);
+}
+
+function addCompactId(ids: CompactIds, id: string): string | Set<string> {
+  if (ids === undefined || ids === id) return id;
+  if (typeof ids === 'string') return new Set([ids, id]);
+  ids.add(id);
+  return ids;
+}
+
+/** Return a target's bookkeeping, claiming its SSR markers on first use. */
+function targetStyleState(target: StyleTarget, catalog: DocumentCatalog): TargetStyleState {
+  let state = targetStates.get(target);
+  if (state) return state;
+  state = {
+    completed: undefined,
+    installed: undefined,
+    markers: undefined,
+    moduleElements: undefined,
+    moduleIds: undefined,
+  };
+  targetStates.set(target, state);
+  const candidates = target.querySelectorAll?.(
+    'link[data-webui-resource],style[data-webui-resource]',
+  );
+  if (candidates) scanSsrMarkerElements(candidates, catalog, state);
+  return state;
 }
 
 function markResourceInstalled(
-  targetInstalled: Set<string>,
+  state: TargetStyleState,
   id: string,
   resource: ComponentStyleResource,
 ): void {
-  targetInstalled.add(id);
+  state.installed = addCompactId(state.installed, id);
   const members = resource.members;
   if (!members) return;
-  for (let i = 0; i < members.length; i++) targetInstalled.add(members[i]);
+  for (let i = 0; i < members.length; i++) {
+    state.installed = addCompactId(state.installed, members[i]);
+  }
 }
 
 function isMatchingResourceMarker(
@@ -189,8 +235,7 @@ export function isComponentStyleResourceMarker(element: Element): boolean {
 function scanSsrMarkerElements(
   candidates: ArrayLike<Element>,
   catalog: DocumentCatalog,
-  targetInstalled: Set<string>,
-  state: SsrStyleMarkerState,
+  state: TargetStyleState,
 ): void {
   for (let i = 0; i < candidates.length; i++) {
     const candidate = candidates[i];
@@ -199,7 +244,7 @@ function scanSsrMarkerElements(
     const resource = catalog.resources.get(id);
     if (!resource || !isMatchingResourceMarker(candidate, resource)) continue;
     if (resource.kind !== 'module') {
-      markResourceInstalled(targetInstalled, id, resource);
+      markResourceInstalled(state, id, resource);
       continue;
     }
     let moduleElements = state.moduleElements;
@@ -217,24 +262,6 @@ function scanSsrMarkerElements(
   }
 }
 
-function ensureSsrMarkers(
-  target: StyleTarget,
-  catalog: DocumentCatalog,
-  targetInstalled: Set<string>,
-): SsrStyleMarkerState {
-  let state = ssrMarkers.get(target);
-  if (state) return state;
-  state = {};
-  ssrMarkers.set(target, state);
-  const candidates = target.querySelectorAll?.(
-    'link[data-webui-resource],style[data-webui-resource]',
-  );
-  if (candidates) {
-    scanSsrMarkerElements(candidates, catalog, targetInstalled, state);
-  }
-  return state;
-}
-
 /**
  * Claim compiler-emitted SSR styles before installing a component closure.
  *
@@ -245,11 +272,10 @@ function ensureSsrMarkers(
  */
 export function claimSsrComponentStyles(source: Element, target: StyleTarget): void {
   const catalog = catalogFor(owningDocument(target));
-  const targetInstalled = targetInstalledResources(target);
-  const state = ensureSsrMarkers(target, catalog, targetInstalled);
+  const state = targetStyleState(target, catalog);
   const route = source.parentElement;
   if (route?.localName === 'webui-route') {
-    scanSsrMarkerElements(route.children, catalog, targetInstalled, state);
+    scanSsrMarkerElements(route.children, catalog, state);
   }
 }
 
@@ -268,13 +294,20 @@ function markerScope(target: StyleTarget): Element | ShadowRoot {
  */
 function directResourceMarkers(
   target: StyleTarget,
+  state: TargetStyleState,
   catalog: DocumentCatalog,
 ): Map<string, Element> | undefined {
   const scope = markerScope(target);
-  const cached = resourceMarkers.get(target);
+  const cached = state.markers;
   if (cached && cached.count === scope.childElementCount) {
     return cached.markers.size > 0 ? cached.markers : undefined;
   }
+  if (!isDocument(target) && scope.childElementCount === 0) {
+    // A fresh client root has nothing to anchor, and its template content
+    // invalidates any count cached now, so keep no per-root cache.
+    state.markers = undefined;
+    return undefined;
+  }
   const candidates = scope.children;
   const markers = new Map<string, Element>();
   for (let i = 0; i < candidates.length; i++) {
@@ -284,13 +317,13 @@ function directResourceMarkers(
     if (!resource || !isMatchingResourceMarker(candidates[i], resource)) continue;
     if (!markers.has(id)) markers.set(id, candidates[i]);
   }
-  resourceMarkers.set(target, { count: candidates.length, markers });
+  state.markers = { count: candidates.length, markers };
   return markers.size > 0 ? markers : undefined;
 }
 
 /** Keep the marker cache current for a resource element we just inserted. */
-function noteMarkerInserted(target: StyleTarget, id: string, element: Element): void {
-  const cached = resourceMarkers.get(target);
+function noteMarkerInserted(state: TargetStyleState, id: string, element: Element): void {
+  const cached = state.markers;
   if (!cached) return;
   // Exactly one element was inserted into the scanned scope, so the expected
   // child count advances by one without re-reading the live collection.
@@ -313,7 +346,6 @@ function appendResource(
     link.setAttribute('data-webui-resource', id);
     link.setAttribute('data-webui-strategy', 'link');
     parent.insertBefore(link, before ?? null);
-    noteMarkerInserted(target, id, link);
     return link;
   }
   if (resource.kind === 'style') {
@@ -324,7 +356,6 @@ function appendResource(
     style.setAttribute('data-webui-resource', id);
     style.setAttribute('data-webui-strategy', 'style');
     parent.insertBefore(style, before ?? null);
-    noteMarkerInserted(target, id, style);
     return style;
   }
   throw new Error(`[WebUI] Module resource "${id}" cannot be installed as an element.`);
@@ -392,20 +423,15 @@ function loadModule(
   return promise;
 }
 
-function markClosureComplete(target: StyleTarget, rootId: string): void {
-  let roots = completedClosures.get(target);
-  if (!roots) {
-    roots = new Set();
-    completedClosures.set(target, roots);
-  }
-  roots.add(rootId);
+function markClosureComplete(state: TargetStyleState, rootId: string): void {
+  state.completed = addCompactId(state.completed, rootId);
 }
 
 function installElementRange(
   target: StyleTarget,
   catalog: DocumentCatalog,
   closure: readonly string[],
-  targetInstalled: Set<string>,
+  state: TargetStyleState,
   start: number,
   end: number,
   before?: Element,
@@ -413,14 +439,15 @@ function installElementRange(
 ): void {
   for (let i = start; i < end; i++) {
     const id = closure[i];
-    if (targetInstalled.has(id)) continue;
+    if (hasCompactId(state.installed, id)) continue;
     const resource = catalog.resources.get(id);
     if (!resource || resource.kind === 'module') continue;
     const element = appendResource(target, id, resource, before);
+    noteMarkerInserted(state, id, element);
     if (linkElements && resource.kind === 'link') {
       linkElements.push(element as HTMLLinkElement);
     }
-    markResourceInstalled(targetInstalled, id, resource);
+    markResourceInstalled(state, id, resource);
   }
 }
 
@@ -463,7 +490,7 @@ function installElements(
   target: StyleTarget,
   catalog: DocumentCatalog,
   closure: readonly string[],
-  targetInstalled: Set<string>,
+  state: TargetStyleState,
   markers: Map<string, Element> | undefined,
   rootId: string,
   linkElements?: HTMLLinkElement[],
@@ -481,7 +508,7 @@ function installElements(
         target,
         catalog,
         closure,
-        targetInstalled,
+        state,
         i + 1,
         segmentEnd,
         before,
@@ -489,7 +516,7 @@ function installElements(
       );
       const resource = catalog.resources.get(closure[i]);
       if (resource && resource.kind !== 'module') {
-        markResourceInstalled(targetInstalled, closure[i], resource);
+        markResourceInstalled(state, closure[i], resource);
       }
       before = marker;
       segmentEnd = i;
@@ -499,7 +526,7 @@ function installElements(
     target,
     catalog,
     closure,
-    targetInstalled,
+    state,
     0,
     segmentEnd,
     before,
@@ -507,6 +534,47 @@ function installElements(
   );
 }
 
+/**
+ * Adopt shared sheets for every Link resource a ShadowRoot closure still needs.
+ *
+ * Applies only when earlier roots mounted all of them and each shared sheet
+ * exists or can be promoted from a loaded link. Any other pending element
+ * resource keeps the native install path, so cascade order and the native-link
+ * fallback stay exactly as they were.
+ */
+function adoptPromotedLinkClosure(
+  target: ShadowRoot,
+  catalog: DocumentCatalog,
+  closure: readonly string[],
+  state: TargetStyleState,
+  flags: number,
+): boolean {
+  let ids: string[] | undefined;
+  let hrefs: string[] | undefined;
+  let covered: Set<string> | undefined;
+  for (let i = 0; i < closure.length; i++) {
+    const id = closure[i];
+    if (hasCompactId(state.installed, id) || covered?.has(id)) continue;
+    const resource = catalog.resources.get(id);
+    if (!resource || resource.kind === 'module') continue;
+    if (resource.kind !== 'link') return false;
+    (ids ??= []).push(id);
+    (hrefs ??= []).push(resource.href);
+    // Mirror installElementRange: a bundle's members count as installed for
+    // the rest of this closure.
+    const members = resource.members;
+    if (!members) continue;
+    covered ??= new Set();
+    for (let m = 0; m < members.length; m++) covered.add(members[m]);
+  }
+  if (!ids || !hrefs || !adoptPromotedComponentLinks(target, hrefs, flags)) return false;
+  for (let i = 0; i < ids.length; i++) {
+    const resource = catalog.resources.get(ids[i]);
+    if (resource) markResourceInstalled(state, ids[i], resource);
+  }
+  return true;
+}
+
 function moduleAdoptionState(target: StyleTarget): ModuleAdoptionState {
   let state = moduleAdoption.get(target);
   if (!state) {
@@ -563,8 +631,7 @@ function commitModules(
   target: StyleTarget,
   ids: readonly string[],
   sheets: readonly CSSStyleSheet[],
-  markers: Map<string, Element> | undefined,
-  targetInstalled: Set<string>,
+  styleState: TargetStyleState,
 ): void {
   const state = moduleAdoptionState(target);
   const catalog = catalogFor(owningDocument(target));
@@ -578,11 +645,12 @@ function commitModules(
   }
   applyModuleOrder(target, state);
   const targetPending = pending.get(target);
+  const markers = styleState.moduleElements;
   for (let i = 0; i < sheets.length; i++) {
     const id = ids[i];
     const resource = catalog.resources.get(id);
-    if (resource) markResourceInstalled(targetInstalled, id, resource);
-    else targetInstalled.add(id);
+    if (resource) markResourceInstalled(styleState, id, resource);
+    else styleState.installed = addCompactId(styleState.installed, id);
     targetPending?.delete(id);
     // Drop the element reference with the node so an adopted fallback does not
     // stay reachable for the lifetime of the CSS tree.
@@ -600,8 +668,7 @@ async function finishModuleLoads(
   rootId: string,
   ids: readonly string[],
   loads: readonly Promise<CSSStyleSheet>[],
-  markers: Map<string, Element> | undefined,
-  targetInstalled: Set<string>,
+  styleState: TargetStyleState,
 ): Promise<void> {
   const sheets: CSSStyleSheet[] = [];
   try {
@@ -612,12 +679,12 @@ async function finishModuleLoads(
     }
   } catch (error) {
     if (sheets.length > 0) {
-      commitModules(target, ids, sheets, markers, targetInstalled);
+      commitModules(target, ids, sheets, styleState);
     }
     throw error;
   }
-  commitModules(target, ids, sheets, markers, targetInstalled);
-  markClosureComplete(target, rootId);
+  commitModules(target, ids, sheets, styleState);
+  markClosureComplete(styleState, rootId);
 }
 
 /**
@@ -627,6 +694,9 @@ async function finishModuleLoads(
  * resources return a promise that rejects on import failure; failed pending
  * entries are removed for retry.
  *
+ * For a ShadowRoot with a `host`, Link resources an earlier root already
+ * mounted are shared as constructable sheets instead of per-root links.
+ *
  * Failure policy — the two outcomes are deliberately different:
  *
  * - **An unknown `rootId` returns quietly.** A component with no CSS has no
@@ -641,19 +711,42 @@ export function installComponentStyles(
   rootId: string,
   target: StyleTarget,
   host?: HTMLElement,
+): Promise<void> | undefined {
+  return installStyles(rootId, target, host, 0);
+}
+
+/**
+ * Install a mounting component's closure with what its host knows about the
+ * target: `flags` combines {@link COMPONENT_LINKS_EAGER} and
+ * {@link COMPONENT_ROOT_FRESH}. Otherwise identical to
+ * {@link installComponentStyles}.
+ */
+export function installMountedComponentStyles(
+  rootId: string,
+  target: StyleTarget,
+  host: HTMLElement,
+  flags: number,
+): Promise<void> | undefined {
+  return installStyles(rootId, target, host, flags);
+}
+
+function installStyles(
+  rootId: string,
+  target: StyleTarget,
+  host: HTMLElement | undefined,
+  flags: number,
 ): Promise<void> | undefined {
   const catalog = catalogFor(owningDocument(target));
   const closure = catalog.closures.get(rootId);
-  if (!closure || completedClosures.get(target)?.has(rootId)) return undefined;
-
-  const targetInstalled = targetInstalledResources(target);
-  const markerState = ensureSsrMarkers(target, catalog, targetInstalled);
+  if (!closure) return undefined;
+  const state = targetStyleState(target, catalog);
+  if (hasCompactId(state.completed, rootId)) return undefined;
 
   let hasElementWork = false;
   let hasClosureModuleWork = false;
   for (let i = 0; i < closure.length; i++) {
     const id = closure[i];
-    if (targetInstalled.has(id)) continue;
+    if (hasCompactId(state.installed, id)) continue;
     const resource = catalog.resources.get(id);
     if (!resource) {
       throw new Error(`[WebUI] Missing component style resource "${id}" for closure "${rootId}".`);
@@ -663,33 +756,43 @@ export function installComponentStyles(
   }
 
   let hasSsrModuleWork = false;
-  const ssrModuleIds = markerState.moduleIds;
+  const ssrModuleIds = state.moduleIds;
   if (ssrModuleIds) {
     for (let i = 0; i < ssrModuleIds.length; i++) {
-      if (!targetInstalled.has(ssrModuleIds[i])) {
+      if (!hasCompactId(state.installed, ssrModuleIds[i])) {
         hasSsrModuleWork = true;
         break;
       }
     }
   }
   if (!hasElementWork && !hasClosureModuleWork && !hasSsrModuleWork) {
-    markClosureComplete(target, rootId);
+    markClosureComplete(state, rootId);
     return undefined;
   }
 
   if (hasElementWork) {
-    const linkElements: HTMLLinkElement[] = [];
-    installElements(
-      target,
-      catalog,
-      closure,
-      targetInstalled,
-      directResourceMarkers(target, catalog),
-      rootId,
-      linkElements,
-    );
-    if (host && !isDocument(target)) {
-      installComponentLinkStyles(host, target, linkElements);
+    const markers = directResourceMarkers(target, state, catalog);
+    // Existing markers anchor native insertion order, so only an unmarked
+    // root may replace its links with shared sheets.
+    const adopted =
+      host !== undefined &&
+      !isDocument(target) &&
+      markers === undefined &&
+      adoptPromotedLinkClosure(target, catalog, closure, state, flags);
+    if (!adopted) {
+      const linkElements: HTMLLinkElement[] = [];
+      installElements(
+        target,
+        catalog,
+        closure,
+        state,
+        markers,
+        rootId,
+        linkElements,
+      );
+      if (host && !isDocument(target)) {
+        installComponentLinkStyles(host, target, linkElements, flags);
+      }
     }
   }
 
@@ -710,7 +813,7 @@ export function installComponentStyles(
   if (ssrModuleIds) {
     for (let i = 0; i < ssrModuleIds.length; i++) {
       const id = ssrModuleIds[i];
-      if (targetInstalled.has(id)) continue;
+      if (hasCompactId(state.installed, id)) continue;
       const resource = catalog.resources.get(id);
       if (!resource || resource.kind !== 'module') continue;
       queueModule(id, resource);
@@ -718,7 +821,7 @@ export function installComponentStyles(
   }
   for (let i = 0; i < closure.length; i++) {
     const id = closure[i];
-    if (targetInstalled.has(id) || queuedModules?.has(id)) continue;
+    if (hasCompactId(state.installed, id) || queuedModules?.has(id)) continue;
     const resource = catalog.resources.get(id);
     if (!resource) {
       throw new Error(`[WebUI] Missing component style resource "${id}" for closure "${rootId}".`);
@@ -728,15 +831,8 @@ export function installComponentStyles(
     }
   }
   if (!moduleLoads || !moduleIds) {
-    markClosureComplete(target, rootId);
+    markClosureComplete(state, rootId);
     return undefined;
   }
-  return finishModuleLoads(
-    target,
-    rootId,
-    moduleIds,
-    moduleLoads,
-    markerState.moduleElements,
-    targetInstalled,
-  );
+  return finishModuleLoads(target, rootId, moduleIds, moduleLoads, state);
 }
diff --git a/packages/webui-framework/src/template-content.ts b/packages/webui-framework/src/template-content.ts
index 012af4da3..72e7e584c 100644
--- a/packages/webui-framework/src/template-content.ts
+++ b/packages/webui-framework/src/template-content.ts
@@ -79,19 +79,29 @@ export function getTemplateStylesheets(
 
 /** Return whether template HTML may contain a `<link>` start tag. */
 export function templateHtmlMayContainLink(html: string): boolean {
-  for (let i = 0; i <= html.length - 5; i++) {
+  return htmlMayContainStartTag(html, 'link');
+}
+
+/** Return whether template HTML may contain a `<link>` or `<style>` start tag. */
+export function templateHtmlMayContainStyles(html: string): boolean {
+  return htmlMayContainStartTag(html, 'link') || htmlMayContainStartTag(html, 'style');
+}
+
+/** Find an ASCII case-insensitive start tag; `name` must be lowercase. */
+function htmlMayContainStartTag(html: string, name: string): boolean {
+  const nextOffset = name.length + 1;
+  for (let i = 0; i <= html.length - nextOffset; i++) {
     if (html.charCodeAt(i) !== 60) continue;
-    if (
-      asciiLower(html.charCodeAt(i + 1)) !== 108 ||
-      asciiLower(html.charCodeAt(i + 2)) !== 105 ||
-      asciiLower(html.charCodeAt(i + 3)) !== 110 ||
-      asciiLower(html.charCodeAt(i + 4)) !== 107
-    ) {
-      continue;
+    let matches = true;
+    for (let j = 0; j < name.length; j++) {
+      if (asciiLower(html.charCodeAt(i + 1 + j)) === name.charCodeAt(j)) continue;
+      matches = false;
+      break;
     }
-    const next = html.charCodeAt(i + 5);
+    if (!matches) continue;
+    const next = html.charCodeAt(i + nextOffset);
     if (
-      i + 5 === html.length ||
+      i + nextOffset === html.length ||
       next === 9 ||
       next === 10 ||
       next === 12 ||
diff --git a/packages/webui-framework/src/template-element.ts b/packages/webui-framework/src/template-element.ts
index d0ec2fcd3..b047788b7 100644
--- a/packages/webui-framework/src/template-element.ts
+++ b/packages/webui-framework/src/template-element.ts
@@ -90,13 +90,16 @@ import {
 } from './element/markers.js';
 import {
   claimSsrComponentStyles,
-  installComponentStyles,
+  installMountedComponentStyles,
   isComponentStyleMarker,
 } from './element/styles.js';
 import {
   cancelTemplateLinkStyleMount,
+  COMPONENT_LINKS_EAGER,
+  COMPONENT_ROOT_FRESH,
   installTemplateLinkStyles,
   prepareTemplateLinkStyles,
+  templateMayContainAuthorStyles,
   templateMayContainLinkStyles,
 } from './element/link-styles.js';
 import {
@@ -732,6 +735,7 @@ export class TemplateElement extends HTMLElement {
     let root: Node;
     let isSSR: boolean;
     let clientRoot: HTMLElement | null = null;
+    let freshShadow = false;
 
     if (remountStructuralTemplate) {
       const renderRoot = wantShadow
@@ -761,6 +765,7 @@ export class TemplateElement extends HTMLElement {
       // Shadow DOM client-created (or SPA partial with slot content).
       // Existing children are slot content — they stay in light DOM
       // and project through the template's <slot>.
+      freshShadow = this.shadowRoot === null;
       const renderRoot = this.shadowRoot ?? this.attachShadow({ mode: 'open' });
       if (resetClientShadow) renderRoot.replaceChildren();
       root = renderRoot;
@@ -773,7 +778,7 @@ export class TemplateElement extends HTMLElement {
 
     // Styles are required even when a compiler-owned SSR host remains dormant.
     // Install them after root selection but before the hydration deferral.
-    this.$installStyles(meta);
+    this.$installStyles(meta, freshShadow);
 
     if (isSSR && !forceSSR && !reconnecting) {
       const ancestor = this.$nearestHydrationBarrier();
@@ -917,7 +922,7 @@ export class TemplateElement extends HTMLElement {
     }
   }
 
-  private $installStyles(meta: TemplateMeta): void {
+  private $installStyles(meta: TemplateMeta, freshShadow = false): void {
     const wantShadow = !!this.shadowRoot || !!meta.sd;
     const containingRoot = this.getRootNode();
     const styleTarget = wantShadow
@@ -926,7 +931,21 @@ export class TemplateElement extends HTMLElement {
         ? containingRoot as ShadowRoot
         : this.ownerDocument;
     claimSsrComponentStyles(this, styleTarget);
-    const installation = installComponentStyles(this.localName, styleTarget, this);
+    // A shadow root attached in this mount holds nothing yet, so it can keep
+    // its first Link stylesheet native and adopt shared sheets later. Roots
+    // whose cascade has other author styles promote eagerly instead, so every
+    // instance cascades the same way.
+    const flags = !freshShadow
+      ? COMPONENT_LINKS_EAGER
+      : templateMayContainAuthorStyles(meta)
+        ? COMPONENT_ROOT_FRESH | COMPONENT_LINKS_EAGER
+        : COMPONENT_ROOT_FRESH;
+    const installation = installMountedComponentStyles(
+      this.localName,
+      styleTarget,
+      this,
+      flags,
+    );
     if (installation) {
       void installation.catch((error) => {
         console.error(error);
diff --git a/packages/webui-framework/tests/fixtures/component-link-sharing/cold.css b/packages/webui-framework/tests/fixtures/component-link-sharing/cold.css
new file mode 100644
index 000000000..03822e4d2
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/component-link-sharing/cold.css
@@ -0,0 +1 @@
+.label { color: rgb(44, 55, 66); }
\ No newline at end of file
diff --git a/packages/webui-framework/tests/fixtures/component-link-sharing/component-link-sharing.spec.ts b/packages/webui-framework/tests/fixtures/component-link-sharing/component-link-sharing.spec.ts
new file mode 100644
index 000000000..de7f5ae6b
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/component-link-sharing/component-link-sharing.spec.ts
@@ -0,0 +1,273 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { expect, test, type Page } from '@playwright/test';
+
+const SHARED_TAG = 'test-shared-link-card';
+const SHARED_COLOR = 'rgb(11, 22, 33)';
+
+async function openFixture(page: Page): Promise<void> {
+  await page.goto('/component-link-sharing/fixture.html');
+  await page.waitForFunction(() => typeof window.__inspectLinkCards === 'function');
+}
+
+async function register(page: Page, tag: string, prepare: boolean): Promise<void> {
+  await page.evaluate(
+    ([name, warm]) => window.__registerLinkCards?.(name, warm),
+    [tag, prepare] as const,
+  );
+}
+
+/** Mount and inspect in one task, before any frame, load event, or microtask. */
+async function mountNow(page: Page, tag: string, count: number) {
+  return page.evaluate(([name, total]) => {
+    window.__mountLinkCards?.(name, total);
+    return window.__inspectLinkCards?.(name);
+  }, [tag, count] as const);
+}
+
+async function inspect(page: Page, tag: string) {
+  return page.evaluate(name => window.__inspectLinkCards?.(name), tag);
+}
+
+test.describe('component link sharing', () => {
+  test('shares one sheet across a prepared mount pass after one native link', async ({
+    page,
+  }) => {
+    let requests = 0;
+    page.on('request', request => {
+      if (new URL(request.url()).pathname === '/component-link-sharing/shared.css') {
+        requests += 1;
+      }
+    });
+    await openFixture(page);
+    await register(page, SHARED_TAG, true);
+
+    // The first root keeps its native link. The second promotes that link's
+    // authorized CSSOM once, and every later root adopts the shared sheet
+    // without a link, guard, or load wait.
+    await expect(mountNow(page, SHARED_TAG, 20)).resolves.toEqual({
+      activeLinks: 1,
+      adopted: 19,
+      cards: 20,
+      colors: [SHARED_COLOR],
+      distinctSheets: 1,
+      guards: 0,
+      hidden: 0,
+      links: 1,
+      sameSheetAsFirstBatch: true,
+    });
+    expect(requests).toBe(1);
+  });
+
+  test('keeps adopting the shared sheet after the preload is released', async ({
+    page,
+  }) => {
+    await openFixture(page);
+    await register(page, SHARED_TAG, true);
+    await mountNow(page, SHARED_TAG, 2);
+    await expect.poll(() => page.evaluate(() => {
+      return document.head.querySelectorAll('link[rel="preload"]').length;
+    })).toBe(0);
+
+    // A later root's native load is a memory cache hit with no new resource
+    // timing entry, so only the shared sheet can style it without a guard.
+    const report = await page.evaluate(name => {
+      window.__removeLinkCards?.(name);
+      window.__mountLinkCards?.(name, 20);
+      return window.__inspectLinkCards?.(name);
+    }, SHARED_TAG);
+    expect(report).toEqual({
+      activeLinks: 0,
+      adopted: 20,
+      cards: 20,
+      colors: [SHARED_COLOR],
+      distinctSheets: 1,
+      guards: 0,
+      hidden: 0,
+      links: 0,
+      sameSheetAsFirstBatch: true,
+    });
+  });
+
+  test('promotes on the second use after a lone first mount', async ({ page }) => {
+    await openFixture(page);
+    await register(page, SHARED_TAG, true);
+
+    // A component used once costs no more than its native link.
+    await expect(mountNow(page, SHARED_TAG, 1)).resolves.toEqual({
+      activeLinks: 1,
+      adopted: 0,
+      cards: 1,
+      colors: [SHARED_COLOR],
+      distinctSheets: 0,
+      guards: 0,
+      hidden: 0,
+      links: 1,
+      sameSheetAsFirstBatch: true,
+    });
+
+    // Later roots promote the first root's loaded link once, using the
+    // authorization recorded for the Document's response. The visible first
+    // root is never switched.
+    await expect(mountNow(page, SHARED_TAG, 2)).resolves.toEqual({
+      activeLinks: 1,
+      adopted: 2,
+      cards: 3,
+      colors: [SHARED_COLOR],
+      distinctSheets: 1,
+      guards: 0,
+      hidden: 0,
+      links: 1,
+      sameSheetAsFirstBatch: true,
+    });
+  });
+
+  test('promotes from a later root when the first root is gone', async ({ page }) => {
+    await openFixture(page);
+    await register(page, SHARED_TAG, true);
+    await mountNow(page, SHARED_TAG, 1);
+
+    await page.evaluate(name => {
+      window.__removeLinkCards?.(name);
+      window.__mountLinkCards?.(name, 3);
+    }, SHARED_TAG);
+    await expect.poll(() => inspect(page, SHARED_TAG)).toMatchObject({
+      activeLinks: 0,
+      adopted: 3,
+      cards: 3,
+      colors: [SHARED_COLOR],
+      distinctSheets: 1,
+      guards: 0,
+      hidden: 0,
+    });
+  });
+
+  test('releases a removed first root when no later root needs its stylesheet', async ({
+    page,
+  }) => {
+    await openFixture(page);
+    await register(page, SHARED_TAG, true);
+    // The lone first root's loaded link becomes the Document's promotion source.
+    await expect(mountNow(page, SHARED_TAG, 1)).resolves.toMatchObject({
+      activeLinks: 1,
+      adopted: 0,
+      cards: 1,
+    });
+
+    // The Document-lifetime record must not keep that link, and with it the
+    // removed root and host, reachable.
+    await page.evaluate(name => {
+      const card = document.querySelector(name);
+      if (!card) throw new Error(`Missing <${name}>`);
+      window.__removedLinkCard = new WeakRef(card);
+      window.__removeLinkCards?.(name);
+    }, SHARED_TAG);
+    const cdp = await page.context().newCDPSession(page);
+    await expect.poll(async () => {
+      await cdp.send('HeapProfiler.collectGarbage');
+      return page.evaluate(() => window.__removedLinkCard?.deref() === undefined);
+    }).toBe(true);
+  });
+
+  test('shares one sheet among guarded cold mounts once they load', async ({ page }) => {
+    let releaseStylesheet!: () => void;
+    let stylesheetRequested!: () => void;
+    const stylesheetGate = new Promise<void>(resolve => {
+      releaseStylesheet = resolve;
+    });
+    const requestSeen = new Promise<void>(resolve => {
+      stylesheetRequested = resolve;
+    });
+    await page.route('**/component-link-sharing/cold.css', async route => {
+      stylesheetRequested();
+      await stylesheetGate;
+      await route.continue();
+    });
+    await openFixture(page);
+    await register(page, 'test-cold-link-card', false);
+
+    await mountNow(page, 'test-cold-link-card', 5);
+    await requestSeen;
+    await expect(page.evaluate(async name => {
+      await new Promise<void>(resolve =>
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+      );
+      return window.__inspectLinkCards?.(name);
+    }, 'test-cold-link-card')).resolves.toMatchObject({
+      activeLinks: 5,
+      adopted: 0,
+      guards: 5,
+      hidden: 5,
+    });
+
+    // Every root waits for its own native link. Only roots still hidden by
+    // their guard switch to the shared sheet; the first root stays native.
+    releaseStylesheet();
+    await expect.poll(() => inspect(page, 'test-cold-link-card')).toEqual({
+      activeLinks: 1,
+      adopted: 4,
+      cards: 5,
+      colors: ['rgb(44, 55, 66)'],
+      distinctSheets: 1,
+      guards: 0,
+      hidden: 0,
+      links: 5,
+      sameSheetAsFirstBatch: true,
+    });
+  });
+
+  test('keeps native links when the stylesheet cannot be promoted', async ({ page }) => {
+    await openFixture(page);
+    await register(page, 'test-import-link-card', true);
+
+    // Later links for the same URL may load after this task, so each root is
+    // guarded until its own native link is ready, then stays native.
+    const native = {
+      adopted: 0,
+      colors: ['rgb(77, 88, 99)'],
+      distinctSheets: 0,
+      guards: 0,
+      hidden: 0,
+    };
+    await mountNow(page, 'test-import-link-card', 3);
+    await expect.poll(() => inspect(page, 'test-import-link-card')).toMatchObject({
+      ...native,
+      activeLinks: 3,
+      links: 3,
+    });
+    await mountNow(page, 'test-import-link-card', 2);
+    await expect.poll(() => inspect(page, 'test-import-link-card')).toMatchObject({
+      ...native,
+      activeLinks: 5,
+      links: 5,
+    });
+    await expect.poll(() => page.evaluate(() => {
+      const card = document.querySelector('test-import-link-card');
+      const label = card?.shadowRoot?.querySelector('.label');
+      return label ? getComputedStyle(label).fontStyle : null;
+    })).toBe('italic');
+  });
+
+  test('promotes eagerly for components with their own template styles', async ({
+    page,
+  }) => {
+    await openFixture(page);
+    await register(page, 'test-styled-link-card', true);
+
+    // The adopted catalog sheet cascades after the template's <style>, so the
+    // first instance adopts it too and every instance keeps the same order.
+    await mountNow(page, 'test-styled-link-card', 3);
+    await expect.poll(() => inspect(page, 'test-styled-link-card')).toEqual({
+      activeLinks: 0,
+      adopted: 3,
+      cards: 3,
+      colors: ['rgb(101, 102, 103)'],
+      distinctSheets: 1,
+      guards: 0,
+      hidden: 0,
+      links: 1,
+      sameSheetAsFirstBatch: true,
+    });
+  });
+});
diff --git a/packages/webui-framework/tests/fixtures/component-link-sharing/element.ts b/packages/webui-framework/tests/fixtures/component-link-sharing/element.ts
new file mode 100644
index 000000000..8561f78ca
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/component-link-sharing/element.ts
@@ -0,0 +1,132 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import {
+  registerComponentStyles,
+  registerTemplateData,
+  WebUIElement,
+  type ComponentStyles,
+} from '../../../src/index.js';
+
+const STYLESHEETS: Record<string, string> = {
+  'test-shared-link-card': '/component-link-sharing/shared.css',
+  'test-cold-link-card': '/component-link-sharing/cold.css',
+  'test-import-link-card': '/component-link-sharing/import.css',
+  'test-styled-link-card': '/component-link-sharing/styled.css',
+};
+
+interface LinkCardReport {
+  readonly activeLinks: number;
+  readonly adopted: number;
+  readonly cards: number;
+  readonly colors: string[];
+  readonly distinctSheets: number;
+  readonly guards: number;
+  readonly hidden: number;
+  readonly links: number;
+  readonly sameSheetAsFirstBatch: boolean;
+}
+
+declare global {
+  interface Window {
+    __inspectLinkCards?: (tag: string) => LinkCardReport;
+    __mountLinkCards?: (tag: string, count: number) => void;
+    __registerLinkCards?: (tag: string, prepare: boolean) => Promise<void> | undefined;
+    __removeLinkCards?: (tag: string) => void;
+    __removedLinkCard?: WeakRef<Element>;
+  }
+}
+
+class TestSharedLinkCard extends WebUIElement {}
+class TestColdLinkCard extends WebUIElement {}
+class TestImportLinkCard extends WebUIElement {}
+class TestStyledLinkCard extends WebUIElement {}
+
+registerTemplateData({
+  'test-shared-link-card': { h: '<p class="label">Shared</p>', sd: 1 },
+  'test-cold-link-card': { h: '<p class="label">Cold</p>', sd: 1 },
+  'test-import-link-card': { h: '<p class="label">Import</p>', sd: 1 },
+  'test-styled-link-card': {
+    h: '<style>.label { font-weight: 700; }</style><p class="label">Styled</p>',
+    sd: 1,
+  },
+});
+TestSharedLinkCard.define('test-shared-link-card');
+TestColdLinkCard.define('test-cold-link-card');
+TestImportLinkCard.define('test-import-link-card');
+TestStyledLinkCard.define('test-styled-link-card');
+
+function linkCatalog(tag: string): ComponentStyles {
+  return {
+    version: 1,
+    strategy: 'link',
+    resources: { [tag]: { kind: 'link', href: STYLESHEETS[tag] } },
+    closures: { [tag]: [tag] },
+  };
+}
+
+const firstSheets = new Map<string, CSSStyleSheet>();
+
+window.__registerLinkCards = (tag, prepare) => {
+  // The router and component assets register through this hook, which also
+  // warms the stylesheet. Plain registration models a cold client mount.
+  if (prepare) return window.__webuiRegisterComponentStyles?.(linkCatalog(tag));
+  registerComponentStyles(linkCatalog(tag));
+  return undefined;
+};
+
+window.__mountLinkCards = (tag, count) => {
+  const container = document.getElementById('cards');
+  if (!container) throw new Error('Missing #cards container');
+  const fragment = document.createDocumentFragment();
+  for (let i = 0; i < count; i++) fragment.append(document.createElement(tag));
+  container.append(fragment);
+};
+
+window.__removeLinkCards = (tag) => {
+  for (const card of document.querySelectorAll(tag)) card.remove();
+};
+
+window.__inspectLinkCards = (tag) => {
+  const sheets = new Set<CSSStyleSheet>();
+  const colors = new Set<string>();
+  let activeLinks = 0;
+  let adopted = 0;
+  let guards = 0;
+  let hidden = 0;
+  let links = 0;
+  let sameSheetAsFirstBatch = true;
+  const cards = document.querySelectorAll(tag);
+  for (const card of cards) {
+    const root = card.shadowRoot;
+    if (!root) throw new Error(`Missing shadow root for <${tag}>`);
+    for (const link of root.querySelectorAll('link')) {
+      links += 1;
+      if (!link.disabled) activeLinks += 1;
+    }
+    for (const style of root.querySelectorAll('style')) {
+      if (style.textContent?.includes(':host')) guards += 1;
+    }
+    adopted += root.adoptedStyleSheets.length;
+    for (const sheet of root.adoptedStyleSheets) {
+      sheets.add(sheet);
+      const first = firstSheets.get(tag);
+      if (!first) firstSheets.set(tag, sheet);
+      else if (first !== sheet) sameSheetAsFirstBatch = false;
+    }
+    if (!card.checkVisibility({ visibilityProperty: true })) hidden += 1;
+    const label = root.querySelector('.label');
+    colors.add(label ? getComputedStyle(label).color : 'missing');
+  }
+  return {
+    activeLinks,
+    adopted,
+    cards: cards.length,
+    colors: [...colors],
+    distinctSheets: sheets.size,
+    guards,
+    hidden,
+    links,
+    sameSheetAsFirstBatch,
+  };
+};
diff --git a/packages/webui-framework/tests/fixtures/component-link-sharing/fixture.html b/packages/webui-framework/tests/fixtures/component-link-sharing/fixture.html
new file mode 100644
index 000000000..5dbd96916
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/component-link-sharing/fixture.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Component Link Sharing Fixture</title>
+</head>
+<body>
+  <main id="cards"></main>
+  <script src="/dist/component-link-sharing/element.js"></script>
+</body>
+</html>
diff --git a/packages/webui-framework/tests/fixtures/component-link-sharing/import-base.css b/packages/webui-framework/tests/fixtures/component-link-sharing/import-base.css
new file mode 100644
index 000000000..70b7d478c
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/component-link-sharing/import-base.css
@@ -0,0 +1 @@
+.label { font-style: italic; }
\ No newline at end of file
diff --git a/packages/webui-framework/tests/fixtures/component-link-sharing/import.css b/packages/webui-framework/tests/fixtures/component-link-sharing/import.css
new file mode 100644
index 000000000..03bdd8a2c
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/component-link-sharing/import.css
@@ -0,0 +1,2 @@
+@import url("import-base.css");
+.label { color: rgb(77, 88, 99); }
diff --git a/packages/webui-framework/tests/fixtures/component-link-sharing/shared.css b/packages/webui-framework/tests/fixtures/component-link-sharing/shared.css
new file mode 100644
index 000000000..8c290f9da
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/component-link-sharing/shared.css
@@ -0,0 +1 @@
+.label { color: rgb(11, 22, 33); }
\ No newline at end of file
diff --git a/packages/webui-framework/tests/fixtures/component-link-sharing/styled.css b/packages/webui-framework/tests/fixtures/component-link-sharing/styled.css
new file mode 100644
index 000000000..6160f2ece
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/component-link-sharing/styled.css
@@ -0,0 +1 @@
+.label { color: rgb(101, 102, 103); }
\ No newline at end of file
diff --git a/specs/hydration.md b/specs/hydration.md
index 250d048eb..ffa1ca65b 100644
--- a/specs/hydration.md
+++ b/specs/hydration.md
@@ -528,6 +528,18 @@ required `componentStyles` catalog. Module resources carry their CSS directly;
 the catalog installs each specifier's import map once per owning Document
 before importing it, then reuses the cached parsed sheet for every target.
 
+Client Shadow roots share Link resources per owning Document and resolved URL.
+The first newly attached root to mount a stylesheet keeps its native link and
+records whether that load is authorized: unredirected, not served by a service
+worker, and successful. The next root promotes the authorized CSSOM of a loaded
+link once into a constructable sheet, and every later root adopts it before its
+template is appended. A root switches only while hidden by its loading guard,
+never after it is visible. Roots whose cascade includes other author styles (a
+template's own `<style>` or `<link>`, server-rendered or reused roots, and
+Light descendants installing into a containing root) promote on first use
+instead, so all instances of a component adopt the same sheet. A failed
+authorization is remembered for the Document's response.
+
 ---
 
 ## Light DOM vs Shadow DOM