---
name: Slot
package: '@wordpress/components'
category: '@wordpress-components'
status: stable
canonical: 'https://system.automattic.design/components/slot/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-slotfill--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/slot-fill'
---

# Slot

`Slot` marks a location where content rendered by matching `Fill` components
elsewhere will appear. Use it to allow a component to define UI areas that
can be extended from other parts of the application.

```tsx
import { Slot } from '@wordpress/components';
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `name` *(required)* | `SlotKey` | — | Slot name. |
| `fillProps` | `FillProps` | `{}` | props to pass from `Slot` to `Fill`. |
| `bubblesVirtually` | `true` | — | By default, events will bubble to their parents on the DOM hierarchy (native event bubbling). If set to true, events will bubble to their virtual parent in the React elements hierarchy instead, also accept an optional `className`, `id`, etc.  to add to the slot container. |
| `children` | `(fills: ReactNode) => ReactNode` | — | A function that returns nodes to be rendered. Supported only when `bubblesVirtually` is `false`. |
| `className` | `string` | — | Additional className for the `Slot` component. Supported only when `bubblesVirtually` is `true`. |
| `style` | `CSSProperties` | — | Additional styles for the `Slot` component. Supported only when `bubblesVirtually` is `true`. |
| `as` | `JSXElementConstructor<any> \| keyof IntrinsicElements \| undefined` | — | The HTML element or React component to render the component as. |


## Examples

### Default

```tsx
const Default = ( props ) => {
	return (
		<SlotFillProvider>
			<h2>Profile</h2>
			<p>
				Name: <Slot { ...props } name="name" />
			</p>
			<p>
				Age: <Slot { ...props } name="age" />
			</p>
			<Fill name="name">Grace</Fill>
			<Fill name="age">33</Fill>
		</SlotFillProvider>
	);
};
```

### With Fill Props

```tsx
const WithFillProps = ( props ) => {
	return (
		<SlotFillProvider>
			<h2>Profile</h2>
			<p>
				Name:{ ' ' }
				<Slot
					{ ...props }
					name="name"
					fillProps={ { name: 'Grace' } }
				/>
			</p>
			<p>
				Age: <Slot { ...props } name="age" fillProps={ { age: 33 } } />
			</p>

			<Fill name="name">{ ( fillProps ) => fillProps.name }</Fill>
			<Fill name="age">{ ( fillProps ) => fillProps.age }</Fill>
		</SlotFillProvider>
	);
};
```

### With Slot Children

```tsx
const WithSlotChildren = ( props ) => {
	return (
		<SlotFillProvider>
			<h2>Profile</h2>
			<p>
				Name:
				{ /* @ts-expect-error Not supported children for `<Slot />` when `bubblesVirtually` is true. */ }
				<Slot { ...props } name="name">
					{ ( fills ) => {
						return (
							<span style={ { color: 'red' } }>{ fills }</span>
						);
					} }
				</Slot>
			</p>
			<p>
				Age:
				{ /* @ts-expect-error Not support children for `<Slot />` when `bubblesVirtually` is true. */ }
				<Slot { ...props } name="age">
					{ ( fills ) => {
						return (
							<span style={ { color: 'red' } }>{ fills }</span>
						);
					} }
				</Slot>
			</p>
			<Fill name="name">Alice</Fill>
			<Fill name="age">18</Fill>
		</SlotFillProvider>
	);
};
```

### With Context

```tsx
const WithContext = ( props ) => {
	const Context = createContext< string | number >( '' );
	const ContextFill = ( { name }: { name: string } ) => {
		const value = useContext( Context );
		return <Fill name={ name }>{ value }</Fill>;
	};
	return (
		<SlotFillProvider>
			<h2>Profile</h2>
			<p>
				Name: <Slot { ...props } name="name" />
			</p>
			<p>
				Age: <Slot { ...props } name="age" />
			</p>
			<Context.Provider value="Grace">
				<ContextFill name="name" />
			</Context.Provider>
			<Context.Provider value={ 33 }>
				<ContextFill name="age" />
			</Context.Provider>
		</SlotFillProvider>
	);
};
```

### Cross Document Styles

```tsx
const CrossDocumentStyles = () => {
	return (
		<SlotFillProvider>
			<p>
				The content below should have 32px of padding inside its
				outline.
			</p>
			<IframePortal>
				<Slot name="cross-document-styles" bubblesVirtually />
			</IframePortal>
			<Fill name="cross-document-styles">
				<Spacer
					padding={ 8 }
					style={ {
						display: 'inline-block',
						outline: '2px solid currentColor',
					} }
				>
					SCSS module styles rendered in another document
				</Spacer>
			</Fill>
		</SlotFillProvider>
	);
};
```