Web components- specify event handlers as props

by Deepak Anand

HTML

If nothing appeared below, then your browser is not supporting Custom Elements.
<x-checkbox>Check 1</x-checkbox>
<x-checkbox>Check 2</x-checkbox>
<x-checkbox>Check 3</x-checkbox>
<div id = 'messages'>

</div>

CSS

body {
  background: #F7F7F7;
}

x-checkbox {
  margin: 0.5em;
  border-radius: 3px;
  text-align: center;
  background: yellow;
  width: 100px;
  height: 20px;
  display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  font-family: Helvetica, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

JavaScript

// https://github.com/facebook/react/issues/7901#issuecomment-255546486

var messages = document.getElementById('messages')
class XCheckBox extends HTMLElement {
  constructor() {
    // Always call super first in ctor
    super();

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});    
    var check = document.createElement('div');

    // Add the image to the shadow root.
    shadow.appendChild(check);
  }
  
   connectedCallback() {
    messages.innerHTML = `${messages.innerHTML} <br /> connected`;
    this.addEventListener('click', this._onclick);
  }
  disconnectedCallback() {
    this.removeEventListener('click', this._onclick);
  }
  _onclick(e) {
  	messages.innerHTML = `${messages.innerHTML} <br /> ${this.checked} (internal handler)`;
    this.checked = !this.checked;
    this.dispatchEvent(new CustomEvent('checkchanged', {
      detail: { checked: this.checked }, bubbles: false
    }));
  }
  set oncheckchanged(fn) {
    this.removeEventListener('checkchanged', this._oncheckchanged);
    this._oncheckchanged = fn;
    this.addEventListener('checkchanged', this._oncheckchanged);
  }
  get oncheckchanged() {
    return this._oncheckchanged;
  }
  set checked(value) {
    this._checked = value;
    value ? this.setAttribute('checked', '') : this.removeAttribute('checked');
  }
  get checked() {
    return this._checked;
  }
}

// Define the new element
customElements.define('x-checkbox', XCheckBox);
const props = {
  checked: true,
  oncheckchanged: function oncheckchanged(e) {
  	messages.innerHTML = `${messages.innerHTML} <br /> user space event handler `;
    console.log('oncheckchanged called with', e);
  }
};
const customCheckbox = document.createElement('x-checkbox');
// Not sure why, but the oncheckchanged does not get triggered
Object.assign(customCheckbox, props);
console.dir(customCheckbox)