can i access the slot nodes

[hidden badger]

can i access to nodes that are passed as slot to my astro component. I want to group them

[shut wadi]

Hi @hidden badger. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Astro, you cannot directly access or manipulate the actual DOM nodes or elements passed into slots from within your Astro component. Slots in Astro are a way to inject child HTML content into a component template, but you do not get programmatic access to the nodes themselves—only to their rendered output.

However, you can use the Astro.slots utility functions to check for the presence of specific slots (Astro.slots.has(slotName)) or to render the contents of a slot to a string of HTML (Astro.slots.render(slotName)). This allows you to conditionally render or wrap slot content, but not to group or manipulate the nodes themselves as you might in a framework like React with React.Children or in the browser with the DOM API.

Example of checking for and rendering a slot:

<slot />
{Astro.slots.has('more') && (
  <aside>
    <h2>More</h2>
    <slot name="more" />
  </aside>
)}

Example of rendering slot content to a string:

---const html = await Astro.slots.render('default');--- 
<Fragment set:html={html} />

But again, this gives you the rendered HTML, not the original nodes or elements. If you need to group or process slot content as nodes, this is not currently possible in Astro according to the available documentation Component utilities: Astro.slots.

If you need more advanced manipulation, you may need to handle this logic in a UI framework component (like React, Svelte, etc.), where you have access to the children as nodes or elements Passing children to framework components.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: