Aurelia 奥雷利亚定制元素&；内容

我正在通读，我想做一些类似的事情，但是我不想使用自定义元素的属性，而是想访问自定义元素标记中的内容。我似乎无法理解这一点。因此，与如下所示的html不同：

<modal>  
  <modal-header title="Edit Person"></modal-header>
  <modal-body content="person-information"></modal-body>
  <modal-footer buttons.bind="['Cancel']"></modal-footer>
</modal>  

<modal>  
  <modal-header>Edit Person</modal-header>
  <modal-body>
      <form>...</form>
  </modal-body>
  <modal-footer buttons.bind="['Cancel']"></modal-footer>
</modal>  

我希望它看起来更像这样：

<modal>  
  <modal-header title="Edit Person"></modal-header>
  <modal-body content="person-information"></modal-body>
  <modal-footer buttons.bind="['Cancel']"></modal-footer>
</modal>  

<modal>  
  <modal-header>Edit Person</modal-header>
  <modal-body>
      <form>...</form>
  </modal-body>
  <modal-footer buttons.bind="['Cancel']"></modal-footer>
</modal>  

编辑人
...

---

这可能吗？

是的，可以通过内容选择器来实现-

modal-header.html

<template>
  <slot></slot>
</template>

通过使用任何标准CSS选择器指定要匹配的内容，您也可以变得更具体-

<template>
  <slot="form"></slot>
  <slot select=".form-element"></slot>
</template>

---

我不确定我做错了什么，但是

这是我的内容

，

最后为我提供了一个空div:/注意，

标记在Aurelia的第1版中已被

标记替换，这是根据对Shadow DOM规范的最新更改。当然，欢迎你，否则我会努力的