Automattic Design System

Components

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.

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

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
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.

ExamplesPermalink to this section

DefaultPermalink to this section

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 PropsPermalink to this section

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 ChildrenPermalink to this section

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 ContextPermalink to this section

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 StylesPermalink to this section

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>
	);
};