Add global click handler for routing with Shadow DOM support

Author: ralyodio

.roo/rules/03-router-transitions.md

@@ -23,6 +23,7 @@
 - Apply smooth fade-in/fade-out effects to minimize visual disruption
 - Use an initial loading overlay in index.html to prevent flashes of unstyled content
 - Move route-specific content to web components to prevent hardcoded content flashes
+- Implement a global click handler that works with Shadow DOM to intercept all internal links
 
 ## Styling During Transitions
 - Maintain consistent theme colors during transitions

public/js/components/pf-hero.js

@@ -91,14 +91,8 @@ class PfHero extends HTMLElement {
       </div>
     `;
 
-    // Add event listeners to the links to use the router
-    this.shadowRoot.querySelectorAll('a').forEach(link => {
-      link.addEventListener('click', (e) => {
-        e.preventDefault();
-        const href = link.getAttribute('href');
-        window.router.navigate(href);
-      });
-    });
+    // No need for specific click handlers anymore
+    // The global router click handler will handle all links
   }
 }
 

public/js/router.js

@@ -44,16 +44,28 @@ class Router {
       this.navigate(window.location.pathname, false);
     });
 
-    // Intercept link clicks
+    // Intercept all clicks at the document level (including those from Shadow DOM)
     document.addEventListener('click', (e) => {
-      // Find closest anchor element
-      const anchor = e.target.closest('a');
+      // Check if the click path includes an anchor element
+      // This works for both regular DOM and shadow DOM
+      let anchor = null;
+      let path = e.composedPath();
+      
+      // Find the first anchor element in the event path
+      for (let i = 0; i < path.length; i++) {
+        if (path[i].tagName === 'A') {
+          anchor = path[i];
+          break;
+        }
+      }
 
       // Skip if no anchor or if modifier keys are pressed
       if (!anchor || e.metaKey || e.ctrlKey || e.shiftKey) return;
 
-      // Skip if it's an external link or has a target
+      // Get the href attribute
       const href = anchor.getAttribute('href');
+      
+      // Skip if it's an external link or has a target
       if (!href || href.startsWith('http') || href.startsWith('//') || anchor.hasAttribute('target')) return;
 
       // Skip if it's a download link
@@ -70,7 +82,9 @@ class Router {
 
       // Navigate to the link
       this.navigate(href);
-    });
+      
+      console.log('Intercepted click on link:', href);
+    }, { capture: true }); // Use capture to get events before they reach the shadow DOM
   }
 
   /**