What is the default value of a slot?

[AkiraVoid]

In v9, the default value of a slot should obviously be undefined, because:

• Users can pass something to slots to customize them.
• Users can pass a null to defend them from being rendered.
• Developers can let them have default rendering.

But I actually got a default value null, is that correct?

[AkiraVoid]

OK, now I know why:

The value undefined of slots only exists in states which are returned by useComponent, everything returned by getSlots will only be
a component or null.

This should be mentioned in docs.

[bsunderhus]

To be more precise here there are two definitions to be kept in mind:

1. shorthands (the value provided through props)
2. slots (what will actually be rendered internally on a component)

So, a shorthand could either be:

1. an object containing extra properties + as (which is used for ARIA reasons to opt out of semantic elements)
2. undefined -> which is the default behavior, in other words you're delegating to useComponent state hook to decide what to render
3. null -> which flags out that the component should not render this given slot
4. string or JSX element -> which will be passed as children to the default behavior of a slot

A slot on the other hand is the resulting value that will be rendered internally by a Fluent v9 component. resolveShorthand is used internally to provide a normalized value from a shorrthand that can be interpreted by getSlots to decide what will be rendered by the component. In other words, like you said, anything returned by getSlots should be a renderable value: a component or null.

See @fluentui/react-utilities for more information on resolveShorthand + getSlots

Here's the current documentation on slots for more details

[AkiraVoid]

Thanks for your suggestion. After reading source codes, I finally found out what actually happening while doing resolveShorthand and getSlots. But I still think that Fluent UI teams should make their docs more clear, as we cannot expect everyone has read the source codes of such a important feature. At least we should let them know:

• They should specify {required: true} when they call resolveShorthand if they try to add default content into a slot.
• A slot returned by getSlots will always be null or value that can be rendered. It's to say a slot which have default content or behaviors should be handled in useComponent hook.
• A slot is always a HTML component instead of custom component. If you want to render a custom component you should use it directly instead of using <slots.component />. (I don't think this is expected behavior but in my test case it looks so)

[bsunderhus]

Thanks for the suggestions @AkiraVoid , we'll follow up on that! As this API is not marked as @internal anymore you're completely right we should have a good documentation on the usage of those methods!

A slot is always a HTML component instead of custom component. If you want to render a custom component you should use it directly instead of using <slots.component />. (I don't think this is expected behavior but in my test case it looks so)

Not entirely true! A slot can be more than an HTML component, a slot default rendered component is specified by state.components.{slotName}, but by default on (I think) all v9 components there's no case where we use something else than semantic HTML elements.

[AkiraVoid]

Sorry I didn't get it. I mean I also think all v9 components are built from HTML elements, but what if I want to make a wrapper component which have default rendering of a certain v9 component?

[bsunderhus]

Then you'd just need to override state.components.{slotName}, to use the wrapper instead of the default HTML element being used internally. Here's an issue to track the creation of a better documentation for that: #22357

Keep in mind that this is an unstable API