Aurelia自定义元素和内容

Question

我正在阅读本教程,我想做类似的事情,但我不想使用自定义元素的属性,而是想访问自定义元素标签内的内容.我似乎无法弄清楚这一点.所以代替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

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

莫代尔-了header.html

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

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

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

Aurelia文件