Slot Composition Defined:
Essentially what slot composition is, is when a user passes code through elements. Examples of what this code could be includes things such as a header, icon, et cetera. It essentially is everything and anything that goes within the makings of a card that can be interconnected with each other.
Using Components:
There are different ways in which we can utilize slot composition within the web components we work on.
An example of this is simple as:
<slot name = "Header"><p>None</p></slot>
What this does is, it essentially identifies and uses the naming convention to name the elements that are being passed through the header that you are using.
Example of Slot Composition:
<user-card>
#shadow-root
<div>Name:
>slot name="username"></slow>
</div>
<div>Birthday:
<slot name="birthday"></slot>
</div>
<span slot="username">Jon Smith</span>
<span slot="birthday">01.01.2001</span>
</user-card>
Top comments (0)