[experimentalStyled] Add name and slot options

[mnajdova]

This PR aims to resolve #23745 (comment) by providing name and slot as options in the experimentalStyled utility.

Here is the output of both the generated HTML and the React tree.

HTML

Previously:

Now:

React tree

Previously:

Now:

[mui-pr-bot]

@material-ui/core: parsed: +0.06% , gzip: +0.10%

Details of bundle changes

Generated by 🚫 dangerJS against c37d4f7

[oliviertassinari]

This looks like an improvement for the DX of customizations :). I wonder if we can't abstract the API, like:

• name: string Slider
• slot: string Rail

to avoid naming mistakes & enforce more consistency. For instance, if slot is Root, apply muiName automatically.

[mnajdova]

This looks like an improvement for the DX of customizations :). I wonder if we can't abstract the API, like:

• name: string Slider
• slot: string Rail

to avoid naming mistakes & enforce more consistency. For instance, if slot is Root, apply muiName automatically.

Definitely looks better, implemented with 3845a64

[mbrookes]

I've been meaning to ask – is "slot" a recognised term? I hadn't come across it before your use, and a quick web search doesn't bring up anything relevant.

[mnajdova]

It’s not something standardized, I’ve just got used to use it for describing different parts of the component. In Vue, slots are used as templates part for creating a layout https://vuejs.org/v2/guide/components-slots.html Here is an example:

<div class="container">
  <header>
    <!-- We want header content here -->
    <slot name="header"></slot>
  </header>
  <main>
    <!-- We want main content here -->
    <slot name="body"></slot>
  </main>
  <footer>
    <!-- We want footer content here -->
    <slot name="footer"></slot>
  </footer>
</div>

I don’t think react has a similar notion for it, but I think we can just use the same term. Open for other options around naming here :)

[oliviertassinari]

I was influenced by the usage of the slot terminology by Vue and Web Components when making the initial proposal. The first idea that came to mind was component but it seemed to be overloaded. Hence slot as the second option.

Any other idea?

[oliviertassinari]

Part

[mnajdova]

part is the other term I had in mind too, but slot sound better to me 🤷‍♀️

[eps1lon]

svelte has slots as well.

[mbrookes]

I'm struggling to see how "slot" as used here relates to slots in Vue and Svelte, where it appears to be a placeholder for children equivalent to {props.children} in React. A slot is something that you put things into. That doesn't seem to be the case here, unless I'm misunderstanding.

[oliviertassinari]

@mbrookes each components' prop key is a slot.

[mbrookes]

Okay, thanks.