In a recent post I discussed a card project I am working on. (shown below)
To recap this card is made up of four components:
- icon
- banner
- scaffold
- card
For this project my group and I are utilizing the slot tag to make out card more dynamic and flexible. The slot tag acts a placeholder in web components that you can then populate with any mark up you would like. This allows for flexibility when creating different web components.
To do this we give the slot a name attribute. We later then can use that name to determine where to put that HTML.
Our approach is to import the icon into the banner and slot in it to the render function, as well as the main header and sub header. This will allow the program to easily fill the banner with the correct header, sub header, and icon for that specific card.
For scaffold we are importing the banner and slotting the banner, icon, and content that will be in the body of the card (below the banner)
Here is my team's repo if you want to look more in depth on how we used the slot tag and our team's progress.
Top comments (0)