Special components

The hierarchy of components is very powerful but has limitations. We have seen how we can apply the dependency injection pattern to solve one of those, but there are other cases where we need a bit more flexibility, reusability, or power to share code or templates, or even move a component that’s rendering outside the hierarchy.

Slots, slots, and more slots...

Through the use of props, our component can receive JavaScript data. With analog reasoning, it is also possible to pass template fragments (HTML, JSX, and so on) into specific parts of a component’s template using placeholders called slots. Just like props, they accept several types of syntax. Let’s start with the most basic: the default slot.

Let’s assume we have a component named MyMenuBar that acts as a placeholder for a top menu. We want the parent component to populate the options in the same way that we use a common HTML tag such as header or div, like this:

Parent...