Adding Slots

[severinlandolt]

Another year, another Slot request. I saw that previous requests (#287, #189) have been closed. The beta docs suggest using...

the power of CSS; leverage the cascade, custom properties, :has() selectors, and more…

I use Tailwind CSS and found that this way it becomes a specificity footgun:

• As a component producer you end up with a CSS variable and group/* sprawl.
• As a consumer you may end up with lots of !important rules to overwrite specific utilities defined in parents

With slots I can add regular Tailwind utilities to the place where they are actually applied. This requires a lot less *:, **:, has-*, and data-[slot=*] trickery.

Notes: One ▲ DENG feedback regarding tailwind-variants:

I've seen so much abuse of slots where it's just 10s of slot definitions and no variants/compound variants which essentially makes it a big css file at the top. If there's a way to enforce slots usage explicitly with variants then that'll be great

Thank you for any consideration.

[pavitra-infocusp]

TIL, and wow, I'm sold - https://panda-css.com/docs/docs/concepts/slot-recipes#atomic-slot-recipe-or-sva

It would be beneficial to have support for slots in cva.

[pavitra-infocusp]

@joe-bell Are you accepting contributions on this?

[micnic]

I made my own library that is a superset of CVA's API and has slots + required variants included, you can check it out here: https://www.npmjs.com/package/slot-variants

[wicholas789]

Thanks for raising this again. I completely agree, relying on CSS variables and :has() trickery becomes a specificity nightmare with Tailwind. Slots would let us apply regular Tailwind utilities directly where they're actually used, avoiding all the : and data-[slot=] sprawl.

There's a resource with practical examples that illustrates how slots could simplify component composition, you can click here to see it.

The feedback about enforcing slots with variants is spot-on too, slots work best when paired with clear variant patterns rather than becoming sprawling CSS definitions. Hopefully this request gains more traction this time around. Appreciate you keeping this conversation going.