Aurelia Custom Elements & Content

4
votes

I was reading through this tutorial and I want to do something similar, but instead of using attributes of my custom elements, I'll like to access the content inside of my custom element tags. I can't seem to figure this out. So instead of html looking 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 more like this:

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

Is this possible?

1
aurelia

1 Answers

5
votes

Yes that can be accomplished with Content Selectors -

modal-header.html

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

You can be more specific as well by specifying what content to match using any standard CSS selector - 

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

Aurelia documentation