Mixin which lets a component treats the elements assigned to its default slot as items. This is simply a combination of ContentItemsMixin and SlotContentMixin.


Built with mixins ContentItemsMixin and SlotContentMixin.

Used by classes Carousel, CarouselSlideshow, CarouselWithThumbnails, CenteredStrip, CenteredStripHighlight, CenteredStripOpacity, CrossfadeStage, Explorer, ListBox, ListExplorer, Modes, Slideshow, SlideshowWithPlayControls, SlidingPages, SlidingStage, TabStrip, and Tabs.

itemCalcs(item, index) method

Returns a set of calculations about the given item that can be derived from the component's current state.

The goal of the itemCalcs step is to ensure that all mixins/classes use a consistent definition for facts about an item that can be derived from component state. By default, itemCalcs includes a member index containing the index of the indicated item. Other mixins/classes can extend the result of itemCalcs to include additional facts.

For example, the SingleSelectionMixin tracks selection at the component level through a state member state.selectedIndex. When rendering a specific item, a component generally wants to know, "Is this specific item the one which is selected?". SingleSelectionMixin does this with a defintion for itemCalcs that looks like this:

itemCalcs(item, index) {
  const base = super.itemCalcs ? super.itemCalcs(item, index) : null;
  return Object.assign({}, base, {
    selected: index === this.selectedIndex

This ensures that any other aspect of the component that wants to inspect the selected state of a given item uses a consistent definition for selection.

  • item: Elementthe item being considered
  • index: numberthe item's position in the list

Defined by ContentItemsMixin

items property

The current set of items drawn from the element's current state.

Defined by ContentItemsMixin

itemUpdates(item, calcs, original) method

Determine what updates should be applied to an item to reflect the current state, using the format defined by the updates helpers.

By default, this returns an empty object. You should override this method (or use mixins that override this method) to indicate what updates should be applied to the given item during rendering.

Example: AriaListMixin uses code similar to the following to have an item's aria-selected attribute reflect its selection state:

itemUpdates(item, calcs, original) {
  const base = super.itemUpdates ? super.itemUpdates(item, calcs, original) : {};
  return merge(base, {
    attributes: {
      'aria-selected': calcs.selected

This code fragment is intended for use with SingleSelectionMixin, which provides the calcs.selected member.

  • item: Elementthe item to be updated
  • calcs: objectper-item calculations derived from element state
  • original: objectthe item's original HTML attributes, classes, and style

Returns: object the DOM updates that should be applied to the item

Defined by ContentItemsMixin