Slot Composition

Project Updates:

Recently I have been working on a project that contains card components like headers, sub-headers, body and more. The image below is the format I am following to design my card's components:

What is "Slot Composition"?

So what really is a slot component...? Well, in simpler words, a slot composition is when a user passes code through multiple elements. This can be a header, body, icon, etc. It is anything that goes into the content of the card and then can be scaffolded together.
<Slot> is an HTML element that works as a placeholder for inside a web component that you had created. Within the component, <Slot> enables you to fill that component with your own markups.

Applying <slot> Components

There are various different ways to apply slot composition into your web components. It may sounds tricky but it is very simple concept, for example:

<slot name = "Header"><p>None</p></slot>

This line of code names your elements that are being basses through your header consisted within your Header. This is also an example of a "named slot" because it gives an attributed name for the element.

To keep our project design as simple as possible, I will use the <slot> attributes to pass any of our HTML into our header, sub header and body. To pass the HTML into our slots, we have must name our attributes by saying slot = body or slot = header to pass the code through to our main card.
A good example of how to use the tag in your code is shown below:

Overall slot tags are really useful when creating web components. If you want to follow up on my current project it is posted on my Github