Post

I would argue that React already has slots with a different syntax via component props. It's not a perfectly ideal syntax, but, arguably, it's better than the string-matching chaos of web components. After all, I can write <ProfileCardRaw name="BellCube" description={<p>A very cool person!</p>} />

0 reposts0 likes

Imo <ProfileCardRaw description={<p>A very cool person!</p>}/> (especially if there are more props/render props!) is a lot harder to read/parse than <ProfileCardRaw> <p slot="description">A very cool person!</p> </ProfileCardRaw> This is an opinion, other peoples opinions may differ.

(counter to an earlier point I made) I think the platform kinda messed up on the syntax of slots, and the above is way better than: <arbitrary-element slot="whatever"> additionally, many slots don't even need or want a host element (p in your example).

The problem you mentioned about knowing how it'll be used is a problem of the docs, not a problem of the syntax. Slots don't tell you how they'll be used any better than component props do, since all you see is a name and some magic syntax. Even a simple JSDoc comment over the prop definition works.