# Au2 - confusion around "enhance"

**URL:** <https://discourse.aurelia.io/t/au2-confusion-around-enhance/6331>\
**Category:** Uncategorized\
**Created:** [January 22, 2025, 9:14am UTC](https://discourse.aurelia.io/t/au2-confusion-around-enhance/6331 "2025-01-22T09:14:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Haltesh](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@Haltesh](https://discourse.aurelia.io/u/Haltesh)\
**Post date:** [January 22, 2025, 9:14am UTC](https://discourse.aurelia.io/t/au2-confusion-around-enhance/6331/1 "2025-01-22T09:14:20Z")

</div>

I’ve been reading the documentation for `enhance()` ([Enhance | The Aurelia 2 Docs](https://docs.aurelia.io/getting-to-know-aurelia/enhance)), and I’m confused about what the `component` parameter actually does.

I assumed that if I specify a `component` constructor, then similarly to how `.app()` works, Aurelia would mount the component inside `host`. But that is not what happens.

What actually happens is that the specified component’s lifecycle methods all trigger (I put console.log inside `attaching()` to try and realize what is happening), but nothing is actually added to the DOM.

So the only way I actually got `enhance` to work is if I registered a component using `DI`, and then enhanced a parent element that had a child element with the same tagName as the registered component.

So if this is the way I have to use `enhance`, what is the point of the `component` parameter?

---

<div class="post-metadata">

**Author:** ![dwaynecharrington](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dwaynecharrington/32/11_2.png) [@dwaynecharrington](https://discourse.aurelia.io/u/dwaynecharrington)\
**Post date:** [January 22, 2025, 11:42am UTC](https://discourse.aurelia.io/t/au2-confusion-around-enhance/6331/2 "2025-01-22T11:42:38Z")

</div>

I believe the confusion here is when you use `enhance` to enhance custom elements, the `component` property is the root controller. Think of it as similar to how `<my-app>` is the root component in a default Aurelia 2 app scaffolded.

So while you think passing in your component registered via DI to `component` is what renders it, that’s actually the root component for the `host` property.

I have created an example here to highlight this: [aurelia-enhance-demo - StackBlitz](https://stackblitz.com/edit/au2-hello-world-example-ug6aks4x?file=src%2Fmy-app.ts,src%2Fmy-host.ts,src%2Fmain.ts,index.html,src%2Fmy-component.ts,src%2Fmy-component.html)

In `index.html` you will see this HTML:

```auto
    <my-app></my-app>
    <div id="enhance-me"><my-component name.bind></my-component></div>

```

Notice on `my-component` I have a bindable called name? Yet when you run the code linked, it shows Aurelia as a value despite the fact `my-component.ts` doesn’t have a default value (it’s an empty string):

```auto
import { bindable } from 'aurelia';

export class MyComponent {
  @bindable name = '';
}

```

So, where does it come from? It comes from our host root component.

In `my-app.ts` I have the following:

```auto
  attached() {
    const element = document.getElementById('enhance-me');

    this.au.enhance({
      host: element,
      component: MyHost,
    });
  }

```

In `main.ts` I already registered `my-component`, but you’ll notice I am passing `MyHost` instead.

Going into `my-host` and you’ll see where the name value comes from:

```auto
import { customElement } from 'aurelia';

@customElement({
  name: 'my-host',
  template: null,
})
export class MyHost {
  name = 'Aurelia';
}

```

So, this becomes the parent for all enhanced children. But, it’s worth noting (as the docs correctly show), you don’t need to pass any root component, you can just specify an empty object `{}` to the component and it will enhance just fine.

```auto
  attached() {
    const element = document.getElementById('enhance-me');

    this.au.enhance({
      host: element,
      component:{},
    });
  }

```

Provided your custom element being enhanced is globally registered in DI, it’ll still render.

For non-custom element enhancement, the `component` becomes the view-model.

So in your `my-app.ts` you could do something like this as an example:

```auto
import { IAurelia, resolve } from 'aurelia';

export class MyApp {
  private au = resolve(IAurelia);

  attached() {
    const element = document.getElementById('enhance-me');
    element.innerHTML = '<ul><li repeat.for="fruit of fuits">${fruit}</li></ul>';

    this.au.enhance({
      host: element,
      component:{
          fruits: ['Apple', 'Mango', 'Banana', 'Grapes']
      },
    });
  }
}

```

And if you ran that, you would see four bullet points with our fruit being rendered.

---

<div class="post-metadata">

**Author:** ![Haltesh](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@Haltesh](https://discourse.aurelia.io/u/Haltesh)\
**Post date:** [January 23, 2025, 11:12am UTC](https://discourse.aurelia.io/t/au2-confusion-around-enhance/6331/3 "2025-01-23T11:12:58Z")

</div>

That makes sense, thanks for the clarification.

---

<div class="post-metadata">

**Author:** ![dwaynecharrington](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dwaynecharrington/32/11_2.png) [@dwaynecharrington](https://discourse.aurelia.io/u/dwaynecharrington)\
**Post date:** [January 23, 2025, 8:47pm UTC](https://discourse.aurelia.io/t/au2-confusion-around-enhance/6331/4 "2025-01-23T20:47:54Z")

</div>

No worries @Haltesh

We will have a video coming out shortly about working with enhance, because the confusion you encountered is something that others could easily encounter too.

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [February 12, 2025, 3:42pm UTC](https://discourse.aurelia.io/t/au2-confusion-around-enhance/6331/5 "2025-02-12T15:42:03Z")

</div>

@dwaynecharrington Thanks for the example, unfortunalty I don’t quite get it.

Here is what I am trying to do:

I have a component. Let’s call it my-map, in this component there is this event listener, so something like this:

```auto
onClick() {
  const popup = new Popup() // thirdparty library
    .setHTML('<div repeat.for="item of items">${item}</div>')

  this.aurelia.enhance({
    host: popup._content,
    component: { items: [1, 2, 3] },
  })  
}

```

This works, the list is rendered. But I would like to render a custom component instead.

so

```auto
onClick() {
  const popup = new Popup() // thirdparty library
    .setHTML('<my-component></my-component>')

  this.aurelia.enhance({
    host: popup._content,
    component:{},
  })  
}

```

Nothing is rendered here.

Any thoughts? Thanks.

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [February 12, 2025, 4:02pm UTC](https://discourse.aurelia.io/t/au2-confusion-around-enhance/6331/6 "2025-02-12T16:02:06Z")

</div>

Ah nevermind, just forgot to register `my-component` globally 😭