DEV Community 👩‍💻👨‍💻

Pooja DebRoy
Pooja DebRoy

Posted on

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>
    `;
  }
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Dream Big


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category.

Join the Hackathon <-