---
# System prepended metadata

title: Named Slots
tags: [Projection]

---

# Named Slots

> * 如有錯誤處指正或任何建議，懇請留言，感謝!
> * 搭配 ChatGPT 進行翻譯，請小心服用
> * ▸ ... 為英文原文


:::spoiler ...
In simple cases, projection allows content from the parent component to be projected into the child component. In more complex cases there may be more than one content slot that needs to be projected. Having multiple content slots is achieved by naming them.

### Example

In this example, we have created `<Collapsable>` component that toggles between open and closed states. Currently, when the `<Collapsable>` is closed it shows content that was implemented within `<Collapsable>`. Change that to an additional `<Slot>` to project the `q:slot="closed"` content from the parent instead.

Unprojected Slots
-----------------

We have added console statements to show when individual components re-render. Notice that the `<App>` component never re-renders on the client. Also notice that the `<Collapsable>` projects only one content at a time. This means that when `<App>` renders on the server it has to produce both default as well as `closed` content that Qwik must serialize. The benefit is that when `<Collapsable>` toggles between open and closed states, it does not need to re-render the `<App>` component to recover the content that was projected into it.

::: 



###### tags: `Projection`