Slot Patrol

Web components are great for their flexibility and versatility. One thing that makes that possible is their ability to have slots. An HTML element allows us to create separate DOM trees and code them together into one element. Below you can see how the element contains both an emoji and a message.

In an element that I have been recently creating, called the learning-card, that has multiple slots. I have to scaffold a banner (header, sub header, icon), a body, an icon and the overall scaffold into one element. You can see a picture of it below.

In the banner render function you can see how the whole banner is defined in a div wrapper. Inside I call the icon and then scaffold in a header wrapper. There are two slots inside that to hold the header and sub header. This is a great example of how slots scaffold inside of a component.

render() {
    return html`
      <div class="banner-wrapper">
        <learning-icon type="${this.icon}"></learning-icon>
        <div class="header-wrapper">
          <slot name="header"></slot>
          <slot name="subheader"></slot>
        </div>
      </div>
    `;
  }

This project is still growing but check out what I've done: https://github.com/TheKodingKrab/project-two. You can also learn about issues I've encountered in many of my other blogposts.