fix(client): handle head orphans added in initial load (#3474)

src/client/app/composables/head.ts

@@ -8,14 +8,24 @@ import {
 import type { Route } from '../router'
 
 export function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>) {
-  let managedHeadElements: (HTMLElement | undefined)[] = []
   let isFirstUpdate = true
+  let managedHeadElements: (HTMLElement | undefined)[] = []
 
   const updateHeadTags = (newTags: HeadConfig[]) => {
     if (import.meta.env.PROD && isFirstUpdate) {
       // in production, the initial meta tags are already pre-rendered so we
       // skip the first update.
       isFirstUpdate = false
+      newTags.forEach((tag) => {
+        const selector = toSelector(tag[0], tag[1])
+        const headEl = createHeadElement(tag)
+        ;[...document.querySelectorAll(selector)].some((el) => {
+          if (el.isEqualNode(headEl)) {
+            managedHeadElements.push(el as HTMLElement)
+            return true
+          }
+        })
+      })
       return
     }
 
@@ -96,3 +106,9 @@ function isMetaDescription(headConfig: HeadConfig) {
 function filterOutHeadDescription(head: HeadConfig[]) {
   return head.filter((h) => !isMetaDescription(h))
 }
+
+function toSelector(tag: string, attrs: Record<string, string>) {
+  return `${tag}${Object.keys(attrs)
+    .map((key) => `[${key}="${attrs[key].replace(/(["'\\])/g, '\\$1')}"]`)
+    .join('')}`
+}