Html 使用aurelia自定义元素作为父元素时，按钮元素不显示

我试图创建一个自定义容器元素来跟踪一些子按钮元素。问题是当我这样做时，按钮不会显示在网页上。我做错了什么？我还尝试使用aurelia@children装饰器在容器视图模型中设置按钮，但这似乎也不起作用。请帮忙

如果我将按钮元素移出主自定义元素，它们就会出现

我的自定义元素视图main.html

<template>   
    <div class="col-sm-9" style="text-align: left;">        
    </div>
</template>

`

app.html

<template>
  <require from="./widgets/main"></require>
  <main>
      <button class="btn btn-default" type="button">On</button>
      <button class="btn btn-default" type="button">Off</button>
  </main>      
</template>

<template>
  <require from="./custom-element"></require>
  <my-custom-element>
      <button class="btn btn-default" type="button">On</button>
      <div>
        This div falls back to &lt;content&gt; since nothing more specific chooses it. <br />
        Notice how it is displayed last b/c of this.<br />
        Remove &lt;content /&gt; element in custom element and this won't be used in the rendering of the custom element.
      </div>
      <div class="footer">Footer</div>
      <button class="btn btn-default" type="button">Off</button>
  </my-custom-element>      
</template>

这个答案已经过时了

请在此处查看Aurelia文档以获取当前答案：

您需要在自定义图元的视图文件中包含该图元。如果只想显示自定义元素内容中的按钮元素，请使用

请注意，这将在Aurelia RC1中更改为使用Shadow DOM规范已更改为的命名插槽标准，尽管目前没有浏览器支持它

下面是一个运行示例：您将注意到我在示例中如何将select属性与css样式选择器一起使用。我还使用不带选择器的content元素来显示它如何作为一个包罗万象的元素

但这很快就会改变。我们现在正在研究slot的实现

app.html

<template>
  <require from="./widgets/main"></require>
  <main>
      <button class="btn btn-default" type="button">On</button>
      <button class="btn btn-default" type="button">Off</button>
  </main>      
</template>

<template>
  <require from="./custom-element"></require>
  <my-custom-element>
      <button class="btn btn-default" type="button">On</button>
      <div>
        This div falls back to &lt;content&gt; since nothing more specific chooses it. <br />
        Notice how it is displayed last b/c of this.<br />
        Remove &lt;content /&gt; element in custom element and this won't be used in the rendering of the custom element.
      </div>
      <div class="footer">Footer</div>
      <button class="btn btn-default" type="button">Off</button>
  </my-custom-element>      
</template>

---

哦，顺便说一句，如果您认为您可能想要使用Aurelia自定义元素作为Web组件自定义元素，那么您应该避免创建名称中没有破折号的自定义元素main没有破折号。

谢谢Ashley。你能看看我是如何使用@children装饰器的吗？我试图让按钮的容器元素在其视图模型中引用这些按钮。我发布的要点实际上记录了子按钮。我是通过绑定回调来完成的。在数据绑定运行之后，子按钮才可用。确定。谢谢我现在正在工作，公司已经封锁了gist网站！除非你能在这里发布主视图模型，否则我必须在家里检查这个gist？gist.run被阻止太糟糕了。我将代码添加到帖子中

import {customElement, children} from 'aurelia-framework';

@customElement('my-custom-element')
export class MyCustomElement {
  @children('button') buttons;
  constructor() {
  }

  bind() {
    console.log(this.buttons);
  }
}