fix(client): don't throw on using special chars in element ids (#2560)

src/client/app/index.ts

@@ -152,7 +152,9 @@ if (inBrowser) {
 
       // scroll to hash on new tab during dev
       if (import.meta.env.DEV && location.hash) {
-        const target = document.querySelector(decodeURIComponent(location.hash))
+        const target = document.getElementById(
+          decodeURIComponent(location.hash).slice(1)
+        )
         if (target) {
           scrollTo(target, location.hash)
         }

src/client/app/router.ts

@@ -104,8 +104,8 @@ export function createRouter(
             if (targetLoc.hash && !scrollPosition) {
               let target: HTMLElement | null = null
               try {
-                target = document.querySelector(
-                  decodeURIComponent(targetLoc.hash)
+                target = document.getElementById(
+                  decodeURIComponent(targetLoc.hash).slice(1)
                 )
               } catch (e) {
                 console.warn(e)
@@ -238,7 +238,7 @@ export function scrollTo(el: Element, hash: string, smooth = false) {
   try {
     target = el.classList.contains('header-anchor')
       ? el
-      : document.querySelector(decodeURIComponent(hash))
+      : document.getElementById(decodeURIComponent(hash).slice(1))
   } catch (e) {
     console.warn(e)
   }

src/client/theme-default/components/VPDocOutlineItem.vue

@@ -8,9 +8,7 @@ defineProps<{
 
 function onClick({ target: el }: Event) {
   const id = '#' + (el as HTMLAnchorElement).href!.split('#')[1]
-  const heading = document.querySelector<HTMLAnchorElement>(
-    decodeURIComponent(id)
-  )
+  const heading = document.getElementById(decodeURIComponent(id).slice(1))
   heading?.focus()
 }
 </script>

src/client/theme-default/components/VPSkipLink.vue

@@ -8,8 +8,8 @@ const backToTop = ref()
 watch(() => route.path, () => backToTop.value.focus())
 
 function focusOnTargetAnchor({ target }: Event) {
-  const el = document.querySelector<HTMLAnchorElement>(
-    decodeURIComponent((target as HTMLAnchorElement).hash)
+  const el = document.getElementById(
+    decodeURIComponent((target as HTMLAnchorElement).hash).slice(1)
   )
 
   if (el) {