Slots, and situations in which to use <ClearSlots>?

[bstro]

Hi there, I'm working on building a UI library with TailwindCSS and React-ARIA, and I'm trying to get a solid understanding of the slots-based approach that react-spectrum uses. I am trying to get an intuitive grasp on the use of the <ClearSlots> component inside Slots.tsx in particular. In what situations do ya'll reach for ClearSlots—what are the most common use cases/where does it come in useful?

I noticed that it is used in Spectrum's ListViewItem, ListBoxOption, MenuItem, Content, Footer, Header, and View. I'm trying to get a sense for why that is—what is different about those components that makes it useful to clear the slots context? Why those and not, for instance, a Button?

Thank you!

[reidbarber]

The best description is probably from #220 (comment), in the original PR by @snowystinger:

More info on ClearSlots:
Was thinking, slots is a bit pervasive, in a dialog, it applies specific styles to the Divider. If someone wanted to make a two column layout in their content and use a Divider, they'd need to do some work to get rid of the class name the dialog applies.
My thought was to start by just having the semantic element always clear the slots context because I don't think we typically want to reach into that region of anything with our styles.
This is also a convenience component to stop slots context propagation

Basically, slots bring opinions, which is super useful, but sometimes you want to ignore them. Notice that most of the places we use this is either for container components, or where we want to specify a different slot provider inside. In the Button instance, we don't really have a need for either of those.

[bstro]

Thanks! This is very helpful context.