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