Aurelia Custom Elements and Content

Question

I read this tutorial and I want to do something similar, but instead of using the attributes of my custom elements, I will like to access the content inside my custom element tags. I can not understand this. So instead of html it looks like this:

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

I want it to look like this:

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

Is it possible?

Answer 1

Yes, what can be done with Content Selectors -

modal-header.html

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

You can be more specific by specifying which content should match using any standard CSS selector -

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

Aurelia Documentation