Webcomponents in Aurelia

Help Requests
4

Here is what I tried to do with a aurelia-cli (requirejs) app:

components/test-custom.html

<script>
class TestCustom extends HTMLElement {
  static get observedAttributes() {return ['message']; }

  get message() {
    return this._message;
  }

  set message(message) {
    this._message = message;
    this.render();
  }

  constructor() {
    super();
    this.shadowDOM = this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(attributeName, oldValue, newValue, namespace) {
    console.log(attributeName, newValue);
    this[attributeName] = newValue;
    this.render();
  }

  render() {
    this.shadowDOM.innerHTML = `
    <div style="background: red">
      <p>Hello ${this._message || ''}</p>
      <p><slot></slot></p>
    </div>
    `;
  }
}
customElements.define('test-custom', TestCustom);
</script>

app.html

<template>
<link
  rel="import"
  href="components/test-custom.html">
<input
  value.bind="message">
<test-custom
  message.bind="message">Pwet</test-custom>
</template>

The component is rendered, but the message attribute is never changed (attributeChangedCallback method is not called when changing message value from the input.