[RFC] Meaning of components and slots

What’s the problem? 🤔

From #33416 and #21453, I feel that we are mixing slots and components together even though they are not the same.

By having an agreement on the meaning, I believe that it will be easier to decide on the APIs (to override components and slots).

What are the requirements? ❓

There are real use cases where you want to replace the component (HTML tag) or the slot.

Slot override

When: developers want to take control of the logic, and styles of the default slot. Use case: GitHub label example, the popper’s logic has to be replaced to show options below the input.

Component override

When: developers want to change the HTML tag, normally for accessibility. (component override is more common than slot override). Alternatively, they want to add custom logic by preserving the default styles. Use case:

• changing button to a
• changing ul to div in the Autocomplete for grouped options
• access ownerState and add some logic + styles.

Proposed solution 🟢

This can apply to MUI Base, Material UI and Joy UI.

Slots

All MUI components have at least 1 slot, aka root slot. The slot can be a string (DOM) or a styled component. In MUI Base, the slots are mostly strings because it is unstyled. However, for Material UI, Joy UI, the slots are mostly styled-components.

The name of the slot can be seen in the suffix of the className.

Components

Represents the HTML tag used in the slot. For example, Joy UI’s Input has 2 slots (root and input):

• The component of the root slot is <div>.
• The component of the input slot is <input>.,

Resources and benchmarks 🔗

No response

[michaldudak]

Consider the following simplified example - a Button component from a styled library (like Material UI or Joy UI). Its (greatly simplified) implementation could look like that:

const ButtonRoot = styled('button')(`
  // CSS styles go here
`);

const Button = (props) => {
  return <ButtonRoot />
}

Now, there are two things we can customize here:

1. replace the ButtonRoot component with something else
2. replace the button with something else

As I understand it, in this particular case, we’re referring to the ButtonRoot as the root slot and to the button as the root component.

This distinction only makes sense in the styled components. In MUI Base, in most cases, slots are HTML elements, so there’s just one thing to customize:

const ButtonRoot = 'button';

const ButtonUnstyled = (props) => {
  return <ButtonRoot />
}

[siriwatknp]

I think we are close to the conclusion here, so let’s pick one and use it across the documentation:

Available options:

1. subcomponent
2. leaf component
3. rendered component
4. as component
5. forwarded component