class MyComponent extends ko.Component {
  /**
   * The ko.Component extends the LifeCycle
   */
  constructor ({x, y, message}) {
    super()
    Object.assign(this, {x, y, message})
    this.z = this.computed('computeZ')
  }
  
  /**
   * Return the custom element name for this component
   */
  static get elementName () {
    return 'my-component' // In DOM as <my-component>
  }
  
  /**
   * Use `element` to return:
   *  1. a DOM node ID or a 
   *  2. DOM node.
   */
  static get element () {
    return 'myc-template'
  }
  
  /**
   * Overload `static get template` to minic the Knockout
   * `template` parameter to view registration.
   */
  // static get template () { return '<div>...</div>' }
  
  /**
   * Return true when a component should be loaded
   * synchronously; false otherwise.
   */
  static get sync () {
    return true
  }
  
  /**
   * Return a binding handlers local to this
   * (or falsy if not found).
   */
  getBindingHandler (bindingKey) {
    return {
      upperCase (element, valueAccessor) {
        return element.innerText = valueAccessor().toUpperCase()
      }
    }[bindingKey]
  }
  
  computeZ() {
    return this.x * this.y
  }
}

MyComponent.register(/* custom-name */)

ko.applyBindings({})