Slot Configuration

One of the handy features of LWC Garden is the ability to fill your slots while you are building.

This can be configured in two different places:

1. Global garden.config.js file
2. Component level garden.config.js file

Note

Component level config always takes priority over global config.

Global Configuration

/**
 * @type {import('@lwc-garden/core/types').GardenConfig}
 */
export default {
  placeholder: true,
  slots: {
    default: () => import('example/button'),
    slot1: () => import('example/clock'),
    slot2: () => import('example/button'),
  },
}

Read more on the Configuration Page

Component Configuration

/**
 * @type {import('@lwc-garden/core/types').GardenComponentModule}
 */
export default {
  name: 'Slot Component Example',
  slotComponents: {
    default: () => import('example/button'),
    slot1: () => import('example/clock'),
    slot2: () => import('example/button'),
  },
}

Read more on the Component Configuration Page