# Enhance in Au 1 vs 2

**URL:** <https://discourse.aurelia.io/t/enhance-in-au-1-vs-2/4193>\
**Category:** Help Requests\
**Created:** [April 22, 2021, 10:30pm UTC](https://discourse.aurelia.io/t/enhance-in-au-1-vs-2/4193 "2021-04-22T22:30:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![m0ngr31](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m0ngr31/32/1535_2.png) [@m0ngr31](https://discourse.aurelia.io/u/m0ngr31)\
**Post date:** [April 22, 2021, 10:30pm UTC](https://discourse.aurelia.io/t/enhance-in-au-1-vs-2/4193/1 "2021-04-22T22:30:55Z")

</div>

I’m using a Stencil component library to compose different framework components into an existing Stencil component.

In Aurelia 1, it’s pretty trivial:

```
this.templatingEngine.enhance({element: document.getElementById(id), bindingContext: {model}});

```

When I try to accomplish something similar in Aurelia 2, I get an error:

```
Aurelia.enhance({host: document.getElementById(id), component: SimpleComponent });

```

The error:

> Uncaught (in promise) Error: Invalid surrogate attribute: id

I know everything won’t be the same, but I was hoping it’d be this simple. Is there a different way in 2?

---

<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:** [April 23, 2021, 2:15am UTC](https://discourse.aurelia.io/t/enhance-in-au-1-vs-2/4193/2 "2021-04-23T02:15:19Z")

</div>

I should eventually be as simple as v1: any piece of templating can be enhanced. Or it can read as composition using any kind of template & view model. For now, we don’t have it yet. For the error you got, it’s mainly for a fullblown CE compilation.  
Can you help create a ticket to track this?

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [April 23, 2021, 3:28am UTC](https://discourse.aurelia.io/t/enhance-in-au-1-vs-2/4193/3 "2021-04-23T03:28:45Z")

</div>

@m0ngr31 in the meantime you can do it like this [aurelia-mdc-web/mdc-dialog-service.ts at 77abb13af1aec17e1cc1af2c7be1be194a8a90f8 · aurelia-ui-toolkits/aurelia-mdc-web · GitHub](https://github.com/aurelia-ui-toolkits/aurelia-mdc-web/blob/77abb13af1aec17e1cc1af2c7be1be194a8a90f8/packages/dialog/src/mdc-dialog-service.ts#L46)

---

<div class="post-metadata">

**Author:** ![m0ngr31](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m0ngr31/32/1535_2.png) [@m0ngr31](https://discourse.aurelia.io/u/m0ngr31)\
**Post date:** [April 23, 2021, 4:20am UTC](https://discourse.aurelia.io/t/enhance-in-au-1-vs-2/4193/4 "2021-04-23T04:20:10Z")

</div>

Okay that’s good to know. What’s the best repo to do this?

---

<div class="post-metadata">

**Author:** ![m0ngr31](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/m0ngr31/32/1535_2.png) [@m0ngr31](https://discourse.aurelia.io/u/m0ngr31)\
**Post date:** [April 23, 2021, 4:20am UTC](https://discourse.aurelia.io/t/enhance-in-au-1-vs-2/4193/5 "2021-04-23T04:20:24Z")

</div>

I’ll look at this in the morning. Thanks!

---

<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:** [May 26, 2021, 3:10pm UTC](https://discourse.aurelia.io/t/enhance-in-au-1-vs-2/4193/6 "2021-05-26T15:10:13Z")

</div>

Will this new “enhance” method call all lifecycle hooks automatically including detaching, unbinding and dispose?

Or is there even a better function in Au2?

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [May 28, 2021, 2:40am UTC](https://discourse.aurelia.io/t/enhance-in-au-1-vs-2/4193/7 "2021-05-28T02:40:23Z")

</div>

The v2 “enhance” will call all the lifecycle hooks. Except it won’t detach the enhance root, because the root was not attached by the “enhance” in the first place.

---

<div class="post-metadata">

**Author:** ![euglv](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/euglv/32/1858_2.png) [@euglv](https://discourse.aurelia.io/u/euglv)\
**Post date:** [December 9, 2024, 6:18am UTC](https://discourse.aurelia.io/t/enhance-in-au-1-vs-2/4193/8 "2024-12-09T06:18:48Z")

</div>

> [@MaximBalaganskiy](#):
>
> @m0ngr31 in the meantime you can do it like this [aurelia-mdc-web/mdc-dialog-service.ts at 77abb13af1aec17e1cc1af2c7be1be194a8a90f8 · aurelia-ui-toolkits/aurelia-mdc-web · GitHub](https://github.com/aurelia-ui-toolkits/aurelia-mdc-web/blob/77abb13af1aec17e1cc1af2c7be1be194a8a90f8/packages/dialog/src/mdc-dialog-service.ts#L46)

This does not work anymore, there is no function `createElement` in `aurelia` package.  
Recent version of `mdc-dialog-service` wraps dialog in a `DIV`.

How to `enhance` the element, but not the host in Aurelia 2?  
How to dynamically add and enhance child elements when parent is already enhanced?

`Range` object as host is not supported too:

```js
let dynamic = document.createElement('MY-ELEMENT');
this.element.appendChild(dynamic);
 let range = document.createRange();
range.selectNode(dynamic);
this.au.enhance({
     component: this,
     host: range
})
```