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?
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.