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


By default, this uses these elements in the following roles:

Used by class SlideshowWithPlayControls.

controlButtonRole property

The class, tag, or template used for the play control buttons.

Type: (component class constructor)|HTMLTemplateElement|string

Default: SeamlessButton

wrap(original) method

Destructively wrap a node with elements for play controls.


  • original: Nodethe element that should be wrapped by play controls