Aurelia 自定义元素和内容

Question

我正在阅读this tutorial，我想做类似的事情，但我不想使用我的自定义元素的属性，而是想访问我的自定义元素标签内的内容。我似乎无法弄清楚这一点。所以不是像这样的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>  

这可能吗？

Answer 1

是的，可以使用内容选择器来完成 -

modal-header.html

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

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

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

Aurelia documentation