Nested Custom Elements in Aurelia not rendering as expected

Question

I have a custom element that defines a general purpose UI widget frame with various bindable default options, a template part for adding some additional 'toolbar' options and general-purpose <content /> for the body.

I then have another custom element for some administrative functionality. The latter element should present itself as a widget, and it too has various template parts.

However, if I try to embed the former widget element into the latter administrative element none of the content gets rendered.

Here's a simplified example:

eg-block (Widget) element

<template>
  <div style="padding: 10px; background-color: #bbffff">
    <content></content>
  </div>
</template>

eg-list (Admin) element

<template>
  <require from="./eg-block"></require>
  <eg-block>
    <div>Start of List</div>
    <content></content>
    <template replaceable part="list-part">Default List Part</template>
    <div>End of List</div>
  </eg-block>
</template>

Containing Page

<template>
  <require from="./eg-list"></require>
  <eg-list>
    <template replace-part="list-part">Replaced List Part content</template>
    <div>Replaced regular content</div>
  </eg-list>
</template>

I was hoping the results of that to be:

<div style="padding: 10px; background-color: #bbffff">
  <div>Start of List</div>
  <div>Replaced regular content</div>
  <div>Replaced List Part content</div>
  <div>End of List</div>
</div>

But instead it gives me:

<div style="padding: 10px; background-color: #bbffff">
  <div>Start of List</div>
  <div>End of List</div>
  <div>Default List Part</div>
</div>

So it doesn't render the list's content or replaced template part that is specified in the containing page. But additionally, the default content of the list's template part is actually rendered after the list.

Is this the expected behaviour? And if so, is there any way to retain the use of the widget/block element within the admin/list element but to have it render the way I was hoping?

Ashley Grant Ashley Grant · Accepted Answer · 2016-05-23T19:13:36

I'm mostly copy/pasting my answer from this question here, but here goes:

Let me preface this answer by saying that content projection is changing completely (and for the better) in Aurelia RC1. We are moving to slot based content projection to match up with the newest version of the shadow DOM specs. This spec is much more powerful than the selector based setup that Aurelia has current (which is based on an earlier version of the Shadow DOM spec). This is the only breaking change we have planned between now and the full 1.0 of Aurelia.

So everything I'm telling you will be obsolete very soon.

In the meantime, the element in your custom element view needs to be at the root of the template. As to the why Aurelia is acting this way, well it's a bug:-) It has been fixed in the new implementation.

We just released a blog post regarding the new slot implementation, if you'd like to see how things will work.

Nested Custom Elements in Aurelia not rendering as expected

1 Answers