Class Mixins: ControllerHostMixin

Mixin which adds the ReactiveController interface to your element. You can use this to render updates from your controllers by implementing an update method that calls super.update().

import { ControllerHostMixin } from '@apollo-elements/mixins/controller-host-mixin';
import { MouseController } from './mouse-controller.js';
const template = document.createElement('template');
      template.innerHTML = `
        <link rel="stylesheet" href="mouse-host.css">
        <h3>The mouse is at:</h3>
        <dl>
          <dt>x</dt> <dd><output id="x"></output></dd>
          <dt>y</dt> <dd><output id="y"></output></dd>
        </dl>
      `;

customElements.define('mouse-host', class MouseHost extends ControllerHostMixin(HTMLElement) {
  mouse = new MouseController(this);

  $ = x => this.shadowRoot.querySelector(x);

  constructor() {
    super()
    this
      .attachShadow({ mode: 'open' })
      .append(template.content.cloneNode(true));
  }

  update() {
    const { x, y } = this.mouse.pos;
    const { clientWidth, clientHeight } = document.documentElement;
    this.$('#x').textContent = x;
    this.$('#y').textContent = y;
    this.style.setProperty('--hue', (x / clientWidth) * 250);
    this.style.setProperty('--saturation', `${(y / clientHeight) * 100}%`);
    super.update();
  }
});

Exports

import { ControllerHostMixin } from '@apollo-elements/mixins/controller-host-mixin';