# Nested & dynamic custom element composition

**URL:** <https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231>\
**Category:** vNext\
**Created:** [May 31, 2021, 8:04am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231 "2021-05-31T08:04:12Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sjarvela](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjarvela/32/2145_2.png) [@sjarvela](https://discourse.aurelia.io/u/sjarvela)\
**Post date:** [May 31, 2021, 8:04am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/1 "2021-05-31T08:04:12Z")

</div>

I’ve followed v2 since the beginning, and after alpha release have tried porting an application from v1, but haven’t gone very far because haven’t been able to make some very basic stuff working with custom elements.

1. Using custom elements inside another custom element

Dumber gist: [Dumber Gist](https://gist.dumber.app/?gist=493140737f85dc02f8d62e73ce78a76a)

If there are two custom elements, both can be used separately, but it seems using custom element inside another custom element does not work. In the example, “custom element A” is rendered when used in top level, but not if used inside “custom element B”.

1. Using au-compose

Dumber gist: [Dumber Gist](https://gist.dumber.app/?gist=fcc5ad30922a91aba364677161f3ce33)

In the example, there are 3 items which can be selected by clicking a button, and it is supposed to render associated custom element whenever an item is selected. Two things that don’t seem to work

- I cannot pass/bind attributes which would be visible inside the custom element. In the example, au-compose has “model.bind” but this is not visible in the component, rendering “with model: undefined”
- Whenever actual component class changes (items A/B → C or vice versa), the au-compose DOM element is not updated but instead a new one is added.

I’ve gone through issues in Github, but haven’t found ones that would cover these. Is there something I have missed in the way these should be implemented?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [June 2, 2021, 6:44am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/2 "2021-06-02T06:44:25Z")

</div>

The 2nd example worked in our first few versions of `<au-compose/>`, though after a few refactoring, it lagged behind a bit since we need to come up with a way to address the old usage of v1 `<compose/>`. Dynamic composition got some hiccups for now, will be fixed.  
For the first example, the convention plugin is not working as intended, as deleting the decorator code in `custom-element-b` works [https://gist.dumber.app/?gist=b0803983cdb504a8d96e2fa9364d5ab6](https://gist.dumber.app/?gist=b0803983cdb504a8d96e2fa9364d5ab6)

Thanks for the 2nd example, it reminds that we still need to finish the port of v1 compose

---

<div class="post-metadata">

**Author:** ![stefan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stefan/32/1162_2.png) [@stefan](https://discourse.aurelia.io/u/stefan)\
**Post date:** [June 2, 2021, 8:38am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/3 "2021-06-02T08:38:51Z")

</div>

Do I understand you correctly: if the customElement decorator is used, the import tag inside the template is ignored?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [June 2, 2021, 8:51am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/4 "2021-06-02T08:51:14Z")

</div>

It shouldn’t be ignored, should be more of “not recognized correctly”.  
cc @huochunpeng

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [June 2, 2021, 11:58am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/5 "2021-06-02T11:58:41Z")

</div>

There is nothing wrong with the conventions. Please do not write manual decorator unless necessary. The misunderstanding of the behaviour comes from an assumption that the Aurelia 2 html module behaves same as Aurelia 1 html module, which is not the case.

When you write manually, the `template` you imported is a string.

```auto
import template from "./custom-element-b.html";
@customElement({ name: "custom-element-b", template })

```

Which is

```auto
<import from="./custom-element-a"></import>
<!-- the line above is translated as another esm module named export,
NOT in the template string -->

<!-- template string only contains content below -->
<div style="border: 1px solid blue">
  <div style="color: blue">This is custom element B</div>

  <span>And here should be custom element A:</span>
  <custom-element-a></custom-element-a>
  <span>(but it is not rendered)</span>
</div>

```

The fix is very simple, never write decorator manually, unless you fully understand its behaviour.  
Just write the custom-element-b.js plainly like following (do the same for other custom elements too).

```auto
export class CustomElementB {
}

```

**More details**  
When you write custom element plainly, the Aurelia 2 conventions will fill up the boilerplate decorator as following:

```auto
import * as __au2ViewDef from './custom-element-b.html';
import { customElement } from '@aurelia/runtime-html';
@customElement(__au2ViewDef)
export class CustomElementB {
}

```

Note it imports the full namespace (`import * as __au2ViewDef`) from the html module, NOT just the default export (which is only a string containing the html part, not the meta data parts).

For reference, the custom-element-b.html is transpiled at **compile time** (this is very different from Aurelia 1 which does parsing template at app running time) to following code:  
Note the `export default template` which was what you imported manually.

```auto
import { CustomElement } from '@aurelia/runtime-html';
import * as d0 from "./custom-element-a";
export const name = "custom-element-b";
export const template = "\n\n<div style=\"border: 1px solid blue\">\n <div style=\"color: blue\">This is custom element B</div>\n\n <span>And here should be custom element A:</span>\n <custom-element-a></custom-element-a>\n <span>(but it is not rendered)</span>\n</div>\n";
export default template;
export const dependencies = [d0];
let _e;
export function register(container) {
  if (!_e) {
    _e = CustomElement.define({ name, template, dependencies });
  }
  container.register(_e);
}

```

In contrast, Aurelia 1 html module is the plain string of the original html file content. All the magic is done by Aurelia 1 at runtime, which includes finding dependencies, and also figures out the element name itself. Aurelia 1 parses the full html string at runtime for those magic. This runtime behaviour is exactly why we need such a big webpack plugin to teach webpack about Aurelia 1’s runtime behaviour (so that webpack knows how to find dependencies at compile time).

Aurelia 2 runtime engine is much simpler, we do all the magic in compile time. That’s why the compiled html file module is much more than such that plain string.

---

<div class="post-metadata">

**Author:** ![stefan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stefan/32/1162_2.png) [@stefan](https://discourse.aurelia.io/u/stefan)\
**Post date:** [June 2, 2021, 12:03pm UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/6 "2021-06-02T12:03:53Z")

</div>

Great explication - thanks!

---

<div class="post-metadata">

**Author:** ![sjarvela](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjarvela/32/2145_2.png) [@sjarvela](https://discourse.aurelia.io/u/sjarvela)\
**Post date:** [June 2, 2021, 1:54pm UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/7 "2021-06-02T13:54:22Z")

</div>

Thanks for explanation! I wouldn’t have used the decorator at all, but in the early stages this seemed to be the only way get it working at all, got it somewhere from this forum and never tried it again without.

---

<div class="post-metadata">

**Author:** ![sjarvela](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjarvela/32/2145_2.png) [@sjarvela](https://discourse.aurelia.io/u/sjarvela)\
**Post date:** [September 9, 2021, 12:08pm UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/8 "2021-09-09T12:08:39Z")

</div>

Regarding au-compose, I’m still missing how should I pass data into component with au-compose?

Using the same gist ([Dumber Gist](https://gist.dumber.app/?gist=fcc5ad30922a91aba364677161f3ce33)), it now works in terms of switching the proper component, but I would like to bind some data to the component.

It would be intuitive to use  
`<au-compose view-model.bind="selected.component" name.bind="selected.name" />`  
in order to bind data into property called “name” inside the component, but this does not work.

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [September 9, 2021, 1:06pm UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/9 "2021-09-09T13:06:48Z")

</div>

I am not quite sure if this kind of direct binding is working yet. By now you could catch the model just like in aurelia 1:

In app.html

```auto
<au-compose view-model.bind="selected.component" model.bind="{ name: selected.name}" />

```

And in the custom components

```auto
activate(model) {
    this.name = model?.name;
  }

```

Regards.

---

<div class="post-metadata">

**Author:** ![sjarvela](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjarvela/32/2145_2.png) [@sjarvela](https://discourse.aurelia.io/u/sjarvela)\
**Post date:** [September 9, 2021, 1:31pm UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/10 "2021-09-09T13:31:01Z")

</div>

Yes, that works, thanks!

But it would be nice to know if this is how it is intended, or will there be something like direct binding. I don’t know how that would work with activate lifecycle event, but for me this combination of “view-model.bind” and “model.bind” does seem a bit counter-intuitive.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [October 10, 2021, 3:02am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/11 "2021-10-10T03:02:34Z")

</div>

> combination of “view-model.bind” and “model.bind” does seem a bit counter-intuitive.

Can you expand the comment on the part “the combination looks counter-intuitive”?

> But it would be nice to know if this is how it is intended,

Yes it is a way to update the view model in a dynamic composition: initial and subsequent model update will all invoke the `activate` method with the model object

---

<div class="post-metadata">

**Author:** ![sjarvela](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjarvela/32/2145_2.png) [@sjarvela](https://discourse.aurelia.io/u/sjarvela)\
**Post date:** [October 10, 2021, 3:31pm UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/12 "2021-10-10T15:31:06Z")

</div>

Well, this was quite a dumb mistake on my behalf. In my mind “view-model” was somehow translated as “view and model” (as if the custom element class acted as a model as well, containing the attributes being bound), so having “view-model” and “model” seemed a bit overlapping… but yeah, I did quite soon realize that this of course refers to “view model” in MVVM pattern, and things makes much more sense now. Don’t know how I missed such an obvious thing in the concept…

---

<div class="post-metadata">

**Author:** ![estaylorco](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/estaylorco/32/1887_2.png) [@estaylorco](https://discourse.aurelia.io/u/estaylorco)\
**Post date:** [January 4, 2025, 1:58am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/13 "2025-01-04T01:58:34Z")

</div>

We have a 3.2M LOC application (107 top-level routes, dynamic composition only within each of those routes) that we’re migrating from Aurelia 1.0 to 2.0 (the application actually began back in the days of Durandal, but it was much smaller then). As the first step in the journey, I used `npx makes aurelia` to scaffold a default Aurelia application (the first option).

I’m encountering issues that are discussed in this topic by others (minus the dynamic composition aspect). **To synopsize, use of the `@customElement` decorator prevents the leaking of memory from one route to the next, but sacrifices nested custom elements. Omitting `@customElement` and simply running with conventions as discussed by @huochunpeng brings back nested custom elements, but causes the leaking of memory.**

I can both cause and resolve these issues at will by going back and forth between `@customElement` on each component, and commenting them out. This is true without even using `au-compose`.

**I’m using the nightly build (“dev”) of Aurelia, but the problem exists even in the “latest” build.**

From **main.js** (configured for direct routing):

```auto
import Aurelia from 'aurelia';
import { MyApp } from './my-app';
import { RouterConfiguration } from '@aurelia/router';

Aurelia.register(RouterConfiguration.customize({ useUrlFragmentHash: false }))
    .app(MyApp)
    .start();

```

From **my-app.html** :

```auto
<template>
    <import from="./t1-shell"></import>

    <t1-shell></t1-shell>
</template>

```

From **t1-shell.html** :

```auto
<template>
    <import from="./some-component"></import>
    <import from="./another-component"></import>

    <a load="/some-component">Some Component</a>
    <a load="/another-component">Another Component</a>

    <au-viewport></au-viewport>
</template>

```

There is nothing significant about **another-component.html** , but **some-component.html** sports a nested custom element, like so:

```auto
<template>
    <import from="./nested-component"></import>

    <div class="some-component">We're in some component!</div>
    <nested-component></nested-component>
</template>

```

**SCENARIO 1: Using `@customElement` on each component:**

![Decorator @customElement present](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/3/3f5f0f8ddd55ececee557149571d15b6c313d8ac.gif)

You can see above when I navigate to the `some-component` route, `nested-component` does not show up. Note the heap snapshots:

![Heap snapshots with @customElement present](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/c/c59679fe6e8cf0e4ed507523276ec0423a043735.gif)

Off to the left (offscreen), I’m going to each route, and then making sure the previous route doesn’t show up in the snapshot.

So, then, with the decorator present, we don’t leak. Consider the next scenario.

**SCENARIO 2: Commenting out `@customElement`**

![Decorator commented out (conventional approach)](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/2/2cc8961219fab38035962087817f80b6eaeb1f5e.gif)

You can see above the nested custom element when I navigate to `some-component`. However, take a look at the heap snapshots:

![Heap snapshots (no decorator)](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/8/8355996739496956230fcbb3ee5b3dee22ec6fc0.gif)

So, then, without the decorator, the nested component is present, but we leak from route to route.

(Just to clarify, when I typed in the component name to check the heap, I was typing in the component _I navigated away from_).

**CONCLUSION**

This seems like a bug to me (or perhaps I’m missing something). The same is true if I use dynamic composition. But I thought that for the sake of this post, I would keep it simple.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [January 4, 2025, 2:30am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/14 "2025-01-04T02:30:54Z")

</div>

You can try router-lite (which is closer to au1) to see if it does not leak.

---

<div class="post-metadata">

**Author:** ![estaylorco](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/estaylorco/32/1887_2.png) [@estaylorco](https://discourse.aurelia.io/u/estaylorco)\
**Post date:** [January 4, 2025, 2:55am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/15 "2025-01-04T02:55:41Z")

</div>

No difference: the scenarios I gave in my post play out the same way.

I would say that this is definitely a bug, and a rather serious one.

---

<div class="post-metadata">

**Author:** ![estaylorco](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/estaylorco/32/1887_2.png) [@estaylorco](https://discourse.aurelia.io/u/estaylorco)\
**Post date:** [January 4, 2025, 3:52am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/16 "2025-01-04T03:52:57Z")

</div>

@huochunpeng @bigopon

I have solved the problem (or rather, the symptom). To avoid leaking AND see rendered nested custom elements, I have to do the following:

- Use the `@customElement` decorator on each component, and
- Globally register my nested custom elements

Going back to my post, once I registered `NestedComponent` globally, `<nested-component>` rendered in `some-component`.

Then, uncommenting `@customElement` on each of the three custom components (`SomeComponent`, `AnotherComponent`, and `NestedComponent`) eliminated leaking of the top-level routes.

I still think this is a bug since convention is destroyed in favor of configuration. Also, large applications, like the one I’m migrating, will have hundreds of nested components. With that many nested components it would be difficult to distinguish between _leaking_ memory, and merely _consuming_ it.

Could you guys test this on your side?

There’s got to be something wrong here. I’m showing up late to the party, so I have to wonder what everyone else has been experiencing.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [January 4, 2025, 4:07am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/17 "2025-01-04T04:07:41Z")

</div>

Cc @Sayan751 @bigopon

---

<div class="post-metadata">

**Author:** ![estaylorco](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/estaylorco/32/1887_2.png) [@estaylorco](https://discourse.aurelia.io/u/estaylorco)\
**Post date:** [January 4, 2025, 4:44am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/18 "2025-01-04T04:44:20Z")

</div>

cc @Sayan751 @bigopon

I noticed that, in registering `NestedComponent` globally, while `some-component`, the component in which `nested-component` is located, does not leak, I wind up with 2 detached `nested-component` references in the heap. I’m sure that’s related to the fact that I’m now globally registering `NestedComponent`.

It seems odd, though, but `nested-component` never increases beyond 2 detached instances in the heap (even if I visit the `some-component` route 100 times). And it never causes its parent, `some-component`, to leak.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 4, 2025, 6:46am UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/19 "2025-01-04T06:46:42Z")

</div>

thanks @huochunpeng @estaylorco , this issue is more for @jwx and @Sayan751. To clarify, these are the steps we need to reproduce the issue:

1. have an au-viewport
2. use convention to register a component locally
3. load the route with that component
4. navigate away
5. verify the previously rendered component not in the heap

In your post, it’s mentioned that globally registered a component helps remove the leak, so likely there’s something with the step (2). Can you help verify by registering the component locally, but without convention, using some code like this:

```diff
<template>
- <import from="./some-component">
    ...

```

```ts
import { SomeComponent } from './some-component'

@customElement({
    ...,
    dependencies: [SomeComponent]
})
export class MyApp {
    ...
}

```

---

<div class="post-metadata">

**Author:** ![estaylorco](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/estaylorco/32/1887_2.png) [@estaylorco](https://discourse.aurelia.io/u/estaylorco)\
**Post date:** [January 4, 2025, 6:24pm UTC](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/20 "2025-01-04T18:24:44Z")

</div>

cc @jwx @Sayan751

Hello @bigopon. Good to see you on this project still after all of these years!

I had already tried what you suggested…with one exception: in the code fragment you provide, you actually declare dependencies with the `dependencies` property. That gave me food for thought. When I do the following in `SomeComponent`, _and_ use `@customElement` explicitly, **not only do I see `NestedComponent` rendered inside of `SomeComponent` correctly, but I also see no memory leaks:**

```auto
import { customElement } from 'aurelia';
import template from './some-component.html';
import { NestedComponent } from './nested-component';

@customElement({
    name: 'some-component',
    template,
    dependencies: [NestedComponent], <== I hadn't tried this before
})
export class SomeComponent {
    constructor() {}
}

```

I do have to use `@customElement` in every case, though. If I comment out `@customElement`, then that component leaks. I can create, and then resolve, the issue at will by going back and forth with `@customElement` commented in and commented out.

What’s not clear from the documentation, if indeed it was your intention in the design of the framework, is that dependencies must be declared in the decorator when taking over with `@customElement`. Importing them in the template will not work. Global registration only partially solves the problem in that the nested component will render, but will still cause its parent to leak.

In the post I made here, [Nested & dynamic custom element composition - #13 by estaylorco](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231/13), do I answer your question? (_I wasn’t aware if you had seen it)_.

I still think this might be a bug. We should be able to use convention without fear of a leak. I’m not averse to declaring my dependencies in the component—might even be clearer than doing so in the template—but others may not feel that way.

Does this help?

**UPDATE**

_(Further investigation beyond what I described above)._

I’m not sure if what I’m seeing is a leak, but if I use a nested component concretely (as opposed to with dynamic composition), I see 2 detached instances of the component (in this case, `<nested-component>`) in a heap snapshot. It does not, however, cause the enclosing view to leak. In other words, `some-component` and `SomeComponent` do not show up in the heap snapshot.

This leaves behind 2 detached instances of the nested component (from **some-component.html** ):

```auto
<div class="some-component">    
    <!-- <au-compose component.bind="currentView"></au-compose> -->
    <nested-component></nested-component>
</div>

```

What’s interesting, though, is that if I switch to dynamic composition using `au-compose`, the nested component does _not_ show up at all in the heap snapshot, much less detached, and neither does `some-component` or `SomeComponent`.

Uncommenting the compose in **some-component.html** so that we have this:

```auto
<div class="some-component">        
    <au-compose component.bind="currentView"></au-compose>
    <!-- <nested-component></nested-component> -->
</div>

```

where `currentView` occurs on the component in the constructor this way:

```auto
import { customElement } from 'aurelia';
import template from './some-component.html';
import { NestedComponent } from './nested-component';

@customElement({
    name: 'some-component',
    template,
    dependencies: [NestedComponent],
})
export class SomeComponent {
    constructor() {
        this.currentView = NestedComponent;
        ...
    }
}

```

does _not_ leave behind the nested component or the enclosing component in any way in the heap snapshot.

_Just a footnote: Switching to local imports in the template (as opposed to defining them at the `dependencies` property of `@customElement`) does not resolve any of these issues. In fact, if I don’t declare dependencies in `@customElement`, nested components aren’t rendered._

**SECOND UPDATE**

I just noticed that, without using `@customElement`, navigating to a component by typing it into the URL bar clears all previous instances. I demonstrate below. At the very end of the GIF, I visit **/welcome-page** via the URL bar. The instances of `welcome-page` and `WelcomePage` that had accumulated all drop from the heap, including `NestedComponent`.

![Memory leak investigation](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/8/85f5584eace23506c2955874e3d34bc60cb322c4.gif)

Visiting **/welcome-page** by simply clicking on the nav link does _not_ clear previous instances, and `NestedComponent` accumulates as well.

Since @bigopon indicated you, @Sayan751, would be investigating, I would ask you if this is expected behavior?

[Next page](https://discourse.aurelia.io/t/nested-dynamic-custom-element-composition/4231.md?page=2)