Fix invalid hash error

Resolves #499

Author: markcellus

src/router-component.ts

@@ -118,14 +118,22 @@ export class RouterComponent extends HTMLElement {
             'hash-scroll-behavior'
         ) as ScrollBehavior;
         const hashId = hash.replace('#', '');
-        const hashElement = querySelectorDeep(
-            `[id=${hashId}]`,
-            this
-        ) as HTMLElement;
-        if (hashElement) {
-            hashElement.scrollIntoView({
-                behavior: behaviorAttribute || 'auto',
-            });
+        try {
+            const hashElement = querySelectorDeep(
+                `[id=${hashId}]`,
+                this
+            ) as HTMLElement;
+            if (hashElement) {
+                hashElement.scrollIntoView({
+                    behavior: behaviorAttribute || 'auto',
+                });
+            }
+        } catch (e) {
+            // id attributes can only have valid characters, if invalid, skip
+            console.warn(
+                `Cannot scroll to element with the id of "${hashId}".`
+            );
+            return;
         }
     }
 

tests/router-component-tests.ts

@@ -491,6 +491,17 @@ describe('<router-component>', async () => {
             });
         });
 
+        it('warns when hash passed to querySelectorDeep throws because there is no matching element', async () => {
+            const hash = 'test';
+            querySelectorDeep.throws('error');
+            window.history.pushState({}, document.title, `/page1#${hash}`);
+            const popstate = new PopStateEvent('popstate', { state: {} });
+            window.dispatchEvent(popstate);
+            expect(consoleWarn).to.be.calledWithExactly(
+                `Cannot scroll to element with the id of "${hash}".`
+            );
+        });
+
         it('scrolls back to top of page if there is no hash', async () => {
             window.history.pushState({}, document.title, '/page1');
             const popstate = new PopStateEvent('popstate', { state: {} });