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

vNext
1

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

<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
image613×330 11.9 KB

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:

<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
image529×188 5.74 KB

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

<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.

1 Like