Hello, I would like to make a custom tag in astro like <AntiRegex> where whatever I put in the tags is split into a span for each character at build time, for example, "<AntiRegex>hello</AntiRegex> would become <span>h</span> <span>e</span> <span>l</span> <span>l</span> <span>o</span> at build time. However, I can't find anything that would let me do this in .astro files, do I have to use a framework like react?
#Custom Tag in Astro
dry dock
near rune
it's possible, but it can't look like that, you'd have to pass "hello" as a prop
dry dock
I figured it out
deep peak
🥳 Glad you figured it out! In case anyone else sees this and is curious about an answer, you can do something like this:
Using slots:
---
const slot = (await Astro.slots.render('default')).trim()
---
{ [...slot].map(letter => <span>{letter}</span>)}
Using Props:
{ [...Astro.props.word].map(letter => <span>{letter}</span>)}