Aurelia - Vanilla WC

app.html

<template>
  <style>greeting-test { display: block; padding: 5px; background: deepskyblue; margin-bottom: 5px; }</style>
  <greeting-test message='Hello World'></greeting-test>
  <greeting-test message.bind='message'></greeting-test>
  
  <input value.bind='message' />
  
  <hr/>
  Message 2 two-way binding
  <greeting-test message.two-way='message2'></greeting-test>
  <input value.bind='message2'/>
</template>

app.js

import './greeting-test';

export class App {
  message = 'Hello World'
  message2 = 'Bonjour'
}

greeting-test.js

// This is to help extend HTML Element since gist used built-in extend of babel
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var _fixBabelExtend = function (O) {
  var gOPD = O.getOwnPropertyDescriptor,
      gPO = O.getPrototypeOf || function (o) {
    return o.__proto__;
  },
      sPO = O.setPrototypeOf || function (o, p) {
    o.__proto__ = p;
    return o;
  },
      construct = typeof Reflect === 'object' ? Reflect.construct : function (Parent, args, Class) {
    var Constructor,
        a = [null];
    a.push.apply(a, args);
    Constructor = Parent.bind.apply(Parent, a);
    return sPO(new Constructor(), Class.prototype);
  };

  return function fixBabelExtend(Class) {
    var Parent = gPO(Class);
    return sPO(Class, sPO(function Super() {
      return construct(Parent, arguments, gPO(this).constructor);
    }, Parent));
  };
}(Object);

let GreetingTestWc = _fixBabelExtend(function (_HTMLElement) {
  _inherits(GreetingTestWc, _HTMLElement);

  function GreetingTestWc() {
    _classCallCheck(this, GreetingTestWc);

    const _this = _possibleConstructorReturn(this, (GreetingTestWc.__proto__ || Object.getPrototypeOf(GreetingTestWc)).apply(this, arguments));
    const button = _this.appendChild(document.createElement('button'));
    const messageHolder = _this._messageHolder = _this.appendChild(document.createElement('div'));
    
    button.textContent = 'Set message to random number';
    button.onclick = function() {
      _this.setAttribute('message', Math.floor(Math.random() * 10000));
    }
    return _this;
  }
  
  GreetingTestWc.observedAttributes = ['message']

  _createClass(GreetingTestWc, [{
    key: 'attributeChangedCallback',
    value: function(name, prev, curr) {
      const currentValue = this[name];
      if (currentValue === curr) {
        return;
      }
      this[name] = curr;
    }
  }, {
    key: 'message',
    set: function(val) {
      val = String(val) || 'No message';
      this._message = val;
      this._messageHolder.textContent = val;
      this.setAttribute('message', val);
    },
    get: function() {
      return this._message || '';
    }
  }]);

  return GreetingTestWc;
}(HTMLElement));

customElements.define('greeting-test', GreetingTestWc);

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <style>
      body {
        padding: 20px;
      }
      .form-component {
        display: block;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
    
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>