基本的自定义元素似乎不起作用

我正在尝试为我的Aurelia应用程序创建一个标准的用户状态小部件，但不确定自己做错了什么。首先，我遵循了docs，但是我的结果却不是他们告诉我的期望，并且在构建和浏览器中都没有出现错误。

相关文件如下：

<!-- nav-bar.html -->
<template bindable='router'>
  <require from="./user-status "></require>
  <!-- various nav buttons -->
  <p class="navbar-collapse collapse navbar-text">
        Test <user-status></user-status>
      </p>

user-status.html

<template>
  ${status}
</template>

user-status.js

export default class UserStatusCustomElement {
      constructor() {
        this.status = 'Be sure to drink your Ovaltine!';
      }
    }

如果我更改require innav-bar.html来查找./user-status.html它似乎有效果（在呈现的html中将另外的看起来像aurelia的属性添加到user-status元素中）但不呈现该消息（一个假设b / c表示没有接听）类和呈现为html唯一的东西）。如果我保持原样，它不会出错，但是不会添加那些属性，并且不会呈现任何内容，即使是静态文本也是如此。