Slots are predefined regions within a component where you can nest other components. This nesting capability allows you to insert child components into a parent structure to build complex, modular layouts.

Slots enable flexible layouts and are used to:

• Create dedicated spaces where you can drag and drop components directly from the Library.
• Define the overall structure of a layout while accommodating flexible content within specific areas.
• Build complex, composable designs through component nesting.
• Organize page content into logical sections.

For example: A Two Column Layout component might have left and right slots where you can drag and drop different components into each column, creating varied layouts without writing code.

Accessing slots 

Slots are managed within the code Editor. You can navigate to this interface by selecting a component from either the code-based components menu or the Component Library. Both access methods open the same editor workspace.

To access slots for code-based components:

1. Access your site.

2. On the top right, click to open Drupal Canvas.

Slots are predefined regions within a component where you can nest other components. This nesting capability allows you to insert child components into a parent structure to build complex, modular layouts.

Slots enable flexible layouts and are used to:

• Create dedicated spaces where you can drag and drop components directly from the Library.
• Define the overall structure of a layout while accommodating flexible content within specific areas.
• Build complex, composable designs through component nesting.
• Organize page content into logical sections.

For example: A Two Column Layout component might have left and right slots where you can drag and drop different components into each column, creating varied layouts without writing code.

Accessing slots 

Slots are managed within the code Editor. You can navigate to this interface by selecting a component from either the code-based components menu or the Component Library. Both access methods open the same editor workspace.

To access slots for code-based components:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.

3. In the left toolbar, click the Code (</>) icon to open the code-based components menu.

4. Select the component to which you want to add or edit a slot. 

   The system opens the code Editor for the component and displays the Preview and Component data panels on the right.

5. In the Component data panel on the right, locate the Slots tab.

To access slots for components in the Component Library:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.

3. In the left toolbar, click the Library (+) icon to open the Component Library.

4. On the Component tab, locate the component in the list that you want to add or edit a slot.

5. Click the Ellipses (...) icon for the component.

6. Select Edit code from the menu options. 

   The system opens the code Editor for the component and displays the Preview and Component data panels on the right.

7. In the Component data panel on the right, locate the Slots tab.

Adding a slot

To add a slot:

1. Access the Slots tab for the component for which you want to create a slot.

2. Click + Add.

3. Provide the following information for the slot:

   • Slot name: Enter a unique name for the slot.

   • Example HTML/JSX value: Enter the code that determines how the slot content renders by default.

4. (Optional) Click + Add to add additional slots.

Editing existing slots

Site builders and developers expand the layout capabilities of components already placed on pages. You can evolve these components while they remain in use across a site. The system manages the transition of existing content to the new component definitions to ensure data integrity and provide flexibility.

When editing slots within a component that is already in use, you can perform the following actions:

• Add new slots: Add new slots to existing components without re-creating them. Existing instances on your site continue to function. The new layout region displays the next time a content creator edits that specific component.

• Update values: Update the default or example values for slots.

• Delete slots: Remove layout regions that are no longer needed.

However, to prevent layout breaks and preserve data integrity, there is a strict limitation. After you add a component to the library, you cannot perform the following action on an existing slot:

• Change the Slot name.

To achieve a name change, you must delete the existing slot and create a new slot with the desired name. The system treats renaming a slot as a deletion of the old name and an addition of a new name. This action causes any child components stored in the original slot to be hidden.

To edit slots on components that are already in use across your site:

1. Access the Slots tab for the component for which you want to edit the slot.

2. Edit the slot as needed.

3. Publish the changes.

To relocate a slot:

1. Click and hold the Drag handle icon of the slot you want to relocate. 

   The system displays the hand icon.

2. Drag and drop the slot in the new location in the slots list.

3. Publish the changes.

Deleting a slot

If a slot is no longer needed, you can remove it from the code component. After you delete a slot, any child components that were placed in that slot will no longer be visible on the live site or in the Drupal Canvas Editor.

The system retains the deleted data in the background until the page is explicitly saved. If you accidentally delete a slot and hide its child components, you can re-add the slot with the exact same name before you save the page. The system restores the child components so they reappear in their original locations.

To delete a slot:

1. Access the slots that you want to delete.

2. Click the Delete icon associated with the slot. 

   The system deletes the slot.