From e166bb8cd03c92cf137ffcdd46be429704b53083 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Mon, 10 Aug 2026 23:02:34 +0200
Subject: [PATCH 1/2] Preserve client-injected styles via
 data-wp-router-managed

---
 .../e2e-tests/plugins/interactive-blocks.php  |   7 +
 .../router-styles-managed/block.json          |  16 +
 .../router-styles-managed/render.php          | 111 +++++
 .../router-managed-styles.php                 |  88 ++++
 .../router-styles-managed/style-from-link.css |   3 +
 .../router-styles-managed/style-injected.css  |   8 +
 .../router-styles-managed/style.css           |   3 +
 .../router-styles-managed/view.asset.php      |   9 +
 .../router-styles-managed/view.js             |  24 +
 packages/interactivity-router/CHANGELOG.md    |   3 +
 .../interactivity-router/src/assets/styles.ts | 157 ++++++-
 .../src/assets/test/styles.test.ts            | 410 ++++++++++++++++++
 packages/interactivity-router/src/index.ts    |  18 +-
 .../router-styles-managed.spec.ts             | 326 ++++++++++++++
 14 files changed, 1173 insertions(+), 10 deletions(-)
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/block.json
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/render.php
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/router-managed-styles.php
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style-from-link.css
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style-injected.css
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style.css
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/view.asset.php
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/view.js
 create mode 100644 test/e2e/specs/interactivity/router-styles-managed.spec.ts

diff --git a/packages/e2e-tests/plugins/interactive-blocks.php b/packages/e2e-tests/plugins/interactive-blocks.php
index fe40ae10d4c05e..f9a089a78e0dfc 100644
--- a/packages/e2e-tests/plugins/interactive-blocks.php
+++ b/packages/e2e-tests/plugins/interactive-blocks.php
@@ -7,6 +7,13 @@
  * @package gutenberg-test-interactive-blocks
  */
 
+/*
+ * Simulates the WordPress core feature that marks the style assets managed by
+ * the Interactivity API router, which is not available in the WordPress
+ * version bundled with `wp-env`.
+ */
+require_once __DIR__ . '/interactive-blocks/router-styles-managed/router-managed-styles.php';
+
 add_action(
 	'init',
 	function () {
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/block.json
new file mode 100644
index 00000000000000..bd7a3eee44b060
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/block.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "test/router-styles-managed",
+	"title": "E2E Interactivity tests - router styles - Managed wrapper",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/render.php
new file mode 100644
index 00000000000000..81d81ae99de290
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/render.php
@@ -0,0 +1,111 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management when the server marks
+ * its style assets with the `data-wp-router-managed` attribute.
+ *
+ * The marking is done in `router-managed-styles.php`, which simulates the
+ * WordPress core feature that is not available in the WordPress version
+ * bundled with `wp-env`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'managed-wrapper-styles-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+
+		$custom_css = '
+			.managed-from-inline {
+				color: rgb(128, 0, 128);
+			}
+		';
+
+		wp_register_style( 'test-router-styles-managed', false );
+		wp_enqueue_style( 'test-router-styles-managed' );
+		wp_add_inline_style( 'test-router-styles-managed', $custom_css );
+	}
+);
+
+$links              = isset( $attributes['links'] ) ? $attributes['links'] : array();
+$injected_style_url = plugin_dir_url( __FILE__ ) . 'style-injected.css';
+$wrapper_attributes = get_block_wrapper_attributes();
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<!-- These get colored when the corresponding inner block is present. -->
+	<fieldset>
+		<legend>Styles from inner block styles</legend>
+		<p data-testid="red" class="red">Red</p>
+		<p data-testid="green" class="green">Green</p>
+		<p data-testid="blue" class="blue">Blue</p>
+	</fieldset>
+
+	<!-- These are colored by the style assets of this very block, present in every page containing it. -->
+	<fieldset>
+		<legend>Styles from this block's own assets</legend>
+		<p data-testid="managed-from-link" class="managed-from-link">Managed from link</p>
+		<p data-testid="managed-from-inline" class="managed-from-inline">Managed from inline</p>
+	</fieldset>
+
+	<!-- These are only colored by style assets injected by the client. -->
+	<fieldset>
+		<legend>Targets for client-injected styles</legend>
+		<p data-testid="injected" class="injected-target">Injected</p>
+		<p data-testid="injected-from-link" class="injected-from-link-target">Injected from link</p>
+	</fieldset>
+
+	<!-- URL of a style sheet the server never enqueues, so tests can inject it from the client. -->
+	<div
+		data-testid="injected-style-sheet"
+		data-url="<?php echo esc_url( $injected_style_url ); ?>"
+		hidden
+	></div>
+
+	<!-- Links to pages with different blocks combination. -->
+	<nav data-wp-interactive="test/router-styles-managed">
+		<?php foreach ( $links as $label => $link ) : ?>
+			<a
+				data-testid="link <?php echo $label; ?>"
+				data-wp-on--click="actions.navigate"
+				href="<?php echo $link; ?>"
+			>
+				<?php echo $label; ?>
+			</a>
+		<?php endforeach; ?>
+	</nav>
+
+	<!-- HTML updated on navigation. -->
+	<div
+		data-wp-interactive="test/router-styles-managed"
+		data-wp-router-region="router-styles"
+	>
+		<?php echo $content; ?>
+	</div>
+
+	<!-- Flag to check whether hydration has occurred. -->
+	<div
+		data-testid="hydrated"
+		data-wp-interactive="test/router-styles-managed"
+		data-wp-bind--hidden="!state.hydrated"
+		data-wp-init="callbacks.setHydrated"
+		hidden
+	>
+		Hydrated
+	</div>
+
+	<!-- Text to check whether a navigation was client-side. -->
+	<div
+		data-testid="client-side navigation"
+		data-wp-interactive="test/router-styles-managed"
+		data-wp-bind--hidden="!state.clientSideNavigation"
+		hidden
+	>
+		Client-side navigation
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/router-managed-styles.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/router-managed-styles.php
new file mode 100644
index 00000000000000..c14b8d6fd3b66f
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/router-managed-styles.php
@@ -0,0 +1,88 @@
+<?php
+/**
+ * Simulates the server-side marking of style assets managed by the
+ * Interactivity API router.
+ *
+ * WordPress core marks every `<style>` and `<link rel="stylesheet">` element
+ * it renders with an empty `data-wp-router-managed` attribute, so the router
+ * can tell them apart from the style assets injected at runtime by scripts
+ * unaware of it. That feature is not available in the WordPress version
+ * bundled with `wp-env`, so this file reproduces it with an output buffer for
+ * those pages containing the `test/router-styles-managed` block.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+/**
+ * Adds the `data-wp-router-managed` attribute to every style asset in the
+ * passed HTML.
+ *
+ * Style elements inside `<noscript>` are skipped, as they are not rendered by
+ * the server-side implementation either.
+ *
+ * @param string $html Full HTML of the page.
+ * @return string HTML with all the style assets marked.
+ */
+function gutenberg_test_mark_router_managed_styles( $html ) {
+	if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
+		return $html;
+	}
+
+	$processor   = new WP_HTML_Tag_Processor( $html );
+	$in_noscript = false;
+
+	while ( $processor->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
+		$tag = $processor->get_tag();
+
+		if ( 'NOSCRIPT' === $tag ) {
+			$in_noscript = ! $processor->is_tag_closer();
+			continue;
+		}
+
+		if ( $in_noscript || $processor->is_tag_closer() ) {
+			continue;
+		}
+
+		if ( 'STYLE' === $tag ) {
+			$processor->set_attribute( 'data-wp-router-managed', true );
+		} elseif ( 'LINK' === $tag ) {
+			$rel = $processor->get_attribute( 'rel' );
+			if (
+				is_string( $rel ) &&
+				in_array(
+					'stylesheet',
+					preg_split( '/\s+/', strtolower( trim( $rel ) ) ),
+					true
+				)
+			) {
+				$processor->set_attribute( 'data-wp-router-managed', true );
+			}
+		}
+	}
+
+	return $processor->get_updated_html();
+}
+
+add_action(
+	'template_redirect',
+	function () {
+		if ( ! is_singular() ) {
+			return;
+		}
+
+		$post = get_post();
+
+		if (
+			! $post instanceof WP_Post ||
+			! has_block( 'test/router-styles-managed', $post )
+		) {
+			return;
+		}
+
+		/*
+		 * The buffer is not explicitly ended. PHP flushes it at the end of the
+		 * request, calling the passed callback with the full page HTML.
+		 */
+		ob_start( 'gutenberg_test_mark_router_managed_styles' );
+	}
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style-from-link.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style-from-link.css
new file mode 100644
index 00000000000000..7af49e71dcb39a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style-from-link.css
@@ -0,0 +1,3 @@
+.managed-from-link {
+	color: rgb(0, 128, 128);
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style-injected.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style-injected.css
new file mode 100644
index 00000000000000..4940559fc778d9
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style-injected.css
@@ -0,0 +1,8 @@
+/*
+ * This style sheet is never enqueued by the server. It is only meant to be
+ * injected by the client during the tests, to simulate a script that adds
+ * style assets the router doesn't know about.
+ */
+.injected-from-link-target {
+	color: rgb(0, 100, 200);
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style.css
new file mode 100644
index 00000000000000..a288062beaea71
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/style.css
@@ -0,0 +1,3 @@
+.wp-block-test-router-styles-managed {
+	color: rgb(160, 12, 60);
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/view.js
new file mode 100644
index 00000000000000..0db1545237dd48
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-managed/view.js
@@ -0,0 +1,24 @@
+import { store, withSyncEvent } from '@wordpress/interactivity';
+
+const { state } = store( 'test/router-styles-managed', {
+	state: {
+		clientSideNavigation: false,
+		hydrated: false,
+	},
+	actions: {
+		navigate: withSyncEvent( function* ( e ) {
+			e.preventDefault();
+			state.clientSideNavigation = false;
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+			state.clientSideNavigation = true;
+		} ),
+	},
+	callbacks: {
+		setHydrated() {
+			state.hydrated = true;
+		},
+	},
+} );
diff --git a/packages/interactivity-router/CHANGELOG.md b/packages/interactivity-router/CHANGELOG.md
index 0bd14e2107d801..b68d3d2f2ce1e3 100644
--- a/packages/interactivity-router/CHANGELOG.md
+++ b/packages/interactivity-router/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Preserve style assets injected by client scripts during client-side navigation on pages marked with the `data-wp-router-managed` attribute. ([#76031](https://github.com/WordPress/gutenberg/discussions/76031))
 
 ## 2.52.0 (2026-07-29)
 
diff --git a/packages/interactivity-router/src/assets/styles.ts b/packages/interactivity-router/src/assets/styles.ts
index 169aade722843c..5f13be57f849bd 100644
--- a/packages/interactivity-router/src/assets/styles.ts
+++ b/packages/interactivity-router/src/assets/styles.ts
@@ -2,6 +2,84 @@ import { shortestCommonSupersequence } from './scs';
 
 export type StyleElement = HTMLLinkElement | HTMLStyleElement;
 
+/**
+ * Attribute added by the server to every `<style>` and
+ * `<link rel="stylesheet">` element it renders on pages where client-side
+ * navigation is enabled.
+ */
+const ROUTER_MANAGED_ATTRIBUTE = 'data-wp-router-managed';
+
+/**
+ * Whether the initial document marked its style assets with the
+ * {@link ROUTER_MANAGED_ATTRIBUTE|router-managed attribute}.
+ *
+ * See {@link initRouterManagedMode|`initRouterManagedMode`}.
+ */
+let routerManagedMode = false;
+
+/**
+ * Style elements the router considers server-rendered and, therefore, subject
+ * to being enabled or disabled depending on the page being rendered.
+ *
+ * In managed mode, elements not included here are client-owned — e.g.,
+ * injected at runtime by scripts unaware of the router — and are never
+ * disabled nor enabled by the router.
+ */
+const serverManagedStyles = new WeakSet< StyleElement >();
+
+/**
+ * Style elements disabled by the router itself in
+ * {@link applyStyles|`applyStyles`}.
+ *
+ * Used to distinguish them from elements disabled by client scripts, which
+ * must keep their state: the router only re-enables what it disabled.
+ */
+const routerDisabledStyles = new WeakSet< StyleElement >();
+
+/**
+ * Detects whether the router should honor the
+ * {@link ROUTER_MANAGED_ATTRIBUTE|router-managed attribute}, initializes the
+ * mode accordingly, and classifies the marked elements of the initial
+ * document as server-managed.
+ *
+ * Detection is based on the initial live document only and is decided once,
+ * at router initialization. A document containing at least one marked style
+ * asset is in "managed mode": from then on, style elements present in the
+ * live document without the marker are considered client-owned and are left
+ * untouched across navigations. Documents without any marker keep the
+ * previous behavior, where every style element in the DOM is managed by the
+ * router.
+ *
+ * The marked elements are claimed here, eagerly, rather than waiting for the
+ * initial page to be prepared. Preparing that page is asynchronous — it
+ * awaits hydration — while a navigation can be triggered synchronously, so
+ * {@link applyStyles|`applyStyles`} may run first. Elements exclusive to the
+ * initial page are never passed to
+ * {@link prepareStylePromise|`prepareStylePromise`} by
+ * {@link updateStylesWithSCS|`updateStylesWithSCS`}, so without this eager
+ * pass they would stay enabled on the destination page.
+ *
+ * The mode never flips afterwards, even on mixed navigations:
+ *
+ * - Marked initial page → managed mode for the whole session, even when
+ *   navigating to unmarked pages. Knowing which live elements were injected
+ *   by client scripts does not expire, and styles coming from unmarked
+ *   fetched pages are server-rendered by definition, so they still become
+ *   server-managed.
+ * - Unmarked initial page → previous behavior forever, even when a fetched
+ *   page is marked. Elements already swept into management cannot be
+ *   reclassified safely: demoting the initial page's (unmarked) server
+ *   styles would leave them enabled and stale on every future page. Behaving
+ *   like before is the safe failure direction.
+ */
+export const initRouterManagedMode = () => {
+	const marked = window.document.querySelectorAll< StyleElement >(
+		`style[${ ROUTER_MANAGED_ATTRIBUTE }],link[rel=stylesheet][${ ROUTER_MANAGED_ATTRIBUTE }]`
+	);
+	routerManagedMode = marked.length > 0;
+	marked.forEach( ( el ) => serverManagedStyles.add( el ) );
+};
+
 /**
  * Compares the passed style or link elements to check if they can be
  * considered equal.
@@ -18,6 +96,20 @@ const areNodesEqual = ( a: StyleElement, b: StyleElement ): boolean =>
  * made by {@link prepareStylePromise|`prepareStylePromise`} to the
  * `data-original-media` and `media`.
  *
+ * It also removes the
+ * {@link ROUTER_MANAGED_ATTRIBUTE|router-managed attribute}, so an element
+ * rendered by a server that marks its style assets and an otherwise
+ * identical one rendered by a server that doesn't are still considered
+ * equal. Otherwise, navigating between marked and unmarked pages would
+ * insert a duplicate of every shared style element.
+ *
+ * As a consequence, a client-injected element that happens to be identical
+ * to a marked style of a fetched page is matched and reused instead of
+ * duplicated, so that page's style list can contain a client-owned element
+ * the router will never enable nor disable. This is an accepted trade-off:
+ * the alternative duplicates every shared style element on mixed
+ * navigations.
+ *
  * @example
  * The following elements should be normalized to the same element:
  * ```html
@@ -25,6 +117,7 @@ const areNodesEqual = ( a: StyleElement, b: StyleElement ): boolean =>
  * <link rel="stylesheet" src="./assets/styles.css" media="all">
  * <link rel="stylesheet" src="./assets/styles.css" media="preload">
  * <link rel="stylesheet" src="./assets/styles.css" media="preload" data-original-media="all">
+ * <link rel="stylesheet" src="./assets/styles.css" data-wp-router-managed>
  * ```
  *
  * @param element `<style>` or `<link>` element.
@@ -41,6 +134,9 @@ export const normalizeMedia = ( element: StyleElement ): StyleElement => {
 	} else if ( ! element.media ) {
 		element.media = 'all';
 	}
+
+	element.removeAttribute( ROUTER_MANAGED_ATTRIBUTE );
+
 	return element;
 };
 
@@ -151,6 +247,21 @@ const stylePromiseCache = new WeakMap<
 const prepareStylePromise = (
 	element: StyleElement
 ): Promise< StyleElement > => {
+	// In managed mode, an element already present in the live document that
+	// lacks the marker attribute was injected by a client script, so it is
+	// never owned by the router. Elements coming from fetched documents are
+	// not in the live document yet, so they are server-rendered by
+	// definition. Ownership is sticky: once server-managed, always
+	// server-managed, which is what keeps elements from unmarked fetched
+	// pages managed after they are inserted into the DOM.
+	if (
+		! routerManagedMode ||
+		element.hasAttribute( ROUTER_MANAGED_ATTRIBUTE ) ||
+		! window.document.contains( element )
+	) {
+		serverManagedStyles.add( element );
+	}
+
 	if ( stylePromiseCache.has( element ) ) {
 		return stylePromiseCache.get( element );
 	}
@@ -231,23 +342,51 @@ export const preloadStyles = ( doc: Document ): Promise< StyleElement >[] => {
  * If the style element has the `data-original-media` attribute, the
  * original `media` value is restored.
  *
+ * In managed mode, client-owned elements — e.g., injected at runtime by
+ * scripts unaware of the router, like consent managers or theme switchers —
+ * are left untouched, so their styles keep applying across client-side
+ * navigations. The router also only re-enables elements it disabled itself,
+ * so a stylesheet a client script disabled before the router claimed it
+ * keeps its state. Note this does not hold once the router has claimed an
+ * element: a client disabling a stylesheet the router had already disabled
+ * is indistinguishable from the router's own change, and the element is
+ * re-enabled when its page is rendered again. When the initial page didn't
+ * mark its style assets, every style element in the DOM is managed, just
+ * like in previous versions. See
+ * {@link initRouterManagedMode|`initRouterManagedMode`}.
+ *
  * @param styles List of style elements to apply.
  */
 export const applyStyles = ( styles: StyleElement[] ) => {
 	window.document
 		.querySelectorAll( 'style,link[rel=stylesheet]' )
 		.forEach( ( el: HTMLLinkElement | HTMLStyleElement ) => {
-			if ( el.sheet ) {
-				if ( styles.includes( el ) ) {
-					// Only update mediaText when necessary.
-					if ( el.sheet.media.mediaText === 'preload' ) {
-						const { originalMedia = 'all' } = el.dataset;
-						el.sheet.media.mediaText = originalMedia;
-					}
+			if ( ! el.sheet ) {
+				return;
+			}
+			if ( styles.includes( el ) ) {
+				// Only update mediaText when necessary.
+				if ( el.sheet.media.mediaText === 'preload' ) {
+					const { originalMedia = 'all' } = el.dataset;
+					el.sheet.media.mediaText = originalMedia;
+				}
+				// In managed mode, only re-enable elements the router itself
+				// disabled, so a stylesheet a client script disabled before
+				// the router claimed it keeps its state.
+				if ( ! routerManagedMode || routerDisabledStyles.has( el ) ) {
 					el.sheet.disabled = false;
-				} else {
-					el.sheet.disabled = true;
 				}
+				routerDisabledStyles.delete( el );
+			} else if ( ! routerManagedMode ) {
+				// Without markers, keep the previous behavior: disable
+				// everything that is not in the list.
+				el.sheet.disabled = true;
+			} else if ( serverManagedStyles.has( el ) && ! el.sheet.disabled ) {
+				// Only claim elements that are currently enabled, so an
+				// element disabled by a client script is not later
+				// re-enabled by the router.
+				el.sheet.disabled = true;
+				routerDisabledStyles.add( el );
 			}
 		} );
 };
diff --git a/packages/interactivity-router/src/assets/test/styles.test.ts b/packages/interactivity-router/src/assets/test/styles.test.ts
index 60d42330c25552..14266b6b4f74fc 100644
--- a/packages/interactivity-router/src/assets/test/styles.test.ts
+++ b/packages/interactivity-router/src/assets/test/styles.test.ts
@@ -3,9 +3,56 @@ import {
 	updateStylesWithSCS,
 	preloadStyles,
 	applyStyles,
+	initRouterManagedMode,
 	type StyleElement,
 } from '../styles';
 
+/**
+ * Attribute added by the server to the style assets it renders on pages where
+ * client-side navigation is enabled.
+ */
+const ROUTER_MANAGED_ATTRIBUTE = 'data-wp-router-managed';
+
+/**
+ * Adds the router-managed attribute to the passed element, emulating a style
+ * asset rendered by a server that marks them.
+ *
+ * @param element Style or Link element.
+ * @return The same element.
+ */
+const markManaged = < T extends StyleElement >( element: T ): T => {
+	element.setAttribute( ROUTER_MANAGED_ATTRIBUTE, '' );
+	return element;
+};
+
+/**
+ * Marks the passed elements as server-managed by matching them against
+ * equivalent clones, mirroring what happens when a page is prepared.
+ *
+ * @param elements Style or Link elements. They must be in the DOM.
+ */
+const markAsServerManaged = ( elements: StyleElement[] ) => {
+	updateStylesWithSCS(
+		elements,
+		elements.map( ( el ) => el.cloneNode( true ) as StyleElement )
+	);
+};
+
+/**
+ * Creates a Document instance containing copies of the passed style elements,
+ * emulating the HTML fetched for another page.
+ *
+ * @param elements Style or Link elements to copy into the document head.
+ * @return A Document instance.
+ */
+const createFetchedDocument = ( elements: StyleElement[] ): Document => {
+	const doc = document.implementation.createHTMLDocument();
+	elements.forEach( ( el ) =>
+		doc.head.appendChild( doc.importNode( el, true ) )
+	);
+	return doc;
+};
+
 /**
  * Mocks the `sheet` property for the
  * passed HTMLStyleElement or HTMLLinkElement instance.
@@ -67,6 +114,10 @@ describe( 'Router styles management', () => {
 
 	beforeEach( () => {
 		document.head.replaceChildren();
+		// The document is empty at this point, so the router-managed mode is
+		// reset to `false` — i.e., the behavior of servers that don't mark
+		// their style assets.
+		initRouterManagedMode();
 	} );
 
 	afterAll( () => {
@@ -645,6 +696,346 @@ describe( 'Router styles management', () => {
 		} );
 	} );
 
+	// Tests for the `data-wp-router-managed` attribute handling.
+	describe( 'router-managed styles', () => {
+		describe( 'mode detection', () => {
+			it( 'should preserve unmarked elements when the initial document marks its style assets', () => {
+				const server = markManaged( createStyleElement( 'server' ) );
+				const client = createStyleElement( 'client' );
+				document.head.append( server, client );
+
+				// The document contains marked style assets, so the router
+				// enters the managed mode.
+				initRouterManagedMode();
+
+				markAsServerManaged( [ server ] );
+
+				mockSheet( server, { disabled: false, mediaText: 'all' } );
+				mockSheet( client, { disabled: false, mediaText: 'all' } );
+
+				// Render a page that contains none of these styles.
+				applyStyles( [] );
+
+				// Only the server-rendered element is disabled. The one
+				// injected by a client script is left untouched.
+				expect( server.sheet!.disabled ).toBe( true );
+				expect( client.sheet!.disabled ).toBe( false );
+			} );
+
+			it( 'should disable every element when the initial document does not mark its style assets', () => {
+				const server = createStyleElement( 'server' );
+				const client = createStyleElement( 'client' );
+				document.head.append( server, client );
+
+				// No marked style assets, so the router keeps the previous
+				// behavior.
+				initRouterManagedMode();
+
+				markAsServerManaged( [ server ] );
+
+				mockSheet( server, { disabled: false, mediaText: 'all' } );
+				mockSheet( client, { disabled: false, mediaText: 'all' } );
+
+				applyStyles( [] );
+
+				// Without markers, the router cannot tell them apart, so
+				// everything not included in the page is disabled.
+				expect( server.sheet!.disabled ).toBe( true );
+				expect( client.sheet!.disabled ).toBe( true );
+			} );
+
+			it( 'should claim marked elements without waiting for the initial page to be prepared', () => {
+				const server = markManaged( createStyleElement( 'server' ) );
+				document.head.appendChild( server );
+
+				// Only the initialization runs. The initial page is prepared
+				// asynchronously, after hydration, so a navigation may apply
+				// styles before that happens — or hydration may never
+				// complete. The element must be managed regardless.
+				initRouterManagedMode();
+
+				mockSheet( server, { disabled: false, mediaText: 'all' } );
+
+				applyStyles( [] );
+
+				expect( server.sheet!.disabled ).toBe( true );
+			} );
+
+			it( 'should ignore marked elements that are not style assets when detecting the mode', () => {
+				// A preload link is not a style asset, so it must not put the
+				// router in managed mode on its own.
+				const preload = document.createElement( 'link' );
+				preload.rel = 'preload';
+				preload.setAttribute( 'as', 'style' );
+				markManaged( preload );
+				const client = createStyleElement( 'client' );
+				document.head.append( preload, client );
+
+				initRouterManagedMode();
+
+				mockSheet( client, { disabled: false, mediaText: 'all' } );
+
+				applyStyles( [] );
+
+				// The mode stayed off, so the previous behavior applies and
+				// the unmarked element is disabled.
+				expect( client.sheet!.disabled ).toBe( true );
+			} );
+		} );
+
+		describe( 'server-rendered elements', () => {
+			it( 'should disable and re-enable marked elements across navigations', () => {
+				const styleA = markManaged( createStyleElement( 'styleA' ) );
+				const styleB = markManaged( createStyleElement( 'styleB' ) );
+				document.head.append( styleA, styleB );
+
+				initRouterManagedMode();
+				markAsServerManaged( [ styleA, styleB ] );
+
+				mockSheet( styleA, { disabled: false, mediaText: 'all' } );
+				mockSheet( styleB, { disabled: false, mediaText: 'all' } );
+
+				// Page A.
+				applyStyles( [ styleA ] );
+				expect( styleA.sheet!.disabled ).toBe( false );
+				expect( styleB.sheet!.disabled ).toBe( true );
+
+				// Page B.
+				applyStyles( [ styleB ] );
+				expect( styleA.sheet!.disabled ).toBe( true );
+				expect( styleB.sheet!.disabled ).toBe( false );
+
+				// Back to page A.
+				applyStyles( [ styleA ] );
+				expect( styleA.sheet!.disabled ).toBe( false );
+				expect( styleB.sheet!.disabled ).toBe( true );
+			} );
+
+			it( 'should re-enable elements it disabled itself when their page renders again', () => {
+				const style = markManaged( createStyleElement( 'style' ) );
+				document.head.appendChild( style );
+
+				initRouterManagedMode();
+				markAsServerManaged( [ style ] );
+
+				mockSheet( style, { disabled: false, mediaText: 'all' } );
+
+				// The router disables it because it is not part of the page.
+				applyStyles( [] );
+				expect( style.sheet!.disabled ).toBe( true );
+
+				// It belongs to this page, so the router restores it.
+				applyStyles( [ style ] );
+				expect( style.sheet!.disabled ).toBe( false );
+			} );
+
+			it( 'should not touch marked elements disabled by client scripts', () => {
+				const style = markManaged( createStyleElement( 'variant' ) );
+				document.head.appendChild( style );
+
+				initRouterManagedMode();
+				markAsServerManaged( [ style ] );
+
+				// A client script disabled this server-rendered stylesheet,
+				// e.g., an inactive theme variant.
+				mockSheet( style, { disabled: true, mediaText: 'all' } );
+
+				// The router must not claim it, as it is already disabled.
+				applyStyles( [] );
+				expect( style.sheet!.disabled ).toBe( true );
+
+				// The router did not disable it, so it must not enable it
+				// when the page containing it is rendered again.
+				applyStyles( [ style ] );
+				expect( style.sheet!.disabled ).toBe( true );
+			} );
+		} );
+
+		describe( 'client-injected elements', () => {
+			it( 'should keep enabled client-injected elements enabled across navigations', () => {
+				const server = markManaged( createStyleElement( 'server' ) );
+				document.head.appendChild( server );
+
+				initRouterManagedMode();
+				markAsServerManaged( [ server ] );
+
+				// Injected afterwards by a script unaware of the router.
+				const client = createStyleElement( 'client' );
+				document.head.appendChild( client );
+
+				mockSheet( server, { disabled: false, mediaText: 'all' } );
+				mockSheet( client, { disabled: false, mediaText: 'all' } );
+
+				applyStyles( [] );
+				applyStyles( [ server ] );
+				applyStyles( [] );
+
+				expect( client.sheet!.disabled ).toBe( false );
+			} );
+
+			it( 'should keep disabled client-injected elements disabled, even when included in the applied styles', () => {
+				const server = markManaged( createStyleElement( 'server' ) );
+				document.head.appendChild( server );
+
+				initRouterManagedMode();
+				markAsServerManaged( [ server ] );
+
+				// A client script injected this element already disabled.
+				const client = createStyleElement( 'client' );
+				document.head.appendChild( client );
+
+				mockSheet( server, { disabled: false, mediaText: 'all' } );
+				mockSheet( client, { disabled: true, mediaText: 'all' } );
+
+				applyStyles( [] );
+				expect( client.sheet!.disabled ).toBe( true );
+
+				// Even if the element ends up in a list of applied styles,
+				// the router never enables what it did not disable.
+				applyStyles( [ server, client ] );
+				expect( client.sheet!.disabled ).toBe( true );
+			} );
+		} );
+
+		describe( 'ownership stickiness', () => {
+			it( 'should keep elements prepared outside the document as server-managed', () => {
+				const marker = markManaged( createStyleElement( 'marker' ) );
+				document.head.appendChild( marker );
+				initRouterManagedMode();
+
+				// This element comes from a fetched document, so it lacks the
+				// marker attribute but is server-rendered by definition.
+				const fetched = createStyleElement( 'fetched' );
+				expect( document.contains( fetched ) ).toBe( false );
+
+				updateStylesWithSCS( [], [ fetched ], document.head );
+				expect( document.contains( fetched ) ).toBe( true );
+
+				// A later navigation prepares it again, this time while it is
+				// already in the document and still without the attribute.
+				markAsServerManaged( [ fetched ] );
+
+				mockSheet( fetched, { disabled: false, mediaText: 'all' } );
+
+				applyStyles( [] );
+
+				// Ownership is sticky, so the router still manages it.
+				expect( fetched.sheet!.disabled ).toBe( true );
+			} );
+		} );
+
+		describe( 'mixed navigations', () => {
+			it( 'should keep the managed mode when navigating to an unmarked page', () => {
+				const theme = markManaged( createLinkElement( 'theme' ) );
+				const blocks = markManaged( createStyleElement( 'blocks' ) );
+				const client = createStyleElement( 'client' );
+				document.head.append( theme, blocks, client );
+
+				initRouterManagedMode();
+
+				// Prepare the initial page, like `preparePage()` does.
+				preloadStyles( document );
+
+				// The fetched page is rendered by a server that does not mark
+				// its style assets. Its theme stylesheet is identical to the
+				// one already in the document except for the attribute.
+				const fetchedDoc = createFetchedDocument( [
+					createLinkElement( 'theme' ),
+					createStyleElement( 'extra' ),
+				] );
+				const [ fetchedTheme, fetchedExtra ] = Array.from(
+					fetchedDoc.head.children
+				) as StyleElement[];
+
+				preloadStyles( fetchedDoc );
+
+				// The unmarked theme stylesheet matched the marked one, so no
+				// duplicate was inserted.
+				expect( document.querySelectorAll( '#theme' ) ).toHaveLength(
+					1
+				);
+				expect( document.querySelector( '#theme' ) ).toBe( theme );
+				expect( document.contains( fetchedTheme ) ).toBe( false );
+				expect( document.contains( fetchedExtra ) ).toBe( true );
+
+				mockSheet( theme, { disabled: false, mediaText: 'all' } );
+				mockSheet( blocks, { disabled: false, mediaText: 'all' } );
+				mockSheet( client, { disabled: false, mediaText: 'all' } );
+				mockSheet( fetchedExtra, {
+					disabled: false,
+					mediaText: 'preload',
+				} );
+
+				// Render the fetched page.
+				applyStyles( [ theme, fetchedExtra ] );
+
+				expect( theme.sheet!.disabled ).toBe( false );
+				expect( blocks.sheet!.disabled ).toBe( true );
+				expect( fetchedExtra.sheet!.disabled ).toBe( false );
+				expect( fetchedExtra.sheet!.media.mediaText ).toBe( 'all' );
+				// The client-injected element is never touched.
+				expect( client.sheet!.disabled ).toBe( false );
+
+				// Navigate back to the initial page. The element coming from
+				// the unmarked page is server-managed, so it is disabled, and
+				// the marked one the router disabled is restored.
+				applyStyles( [ theme, blocks ] );
+
+				expect( blocks.sheet!.disabled ).toBe( false );
+				expect( fetchedExtra.sheet!.disabled ).toBe( true );
+				expect( client.sheet!.disabled ).toBe( false );
+			} );
+
+			it( 'should keep the previous behavior when navigating to a marked page', () => {
+				const theme = createLinkElement( 'theme' );
+				const client = createStyleElement( 'client' );
+				document.head.append( theme, client );
+
+				// The initial page has no marked style assets, so the router
+				// never enters the managed mode.
+				initRouterManagedMode();
+
+				preloadStyles( document );
+
+				// The fetched page is rendered by a server that marks its
+				// style assets.
+				const fetchedDoc = createFetchedDocument( [
+					markManaged( createLinkElement( 'theme' ) ),
+					markManaged( createStyleElement( 'extra' ) ),
+				] );
+				const [ fetchedTheme, fetchedExtra ] = Array.from(
+					fetchedDoc.head.children
+				) as StyleElement[];
+
+				preloadStyles( fetchedDoc );
+
+				// The attribute is ignored when comparing elements, so the
+				// existing theme stylesheet is reused.
+				expect( document.querySelectorAll( '#theme' ) ).toHaveLength(
+					1
+				);
+				expect( document.querySelector( '#theme' ) ).toBe( theme );
+				expect( document.contains( fetchedTheme ) ).toBe( false );
+				expect( document.contains( fetchedExtra ) ).toBe( true );
+
+				mockSheet( theme, { disabled: false, mediaText: 'all' } );
+				mockSheet( client, { disabled: false, mediaText: 'all' } );
+				mockSheet( fetchedExtra, {
+					disabled: false,
+					mediaText: 'preload',
+				} );
+
+				applyStyles( [ theme, fetchedExtra ] );
+
+				expect( theme.sheet!.disabled ).toBe( false );
+				expect( fetchedExtra.sheet!.disabled ).toBe( false );
+				// Like in previous versions, elements not included in the
+				// page are disabled.
+				expect( client.sheet!.disabled ).toBe( true );
+			} );
+		} );
+	} );
+
 	describe( 'normalizeMedia', () => {
 		let linkElement: HTMLLinkElement;
 		let styleElement: HTMLStyleElement;
@@ -723,6 +1114,25 @@ describe( 'Router styles management', () => {
 			expect( result ).toHaveAttribute( 'integrity', 'hash123' );
 		} );
 
+		it( 'should remove the router-managed attribute from the clone', () => {
+			linkElement.setAttribute( ROUTER_MANAGED_ATTRIBUTE, '' );
+
+			const result = normalizeMedia( linkElement );
+
+			// The clone is normalized, but the original element keeps the
+			// attribute so the router can still classify it.
+			expect( result ).not.toHaveAttribute( ROUTER_MANAGED_ATTRIBUTE );
+			expect( linkElement ).toHaveAttribute( ROUTER_MANAGED_ATTRIBUTE );
+
+			// A marked element and an otherwise identical unmarked one are
+			// considered equal.
+			const unmarked = normalizeMedia(
+				linkElement.cloneNode( true ) as HTMLLinkElement
+			);
+			unmarked.removeAttribute( ROUTER_MANAGED_ATTRIBUTE );
+			expect( result.isEqualNode( unmarked ) ).toBe( true );
+		} );
+
 		it( 'should output the same for equivalent link elements', () => {
 			const head = document.createElement( 'head' );
 			head.innerHTML = `
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index c0a4ea10ea669b..f96eb874db2ead 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -1,5 +1,10 @@
 import { store, privateApis, getConfig } from '@wordpress/interactivity';
-import { preloadStyles, applyStyles, type StyleElement } from './assets/styles';
+import {
+	preloadStyles,
+	applyStyles,
+	initRouterManagedMode,
+	type StyleElement,
+} from './assets/styles';
 import {
 	preloadScriptModules,
 	importScriptModules,
@@ -350,6 +355,17 @@ document.querySelectorAll( regionsSelector ).forEach( ( region ) => {
 	}
 } );
 
+// Detect whether the server marks its style assets with the
+// `data-wp-router-managed` attribute, and claim the marked ones. This runs
+// during module evaluation, which is synchronous, so no navigation, prefetch
+// or popstate can interleave before it. Claiming the marked elements here
+// rather than when the initial page is prepared matters because that
+// preparation awaits hydration: a navigation can apply styles before it
+// completes, or hydration may never complete at all. Elements injected by
+// client scripts afterwards are still classified correctly, as the
+// classification is done per element and they lack the attribute.
+initRouterManagedMode();
+
 // Initialize the router and cache the initial page using the initial vDOM.
 window.document
 	.querySelectorAll< HTMLScriptElement >( 'script[type=module][src]' )
diff --git a/test/e2e/specs/interactivity/router-styles-managed.spec.ts b/test/e2e/specs/interactivity/router-styles-managed.spec.ts
new file mode 100644
index 00000000000000..afb439860b867c
--- /dev/null
+++ b/test/e2e/specs/interactivity/router-styles-managed.spec.ts
@@ -0,0 +1,326 @@
+import { type Page } from '@playwright/test';
+import { test, expect } from './fixtures';
+
+const COLOR_RED = 'rgb(255, 0, 0)';
+const COLOR_GREEN = 'rgb(0, 255, 0)';
+const COLOR_WRAPPER = 'rgb(160, 12, 60)';
+const COLOR_FROM_LINK = 'rgb(0, 128, 128)';
+const COLOR_FROM_INLINE = 'rgb(128, 0, 128)';
+const COLOR_INJECTED = 'rgb(12, 34, 56)';
+const COLOR_INJECTED_FROM_LINK = 'rgb(0, 100, 200)';
+
+/**
+ * Style sheet rendered by the `test/router-styles-managed` block in every page
+ * containing it. As it is marked as router-managed, the router is allowed to
+ * disable and enable it during client-side navigations.
+ */
+const MANAGED_LINK_SELECTOR =
+	'link[rel="stylesheet"][href*="router-styles-managed/style-from-link.css"]';
+
+/**
+ * Injects a `<style>` element in the document, like a script unaware of the
+ * router would do.
+ *
+ * @param page             Playwright page.
+ * @param css              Content of the style element.
+ * @param options          Injection options.
+ * @param options.disabled Whether the associated style sheet should be
+ *                         disabled right after the injection.
+ */
+async function injectStyle(
+	page: Page,
+	css: string,
+	{ disabled = false }: { disabled?: boolean } = {}
+) {
+	await page.evaluate(
+		( { content, isDisabled } ) => {
+			const style = window.document.createElement( 'style' );
+			style.textContent = content;
+			window.document.head.appendChild( style );
+
+			if ( isDisabled ) {
+				const { sheet } = style;
+				if ( ! sheet ) {
+					throw new Error(
+						'The injected style element has no style sheet'
+					);
+				}
+				// Disabling the style sheet instead of the element keeps the
+				// `sheet` property populated, just like the router does.
+				sheet.disabled = true;
+			}
+		},
+		{ content: css, isDisabled: disabled }
+	);
+}
+
+test.describe( 'Router styles - router-managed style assets', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+
+		const red = await utils.addPostWithBlock(
+			'test/router-styles-managed',
+			{
+				alias: 'managed-red',
+				innerBlocks: [ [ 'test/router-styles-red' ] ],
+			}
+		);
+		const green = await utils.addPostWithBlock(
+			'test/router-styles-managed',
+			{
+				alias: 'managed-green',
+				innerBlocks: [ [ 'test/router-styles-green' ] ],
+			}
+		);
+
+		// This post uses the wrapper that doesn't mark its style assets, so
+		// mixed navigations can be tested.
+		const unmarked = await utils.addPostWithBlock(
+			'test/router-styles-wrapper',
+			{
+				alias: 'unmarked',
+				attributes: { links: {} },
+			}
+		);
+
+		await utils.addPostWithBlock( 'test/router-styles-managed', {
+			alias: 'managed-none',
+			attributes: { links: { red, green, unmarked } },
+		} );
+	} );
+
+	test.beforeEach( async ( { page, interactivityUtils: utils } ) => {
+		await page.goto( utils.getLink( 'managed-none' ) );
+		await expect( page.getByTestId( 'hydrated' ) ).toBeVisible();
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should mark all the server-rendered style assets', async ( {
+		page,
+	} ) => {
+		/*
+		 * This test guards the rest of the suite: if the server-side marking
+		 * simulated by the test plugin stops working, all the assertions about
+		 * client-injected styles would silently pass for the wrong reasons.
+		 *
+		 * These assertions run before any client-side navigation, so they only
+		 * observe what the server rendered. The rest of the suite asserts on
+		 * computed styles instead, as the presence of the attribute in the DOM
+		 * after a navigation depends on which elements the router reuses.
+		 */
+		const marked = page.locator(
+			'style[data-wp-router-managed], link[rel="stylesheet"][data-wp-router-managed]'
+		);
+		const unmarked = page.locator(
+			'style:not([data-wp-router-managed]), link[rel="stylesheet"]:not([data-wp-router-managed])'
+		);
+
+		await expect( marked ).not.toHaveCount( 0 );
+		await expect( unmarked ).toHaveCount( 0 );
+
+		// The style assets of the block under test are marked as well.
+		await expect( page.locator( MANAGED_LINK_SELECTOR ) ).toHaveAttribute(
+			'data-wp-router-managed',
+			''
+		);
+	} );
+
+	test( 'should add and remove marked styles during navigation', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const red = page.getByTestId( 'red' );
+		const green = page.getByTestId( 'green' );
+		const fromLink = page.getByTestId( 'managed-from-link' );
+		const fromInline = page.getByTestId( 'managed-from-inline' );
+
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( fromLink ).toHaveCSS( 'color', COLOR_FROM_LINK );
+		await expect( fromInline ).toHaveCSS( 'color', COLOR_FROM_INLINE );
+
+		await page.getByTestId( 'link red' ).click();
+
+		// This element disappears when a navigation starts.
+		// It should be visible again after a successful navigation.
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+
+		// The styles of the block itself are present in all the pages, so they
+		// should remain applied.
+		await expect( fromLink ).toHaveCSS( 'color', COLOR_FROM_LINK );
+		await expect( fromInline ).toHaveCSS( 'color', COLOR_FROM_INLINE );
+	} );
+
+	test( 'should preserve styles injected by the client', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const injected = page.getByTestId( 'injected' );
+		const injectedFromLink = page.getByTestId( 'injected-from-link' );
+
+		await expect( injected ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( injectedFromLink ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		// Inject a style element and a referenced style sheet, as a script
+		// unaware of the router would do.
+		await injectStyle(
+			page,
+			`.injected-target { color: ${ COLOR_INJECTED }; }`
+		);
+
+		const href = await page
+			.getByTestId( 'injected-style-sheet' )
+			.getAttribute( 'data-url' );
+
+		await page.evaluate( ( url ) => {
+			const link = window.document.createElement( 'link' );
+			link.rel = 'stylesheet';
+			link.href = url;
+			window.document.head.appendChild( link );
+		}, href as string );
+
+		await expect( injected ).toHaveCSS( 'color', COLOR_INJECTED );
+		await expect( injectedFromLink ).toHaveCSS(
+			'color',
+			COLOR_INJECTED_FROM_LINK
+		);
+
+		await page.getByTestId( 'link red' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+
+		// The injected styles are not managed by the router, so they should
+		// remain applied.
+		await expect( injected ).toHaveCSS( 'color', COLOR_INJECTED );
+		await expect( injectedFromLink ).toHaveCSS(
+			'color',
+			COLOR_INJECTED_FROM_LINK
+		);
+
+		// Navigate back to a page without the red block.
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+
+		await expect( injected ).toHaveCSS( 'color', COLOR_INJECTED );
+		await expect( injectedFromLink ).toHaveCSS(
+			'color',
+			COLOR_INJECTED_FROM_LINK
+		);
+	} );
+
+	test( 'should not enable disabled styles injected by the client', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const injected = page.getByTestId( 'injected' );
+
+		await injectStyle(
+			page,
+			`.injected-target { color: ${ COLOR_INJECTED }; }`,
+			{ disabled: true }
+		);
+
+		await expect( injected ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link red' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+
+		// The injected style is still disabled, so it should not be applied.
+		await expect( injected ).toHaveCSS( 'color', COLOR_WRAPPER );
+	} );
+
+	test( 'should not enable marked styles disabled by the client', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const fromLink = page.getByTestId( 'managed-from-link' );
+
+		// Ensure the style sheet is loaded and applied before disabling it.
+		await expect( fromLink ).toHaveCSS( 'color', COLOR_FROM_LINK );
+
+		await page.evaluate( ( selector ) => {
+			const link =
+				window.document.querySelector< HTMLLinkElement >( selector );
+			const sheet = link?.sheet;
+			if ( ! sheet ) {
+				throw new Error(
+					`No loaded style sheet found for '${ selector }'`
+				);
+			}
+			// Disabling the style sheet instead of the element keeps the
+			// `sheet` property populated, just like the router does.
+			sheet.disabled = true;
+		}, MANAGED_LINK_SELECTOR );
+
+		await expect( fromLink ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		/*
+		 * The target pages also contain this style sheet, so the router
+		 * considers it part of the styles that should be applied. It should
+		 * not be enabled, though, because it was not the router who disabled
+		 * it.
+		 */
+		await page.getByTestId( 'link red' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( fromLink ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( fromLink ).toHaveCSS( 'color', COLOR_WRAPPER );
+	} );
+
+	test( 'should preserve injected styles when navigating to unmarked pages', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const injected = page.getByTestId( 'injected' );
+		const fromLink = page.getByTestId( 'managed-from-link' );
+
+		await injectStyle(
+			page,
+			`.injected-target { color: ${ COLOR_INJECTED }; }`
+		);
+
+		await expect( injected ).toHaveCSS( 'color', COLOR_INJECTED );
+		await expect( fromLink ).toHaveCSS( 'color', COLOR_FROM_LINK );
+
+		// This page is rendered by a block that doesn't mark its style assets.
+		// The mode is fixed at initialization, so the injected style should
+		// still be preserved.
+		await page.getByTestId( 'link unmarked' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( injected ).toHaveCSS( 'color', COLOR_INJECTED );
+
+		/*
+		 * The target page doesn't contain the style assets of the marked
+		 * block, so the router should have disabled them. Only the styles
+		 * injected by the client are preserved.
+		 */
+		await expect( fromLink ).not.toHaveCSS( 'color', COLOR_FROM_LINK );
+	} );
+} );

From 28f82b59aae3d076c67fba37cdf5694febfd3739 Mon Sep 17 00:00:00 2001
From: David <david.arenas@automattic.com>
Date: Tue, 11 Aug 2026 20:22:13 +0200
Subject: [PATCH 2/2] Clarify when a navigation can precede the initial page
 preparation

---
 packages/interactivity-router/src/assets/styles.ts | 5 +++--
 packages/interactivity-router/src/index.ts         | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/interactivity-router/src/assets/styles.ts b/packages/interactivity-router/src/assets/styles.ts
index 5f13be57f849bd..db1387fd46b525 100644
--- a/packages/interactivity-router/src/assets/styles.ts
+++ b/packages/interactivity-router/src/assets/styles.ts
@@ -51,8 +51,9 @@ const routerDisabledStyles = new WeakSet< StyleElement >();
  * router.
  *
  * The marked elements are claimed here, eagerly, rather than waiting for the
- * initial page to be prepared. Preparing that page is asynchronous — it
- * awaits hydration — while a navigation can be triggered synchronously, so
+ * initial page to be prepared. Preparing that page awaits hydration of every
+ * interactive region, while a navigation only requires the region that
+ * triggers it to be hydrated, so
  * {@link applyStyles|`applyStyles`} may run first. Elements exclusive to the
  * initial page are never passed to
  * {@link prepareStylePromise|`prepareStylePromise`} by
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index f96eb874db2ead..e977bbf09b383f 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -360,7 +360,8 @@ document.querySelectorAll( regionsSelector ).forEach( ( region ) => {
 // during module evaluation, which is synchronous, so no navigation, prefetch
 // or popstate can interleave before it. Claiming the marked elements here
 // rather than when the initial page is prepared matters because that
-// preparation awaits hydration: a navigation can apply styles before it
+// preparation awaits hydration of every interactive region: a navigation
+// triggered from an already-hydrated region can apply styles before it
 // completes, or hydration may never complete at all. Elements injected by
 // client scripts afterwards are still classified correctly, as the
 // classification is done per element and they lack the attribute.