fix: Resolve issue with shadow DOM (#80)

* fix: Resolve issue with shadow DOM

Router should now be able to find <a> tags within open shadow DOMs.

* test: Add test case for shadow DOM

* Update src/router.js

Co-authored-by: Ryan Christian <[email protected]>

---------

Co-authored-by: Ryan Christian <[email protected]>

Author: Jentob

src/router.js

@@ -16,7 +16,7 @@ const UPDATE = (state, url) => {
 			return state;
 		}
 
-		const link = url.target.closest('a[href]'),
+		const link = url.composedPath().find(el => el.nodeName == 'A' && el.href),
 			href = link && link.getAttribute('href');
 		if (
 			!link ||

test/router.test.js

@@ -927,6 +927,41 @@ describe('Router', () => {
 		await sleep(10);
 		expect(scratch).to.have.property('textContent', 'data');
 	});
+
+	it('should intercept clicks on links inside open shadow DOM', async () => {
+		const shadowlink = document.createElement('a');
+		shadowlink.href = '/shadow';
+		shadowlink.textContent = 'Shadow Link';
+		shadowlink.addEventListener('click', e => e.preventDefault());
+
+		const attachShadow = (el) => {
+			if (!el || el.shadowRoot) return;
+			const shadowroot = el.attachShadow({ mode: 'open' });
+			shadowroot.appendChild(shadowlink);
+		}
+
+		const Home = sinon.fake(() => <div ref={attachShadow}></div>);
+		const Shadow = sinon.fake(() => <div>Shadow Route</div>);
+
+		render(
+			<LocationProvider>
+				<Router>
+					<Route path="/" component={Home} />
+					<Route path="/shadow" component={Shadow}/>
+				</Router>
+				<ShallowLocation />
+			</LocationProvider>,
+			scratch
+		);
+
+		shadowlink.click();
+		
+		await sleep(1);
+
+		expect(loc).to.deep.include({ url: '/shadow' });
+		expect(Shadow).to.have.been.calledOnce;
+		expect(scratch).to.have.property('textContent', 'Shadow Route');
+	});
 });
 
 const MODE_HYDRATE = 1 << 5;