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 SeamlessButton
  • control-icon: any of the icons shown in the control buttons
  • next-button: the button that navigates to the next item
  • next-icon: icon for the next button
  • paused-icon: icon shown when the element is paused
  • playing-icon: icon shown when the element is playing
  • previous-button: the button that navigates to the previous item
  • previous-icon: icon for the previous button

Used by class SlideshowWithPlayControls.

controlButtonPartType property

The class, tag, or template used to create the control-button parts – 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