fix(transitions router): attempt to find the clicked element within a…

…n open shadow root (withastro#9685)

* implementation

* add test

* add changeset

.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.

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');
 			}

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>

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);
+	});
 });