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 → updates → render DOM → post-render

Expects the component to provide:

Provides the component with:

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


import { PlayControlsMixin, symbols } from 'elix';

class MyElement extends PlayControlsMixin(HTMLElement) {
  get [symbols.template]() {
    return `
      ... Elements outside play controls go here ...
        ... Elements inside play controls go here ...


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


Includes subelement SeamlessButton.

Used by class SlideshowWithPlayControls.

controlButtonTag property

The tag used to create the play control buttons.

Type: string

Default: 'elix-seamless-button'

inject(template) method

Add the play controls to a template.

  • template: stringthe inner template placed inside the play controls container