# How to enhance single HTML element without wrapping it with \<template\> tag or other container?

**URL:** <https://discourse.aurelia.io/t/how-to-enhance-single-html-element-without-wrapping-it-with-template-tag-or-other-container/6304>\
**Category:** vNext\
**Created:** [December 16, 2024, 6:20pm UTC](https://discourse.aurelia.io/t/how-to-enhance-single-html-element-without-wrapping-it-with-template-tag-or-other-container/6304 "2024-12-16T18:20:53Z")\
**Posts on this page:** 1\
**Page:** 1

<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 16, 2024, 6:20pm UTC](https://discourse.aurelia.io/t/how-to-enhance-single-html-element-without-wrapping-it-with-template-tag-or-other-container/6304/1 "2024-12-16T18:20:53Z")

</div>

When enhancing single element using `Aurelia.app(MyApp).start()` API - `<au-slot>` is not working properly:

```html
<my-app><div>Slotted</div></my-app>
<script type="module">
  import {Aurelia, customElement} from 'aurelia'; 

  @customElement({
    name: 'my-app',
    template:`
    <div>before</div>
      <div>
          <au-slot>default</au-slot>
      </div>
    <div>after</div>
    `
  })
  class MyApp {}

  Aurelia.app(MyApp).start();

```

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/d/d14bb0a8905ddbde1a0a8c48cf1a046e89a1393b.png)  
Slotted content is always inserted as a first child and default content is not removed from `<au-slot>` tag.

`enhance` API is not working either.

This way template is not applied:

```html
<my-app></my-app>

<script type="module">
  import {Aurelia, customElement, resolve, IController} from 'aurelia';

  @customElement({
    name: 'my-app',
    template: '<template class="inner">inner content</template>'
  })
  class MyApp {}

  Aurelia
          .enhance({
            component: MyApp,
            host: document.querySelector('my-app')
          })
</script>

```

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/3/3856d2dd39f6f142b519619202ab2e1f14831fed.png)

This way produces `AUR0757: The compiled template is not aligned with the render instructions. There are 1 targets and 2 instructions.` error:

```html
<html lang="${lang}">
<title>${title}</title>
<body>
<my-app></my-app>

<script type="module">
    import {Aurelia, customElement, resolve, IController} from 'aurelia';

    @customElement({
        name: 'my-app',
        template: 'Current language: ${globalScope.lang}'
    })
    class MyApp {
        globalScope = resolve(IController).scope.bindingContext;
    }

    const globalScope = {lang: 'en', title: 'Title'}

    Aurelia
        .register(MyApp)
        .enhance({
            component: globalScope,
            host: document.documentElement
        })

</script>
</body>
</html>

```

I think the last example should be the typical starter template for Aurelia 2 application.  
It works if `lang="${lang}"` attribute is removed from `<html>` tag.
