DEV Community

Liam Kirkland
Liam Kirkland

Posted on

Slots in Custom Web Components

During development of any custom web component, slots can be extremely useful. Slots allow for use to pass in HTML into different parts of our card.

Below we see the cards we are trying to replicate.
Card Example

Slots are ultimately useful in structuring a custom element. While our group is still trying to fully utilize slots in our component, we see the benefits of the structure they provide. We are on our way to properly using slots to their fullest.

render() {
    return html`

    <div class="cardWhole">
      <div class="cardHeader">
        <slot name="top-header"></slot>
        <slot name="bottom-header></slot>
      </div>
      <div class="cardBody">
        <p> content body </p>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>
    `;
  }
Enter fullscreen mode Exit fullscreen mode

Our Github Repo

Discussion (2)

Collapse
shikkaba profile image
shikkaba

I don't understand what this is. Can you give more detail?

Collapse
liftoffstudios profile image
Liftoff Studios

Nice!!