class MyElement extends StacheElement {
		greetings = 'Hello';
                static get view() { return `{{ greetings }}` }
		static get props() {
		}
}
customElements.define('my-element', MyElement);
const el = new MyElement().initialize();
el.on('greeting', (ev, newVal, oldVal) => {
    // it should be observable, handle change here
});
el.greeting = 'Hola';

import { StacheElement } from "can";
class HelloWorld extends StacheElement {
  static view = `Hello {{name}}`;
  static props = {
    name: "world"
  };
}
customElements.define("hello-world", HelloWorld);

class Basic extends StacheElement {
    static view = `
        <in-put inputValue:bind="this.first" handler:from="this.setFirst"></in-put>
        <in-put inputValue:bind="this.last" handler:from="this.setLast"></in-put>
        <p>{{this.fullName}}</p>
    `;
    static props = {
        first: { type: String, default: "Kevin" },
        last: { type: String, default: "McCallister" }
    };
    get fullName() {
        return `${this.first} ${this.last}`;
    }
    setFirst(val) {
        this.first = val;
    }
    setLast(val) {
        this.last = val;
    }
}
customElements.define("basic-app", Basic);