Get Slots (Beta)

`element.getSlots()`

Get all slots on a component instance.

This method returns an array of SlotInstanceElement objects, one for each slot defined on the component. Each slot can contain component instances that you can read or modify using the slot’s own methods.

Beta

These methods are in public beta and may change with future releases.

Syntax

1 element.getSlots(): Promise<Array<SlotInstanceElement>>

Returns

Promise<Array<SlotInstanceElement>>

A Promise that resolves to an array of SlotInstanceElement objects. The array order matches the order in which the slots appear in the Designer’s instance properties panel.

Example

1 // Get a component instance on the page
2 const elements = await webflow.getAllElements();
3 const componentInstance = elements.find(el => el.type === 'ComponentInstance');
4 
5 if (componentInstance?.type === 'ComponentInstance') {
6 
7   // Get all slots on the instance
8   const slots = await componentInstance.getSlots();
9 
10   for (const slot of slots) {
11     const name = await slot.getDisplayName();
12     const children = await slot.getChildren();
13     console.log(`Slot "${name}" has ${children.length} children`);
14   }
15 
16 } else {
17   console.log('No component instance found');
18 }

Designer Ability

Checks for authorization only.

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Any	Any	Any	Any

1	// Get a component instance on the page
2	const elements = await webflow.getAllElements();
3	const componentInstance = elements.find(el => el.type === 'ComponentInstance');
4
5	if (componentInstance?.type === 'ComponentInstance') {
6
7	// Get all slots on the instance
8	const slots = await componentInstance.getSlots();
9
10	for (const slot of slots) {
11	const name = await slot.getDisplayName();
12	const children = await slot.getChildren();
13	console.log(`Slot "${name}" has ${children.length} children`);
14	}
15
16	} else {
17	console.log('No component instance found');
18	}