Basic Projection

Projection is a way of passing content to a child component that in turn controls where the content is rendered. Projection is a collaboration between the parent and child component. The parent component decides what is the content that needs to be rendered, while the child component decides where and if the content should be rendered.

In our example, the content of the <Panel> element (inside the <App>) is the content that needs to be projected. The <Panel> component wraps the content in a <div> tag and should project it using the <Slot> element.

Why <Slot>?

Why is Qwik opting to use <Slot> rather than children property? The use of <Slot> is a strategic choice to enable the rendering of components out of order. (Meaning that a component should be capable of re-rendering even if the parent component is not yet resumed.) There are two issues with using children in Qwik.

1. In order for Qwik to use the children property for projection, it would need to be serializable like all other values that get passed between components in Qwik.
2. A child component could modify the contents of the children before inserting it into the render tree. This would prevent the parent component from rendering independently from the child. If a child were to modify the children, it would need to do so every time the parent component updates the value of children.

For Qwik, the <Slot> approach is preferable because it declaratively controls the content and location of the projection. This allows the parent component to change the projection content, without forcing the child component to re-render.

Example

Change the <Panel> component to project the <App> content using the <Slot> element.

Notice that both <App> and <Panel> are not re-rendered on button click. This is because the reactivity graph is built on the server and serialized into the HTML, so Qwik knows what to update without needing to download and re-render the templates of <App> and <Panel>.

Next: Named Slots

Edit Tutorial