Slot Composition

We used slots when creating our learning cards for project 2. One example of slotting we used is the content for the card getting passed through our frame and into our scaffold of our final card. Here is a code snippet of the slots we used for our card:

render() {
    return html`
      <card-frame>
        <card-header slot="banner" type="${this.type}">
          <h1
            slot="header"
            aria-label="Main header"
            style="font-family: 'Open Sans', sans-serif; font-weight: 300;"
          >
            <slot name="header">${this.heading}</slot>
          </h1>
          <h2
            slot="subheader"
            aria-label="Sub Header"
            style='font-family: "Open Sans", sans-serif; font-weight: 500;'
          >
            <slot name="subheader">${this.subheading}</slot>
          </h2>
        </card-header>
        <toggle-content
          style="margin-right: 5em; min-height: 40px; display: flex;"
          slot="content"
        >
          <slot></slot>
        </toggle-content>
      </card-frame>
    `;
  }

As you can see, there are slots allocated for the header, sub-header, as well as content. Each slot contains the font, font weight, and text size depending on the specific portion of the card frame. We used slotting to pass the header, icon, and frame with content to the final card.

Here is a link to our repo for LearningCard: https://github.com/pvd5206/penstat-project2

Week 9 blog post 8