Get Children (Beta)

`slot.getChildren()`

Get the component instances currently placed in the slot.

Beta

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

Syntax

1 slot.getChildren(): Promise<Array<ComponentElement>>

Returns

Promise<Array<ComponentElement>>

A Promise that resolves to an array of component instances in the slot.

If no slot override has been set at the instance level, this method returns an empty array even if the component defines default slot content.

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 the slots on the instance
8   const slots = await componentInstance.getSlots();
9 
10   // Print the children of each slot
11   for (const slot of slots) {
12     const name = await slot.getDisplayName();
13     const children = await slot.getChildren();
14     console.log(`Slot "${name}" has ${children.length} children`);
15   }
16 
17 } else {
18   console.log('No component instance found');
19 }

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 the slots on the instance
8	const slots = await componentInstance.getSlots();
9
10	// Print the children of each slot
11	for (const slot of slots) {
12	const name = await slot.getDisplayName();
13	const children = await slot.getChildren();
14	console.log(`Slot "${name}" has ${children.length} children`);
15	}
16
17	} else {
18	console.log('No component instance found');
19	}