Skip to content

Get list of heading nodes for a page during SSR #3229

Description

@janosh

Describe the problem

Say I want to create a custom table of contents that doesn't flash on page load, is there any way to get a list of headings on a page during SSR and return it from the module script's load function?

Essentially this but of course without using unavailable browser globals:

<script lang="ts" context="module">
  import type { Load } from '@sveltejs/kit'

  export const load: Load = () => {
    const headings = document.querySelectorAll(`h1, h2, h3`)
    return { props: headings }
  }
</script>

<script lang="ts">
  export let headings: HTMLHeadingElement[]

  console.log(headings)
</script>

Describe the proposed solution

No idea.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions