From 35d54b3ddb3310ab4c505d49bd4937b2d25e4078 Mon Sep 17 00:00:00 2001
From: Arsh <69170106+lilnasy@users.noreply.github.com>
Date: Fri, 12 Jan 2024 20:34:25 +0000
Subject: [PATCH] fix(transitions router): attempt to find the clicked element
 within an open shadow root (#9685)

* implementation

* add test

* add changeset
---
 .changeset/weak-planes-help.md                     |  4 ++++
 packages/astro/components/ViewTransitions.astro    |  3 +++
 .../fixtures/view-transitions/src/pages/one.astro  |  5 +++++
 packages/astro/e2e/view-transitions.test.js        | 14 ++++++++++++++
 4 files changed, 26 insertions(+)
 create mode 100644 .changeset/weak-planes-help.md

diff --git a/.changeset/weak-planes-help.md b/.changeset/weak-planes-help.md
new file mode 100644
index 000000000000..4bb69fe7a202
--- /dev/null
+++ b/.changeset/weak-planes-help.md
@@ -0,0 +1,4 @@
+---
+"astro": patch
+---
+Fixes an issue where anchor elements within a custom component could not trigger a view transition.
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
index e8e12ce3d3c1..5c7ffc8df362 100644
--- a/packages/astro/components/ViewTransitions.astro
+++ b/packages/astro/components/ViewTransitions.astro
@@ -53,6 +53,9 @@ const { fallback = 'animate' } = Astro.props;
 	if (supportsViewTransitions || getFallback() !== 'none') {
 		document.addEventListener('click', (ev) => {
 			let link = ev.target;
+			if (ev.composed) {
+			    link = ev.composedPath()[0];
+			}
 			if (link instanceof Element) {
 				link = link.closest('a, area');
 			}
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 e75c29f6350d..8e34eb555951 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,11 @@ 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>
+	<custom-a id="custom-click-two">
+		<template shadowrootmode="open">
+			<a href="/two">go to 2</a>
+		</template>
+	</custom-a>
 
 	<div id="test">test content</div>
 </Layout>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index 6b59671ed55b..04eab79c1116 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -1206,4 +1206,18 @@ test.describe('View Transitions', () => {
 
 		expect(loads.length, 'There should only be 1 page load').toEqual(1);
 	});
+
+	test('custom elements can trigger a view transition', async ({ page, astro }) => {
+		const loads = [];
+		page.addListener('load', (p) => {
+			loads.push(p.title());
+		});
+		await page.goto(astro.resolveUrl('/one'));
+		await expect(page.locator('#one'), 'should have content').toHaveText('Page 1');
+		// go to page 2
+		await page.click('#custom-click-two');
+		await expect(page.locator('#two'), 'should have content').toHaveText('Page 2');
+
+		expect(loads.length, 'There should only be 1 page load').toEqual(1);
+	});
 });