Function HeadContent

packages/solid-router/src/HeadContent.dev.tsx:18–45

()

 * includes a fallback cleanup effect for hydration mismatch cases.
 */
export function HeadContent() {
  const tags = useTags()
  const hydrated = useHydrated()

  // Fallback cleanup for hydration mismatch cases
  // Runs when hydration completes to remove any orphaned dev styles links from DOM
  createEffect(() => {
    if (hydrated()) {
      document
        .querySelectorAll(`link[${DEV_STYLES_ATTR}]`)
        .forEach((el) => el.remove())
    }
  })

  // Filter out dev styles after hydration
  const filteredTags = createMemo(() => {
    if (hydrated()) {
      return tags().filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR])
    }
    return tags()
  })

  return (
    <MetaProvider>
      <For each={filteredTags()}>{(tag) => <Asset {...tag} />}</For>
    </MetaProvider>
  )
}