Search code examples
aurelia

Aurelia custom element without outer node

Is it possible to let Aurelia render a custom element without the capsulating component node? Or replace the custom-element node with its content?

Example:

app.html

<template>
  <require from = "./components/custom-component.html"></require>
     <custom-component></custom-component>
</template>

app.ts

export class App {
}

custom-component.html

<template>
    <p>This is some text from dynamic component...</p>
</template>

Result

enter image description here

Based on this example: Is it possible with aurelia to render the <p> element from the component as direct child of the <body>, so that there will be no custom-component-node?

Solution

  • Use the containerless attribute on your component.

    example: https://gist.run/?id=8e57000c7b8423dc0246a7006d90ba79

    you can also decorate your custom components with the containerless() decorator. see: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/9