Make link click interception work with elements inside open shadow roots. Fixes #27070

Author: SteveSandersonMS

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -52,7 +52,7 @@ export function attachToEventDelegator(eventDelegator: EventDelegator) {
 
     // Intercept clicks on all <a> elements where the href is within the <base href> URI space
     // We must explicitly check if it has an 'href' attribute, because if it doesn't, the result might be null or an empty string depending on the browser
-    const anchorTarget = findClosestAncestor(event.target as Element | null, 'A') as HTMLAnchorElement | null;
+    const anchorTarget = findAnchorTarget(event);
     const hrefAttributeName = 'href';
     if (anchorTarget && anchorTarget.hasAttribute(hrefAttributeName)) {
       const targetAttributeValue = anchorTarget.getAttribute('target');
@@ -122,12 +122,34 @@ export function toAbsoluteUri(relativeUri: string) {
   return testAnchor.href;
 }
 
-function findClosestAncestor(element: Element | null, tagName: string) {
+function findAnchorTarget(event: MouseEvent): HTMLAnchorElement | null {
+  const path = event.composedPath && event.composedPath();
+  if (path) {
+    // This logic works with events that target elements within a shadow root,
+    // as long as the shadow mode is 'open'. For closed shadows, we can't possibly
+    // know what internal element was clicked.
+    for (let i = 0; i < path.length; i++) {
+      const candidate = path[i];
+      if (candidate instanceof Element && candidate.tagName === 'A') {
+        return candidate as HTMLAnchorElement;
+      }
+    }
+    return null;
+  } else {
+    // Since we're adding use of composedPath in a patch, retain compatibility with any
+    // legacy browsers that don't support it by falling back on the older logic, even
+    // though it won't work properly with ShadowDOM. This can be removed in the next
+    // major release.
+    return findClosestAnchorAncestorLegacy(event.target as Element | null, 'A');
+  }
+}
+
+function findClosestAnchorAncestorLegacy(element: Element | null, tagName: string) {
   return !element
     ? null
     : element.tagName === tagName
       ? element
-      : findClosestAncestor(element.parentElement, tagName);
+      : findClosestAnchorAncestorLegacy(element.parentElement, tagName);
 }
 
 function isWithinBaseUriSpace(href: string) {

src/Components/Web.JS/dist/Release/blazor.webassembly.js

@@ -333,6 +333,22 @@ public void CanFollowLinkToNotAComponent()
             Browser.Equal("Not a component!", () => Browser.Exists(By.Id("test-info")).Text);
         }
 
+        [Fact]
+        public void CanFollowLinkDefinedInOpenShadowRoot()
+        {
+            SetUrlViaPushState("/");
+
+            var app = Browser.MountTestComponent<TestRouter>();
+
+            // It's difficult to access elements within a shadow root using Selenium's regular APIs
+            // Bypass this limitation by clicking the element via JavaScript
+            var shadowHost = app.FindElement(By.TagName("custom-link-with-shadow-root"));
+            ((IJavaScriptExecutor)Browser).ExecuteScript("arguments[0].shadowRoot.querySelector('a').click()", shadowHost);
+
+            Browser.Equal("This is another page.", () => app.FindElement(By.Id("test-info")).Text);
+            AssertHighlightedLinks("Other", "Other with base-relative URL (matches all)");
+        }
+
         [Fact]
         public void CanGoBackFromNotAComponent()
         {

src/Components/Web.JS/src/Services/NavigationManager.ts

@@ -24,6 +24,7 @@
     <li><NavLink href="/subdir/WithLazyLoadedRoutes" id="with-lazy-routes">With lazy loaded routes</NavLink></li>
     <li><NavLink href="PreventDefaultCases">preventDefault cases</NavLink></li>
     <li><NavLink>Null href never matches</NavLink></li>
+    <li><custom-link-with-shadow-root target-url="Other"></custom-link-with-shadow-root></li>
 </ul>
 
 <button id="do-navigation" @onclick=@(x => NavigationManager.NavigateTo("Other"))>

src/Components/test/E2ETest/Tests/RoutingTest.cs

@@ -30,6 +30,7 @@
     <script src="js/jsinteroptests.js"></script>
     <script src="js/renderattributestest.js"></script>
     <script src="js/webComponentPerformingJsInterop.js"></script>
+    <script src="js/customLinkElement.js"></script>
 
     <script>
         // Used by ElementRefComponent

src/Components/test/testassets/BasicTestApp/RouterTest/Links.razor

@@ -0,0 +1,9 @@
+// This web component is used from the CanFollowLinkDefinedInOpenShadowRoot test case
+
+window.customElements.define('custom-link-with-shadow-root', class extends HTMLElement {
+    connectedCallback() {
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        const href = this.getAttribute('target-url');
+        shadowRoot.innerHTML = `<a href='${href}'>Anchor tag within shadow root</a>`;
+    }
+});

src/Components/test/testassets/BasicTestApp/wwwroot/index.html

@@ -20,6 +20,7 @@
     <script src="js/jsinteroptests.js"></script>
     <script src="js/renderattributestest.js"></script>
     <script src="js/webComponentPerformingJsInterop.js"></script>
+    <script src="js/customLinkElement.js"></script>
 
     <div id="blazor-error-ui">
         An unhandled error has occurred.