From 5a8bdeabeee4f246cddc275083a4facf52858778 Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Sat, 10 Feb 2024 12:22:45 +0100
Subject: [PATCH] now possibly obsolete part for issue 9953

---
 .changeset/tidy-buttons-end.md                           | 5 +++++
 .../src/pages/declarative-shadow-dom.astro               | 7 +++++++
 .../e2e/fixtures/view-transitions/src/pages/one.astro    | 1 +
 packages/astro/e2e/view-transitions.test.js              | 9 +++++++++
 packages/astro/src/transitions/router.ts                 | 7 ++++++-
 5 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tidy-buttons-end.md
 create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/declarative-shadow-dom.astro

diff --git a/.changeset/tidy-buttons-end.md b/.changeset/tidy-buttons-end.md
new file mode 100644
index 0000000000..aec9e639b9
--- /dev/null
+++ b/.changeset/tidy-buttons-end.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Adds handling of declarative shadow DOMs during view transitions for browsers that support them via `includeShadowRoots`.
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/declarative-shadow-dom.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/declarative-shadow-dom.astro
new file mode 100644
index 0000000000..9a61545cda
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/declarative-shadow-dom.astro
@@ -0,0 +1,7 @@
+---
+import Layout from '../components/Layout.astro';
+---
+<Layout>
+<h2>Shadow DOM</h2>
+	<p id="light"><template shadowroot="open" shadowrootmode="open">Hey there!</template></p>
+</Layout>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro
index 8e34eb5559..8b9b5dcd4e 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro
@@ -12,6 +12,7 @@ import Layout from '../components/Layout.astro';
 	<a id="click-redirect-two" href="/redirect-two">go to redirect 2</a>
 	<a id="click-redirect-external" href="/redirect-external">go to a redirect external</a>
 	<a id="click-404" href="/undefined-page">go to undefined page</a>
+	<a id="click-declarative-shadow-dom" href="/declarative-shadow-dom">page with DSD</a>
 	<custom-a id="custom-click-two">
 		<template shadowrootmode="open">
 			<a href="/two">go to 2</a>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index a9626c09e9..ce4d127080 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -1351,4 +1351,13 @@ test.describe('View Transitions', () => {
 			'-\\31 1'
 		);
 	});
+	test('automatically handles declarative shadow DOM', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/one'));
+		await page.click('#click-declarative-shadow-dom');
+		const h = page.locator('h2');
+		await expect(h, 'should have content').toHaveText('Shadow DOM');
+		const elementHandle = await page.$('#light');
+		const hasShadowRoot = await page.evaluate((el) => !!el.shadowRoot, elementHandle);
+		expect(hasShadowRoot).toBe(true);
+	});
 });
diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts
index 6ca3f666a8..40b91f23b3 100644
--- a/packages/astro/src/transitions/router.ts
+++ b/packages/astro/src/transitions/router.ts
@@ -513,7 +513,12 @@ async function transition(
 
 		parser ??= new DOMParser();
 
-		preparationEvent.newDocument = parser.parseFromString(response.html, response.mediaType);
+		// @ts-ignore  includeShadowRoots is only supported in Chrome
+		// @astrojs/lit explicitly requires this because the
+		// polyfill for handling declarative shadow DOMS excludes browsers with native support
+		preparationEvent.newDocument = parser.parseFromString(response.html, response.mediaType, {
+			includeShadowRoots: true,
+		});
 		// The next line might look like a hack,
 		// but it is actually necessary as noscript elements
 		// and their contents are returned as markup by the parser,