De la Oscuridad a la Luz. Navegando Saludablemente en Tiempos Difíciles

Overview

It can be a somewhat daunting task trying to get a handle on AstroWind internals, and particularly various points of usage.

This page outlines and clarifies some of the techniques found in AstroWind. Use it as a guide for further modification, or an instructional for techniques to use in your own endeavors.

Alternate usage

There’s another way we can use slots, useful particularly when a component can have markdown content is as follows (study carefully…):

That’s pretty concise and a bit of a head-scratcher to read, but basically what it says is that:

1. Given a component that defines a slot:
2. you can reference a slot from a child element of that component and,
3. provide content to the parent component’s slot from the child by naming the slot in the child with a slot="<slot-name>" property assignment, where the slot-name is the parent’s slot.

So, in the example above, the CallToAction component defines the subtitle slot, and the following <Fragment slot=“subtitle”> populates the slot with the following content:

There’s a lot to wrap your head around, here.

Notice first that subtitle is defined as a prop/argument, but it’s being processed as a slot. Interestingly, prop args and slots seem to be somewhat interchangeable: if the subtitle was just a string, it would simply take that assignment. The main difference is that if you render them independently, you have to call the render with an await modifier.