Aurelia Custom Elements＆amp;内容

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

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

模态-header.html中

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

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

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

Aurelia documentation