01

Here's a simple scaffold for the motion-carousel element, with the styling separated into a module to make things more readable. <motion-carousel> is used in index.html and is populated with a set of images.

The first task is to setup some basic DOM and styling for the carousel. You may notice that the images inside the element are not visible. This is because the element's Shadow DOM is displayed instead, and there is no slot element. Check out the docs for more information about how slots work.

Add a slot:

<div class="fit">
  <slot></slot>
</div>

And magically, the element content appears. Now the element needs some basic styling so the items fit inside it.

Open the styles module and add the styling below:

styles

:host {
  display: inline-block;
  overflow: hidden;
  position: relative;
  /* Defaults */
  width: 200px;
  height: 200px;
  border-radius: 4px;
  background: gainsboro;
  cursor: pointer;
}

.fit {
  position: relative;
  height: 100%;
  width: 100%;
}

::slotted(*) {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

Since the carousel is in charge of displaying the selected item and managing its appearance, it's easiest to require it to have an explicit size. This way, you can ensure the items are contained inside the carousel. That's done with overflow of hidden. The items are explicitly sized to 100% so they fit inside the carousel.

Notice the Shadow DOM css selectors: :host to style the element itself and ::slotted(*) to style all the slotted children.

The properties in the :host selector are effectively defaults for the element and it's important to remember that the user can override them to customize the appearance.

{% aside "info" "no-header" %}

Learn more about theming, styling, and the :host and and :slotted selectors in the Lit documentation.

{% endaside %}