Adds buttons for managing playback of a slideshow, audio, etc


Purpose: adds buttons for managing playback of a slideshow, audio playlist, etc.

This mixin does most of its work at the beginning of the Elix render pipeline, although it also participates indirectly in rendering by adding elements to a component's template.

eventsmethods → setState → render DOM → post-render

Expects the component to provide:

Provides the component with:

  • wrap method that wraps a string template with the elements for the play controls.


import { PlayControlsMixin, internal, template } from "elix";

class MyElement extends PlayControlsMixin(HTMLElement) {
  get [internal.template]() {
    const result = template.html`
      <div id="container">
    // Wrap the indicated container with play controls.
    const container = result.content.querySelector("#container");
    return result;


SlideshowWithPlayControls uses this mixin for its play controls:

Mountain lake Terraced farm Winter trees Forest river Red panda
Demo: Play controls let the user go back, pause/resume, or forward


The element defines the following shadow parts:

  • control-button: any of the buttons that control playback, default type is Button
  • next-button: the button that navigates to the next item
  • play-button: the button that starts or pauses playback
  • previous-button: the button that navigates to the previous item

Used by classes PlainSlideshowWithPlayControls and SlideshowWithPlayControls.

controlButtonPartType property

The class or tag used to create the control-button parts – the play control buttons.

Type: (component class constructor)|HTMLTemplateElement|string

Default: Button

wrap(target) method

Destructively wrap a node with elements for play controls.


  • target: Elementthe element that should be wrapped by play controls