Using the Aurelia <content> element

Question

I'm trying to create a custom element that allows the user to specify the element's content when creating the element, like this:

<custom-element title="Hello">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
</custom-element>

And my custom element essentially looks like this:

<template>
    <div class="my-custom-element">
        <h2 if.bind="title">${title}</h2>
        <content></content>
    </div>
</template>

I've totally guessed at the use of the <content> element and it doesn't work like this it seems. I can't find any documentation on it either. I've seen others use it with a select attribute pointing to a specific element inside the custom element's contents but I want to access everything inside it - not a particular element.

What am I doing wrong?

Answer 1

Aurelia uses <slot> element to render content within custom elements. You can read about it in documentation hub, or take a look at blog post where they explain the reasoning for <slot> elements. Basically, it's a part of Shadow DOM v1 specification and Aurelia team tries to follow the standards wherever possible.

One cool thing with <slot> is that you can have multiple named ones in your custom element, which is explained in post above.

So, your custom element would look something like this:

<template>
    <div class="my-custom-element">
        <h2 if.bind="title">${title}</h2>
        <slot></slot>
    </div>
</template>

Of course, this means that you'll need to use the newer version of Aurelia, since this has been added sometime at the end of May.