What is the best way to iterate over children components? | Astro Lounge | Page 1

dire abyss Oct 5, 2022, 2:26 AM

#

Inside of a .astro file?

languid zephyr Oct 5, 2022, 2:26 AM

#

yup

dire abyss Oct 5, 2022, 2:28 AM

#

You can't really iterate over the children because the slot gets rendered to a string of html

languid zephyr Oct 5, 2022, 2:28 AM

#

I assume it would need to happen in the parent Tab component.

dire abyss Oct 5, 2022, 2:28 AM

#

The best way to have interactive slots in Astro is to use slot functions

#

I was trying to type out an example but I forgot Chris already has a good one:

#

#1021609155041173514 message

#

You could also use an existing tab container web component, something like https://github.com/github/tab-container-element

GitHub

GitHub - github/tab-container-element: An accessible tab container ...

An accessible tab container element with keyboard support. - GitHub - github/tab-container-element: An accessible tab container element with keyboard support.

languid zephyr Oct 5, 2022, 2:32 AM

#

okay cool I will take a look

#

thank you!

#What is the best way to iterate over children components?