Example custom card for the experimental UI in Home Assistant 0.72

experimental-ui.yaml

views:
- name: Example
  cards:
  - type: 'custom:my-element'
    entity_id: input_boolean.switch_ac_kitchen

my-element.js

class CustomCard extends HTMLElement {
  constructor() {
    super();
    this.config = null;
    this._hass = null;
    this._connected = false;
  }

  // Called when the element is connected to the DOM.
  // We assume that both hass and config properties have been set.
  connectedCallback() {
    this._connected = true;
    this.innerHTML = `
      <div style='background-color: lightsalmon; padding: 8px;'>
        ${this.config.entity_id}
        <input type='checkbox'>
      </div>
    `;
    this._checkbox = this.querySelector('input');
    this._checkbox.addEventListener('change', () =>
      this._hass.callService('homeassistant', 'toggle', { entity_id: this.config.entity_id }));
    this._render();
  }

  getCardSize() {
    return 1;
  }

  set hass(value) {
    this._hass = value;

    if (this._connected) {
      this._render();
    }
  }

  _render() {
    const state = this._hass.states[this.config.entity_id];
    this._checkbox.checked = state.state === 'on';
  }
}

customElements.define('my-element', CustomCard);