Avoid rendering tag name in components

When creating a custom component, for example ‘my-component’ I use it like:


in my-component.html I can have markup:

<div>my component</div>

I would expect this to just render the div in my template but instead it renders:

<div>my component</div>

Is there a way to avoid rendering the component tag and just rendering the contents of the template?

I think either @containerless or as-element may be what you are looking for.

1 Like

Thank you for that. I was not able to find it on my own. Containerless seems like it would be a good default or global setting to me.

@lfoust Try this. Create a base component to handle this and any other common component functions, something like …

// base-component.js
import { containerless } from 'aurelia-framework';

export class BaseComponent {

Then use it in any of your components that you want to use common features, like containerless for example.

// my-component.js
import { BaseComponent } from "./base-component";

export class MyComponent extends BaseComponent {
1 Like

@rkever - Thank you for the recommendation. I just want to report back that I tried the base component approach and it did not work. It seems the @containerless attribute did not apply to components derived from the base component so I reverted back to just putting the attribute directly on components. Thanks!

Works for me ¯_(ツ)_/¯ Ha…just joking. Seriously though not sure why it didn’t work for you. I downloaded the latest CLI, created a basic project, and wrote out the aforementioned code and tested it with and without the @containerless attribute on the base class and viewed the HTML to see it with and without the custom HTML tag.

With @containerless

Without @containerless

@lfoust Sorry…just realized that you probably using v2. My examples are in v1 and haven’ tried this in v2 although I would expect a base class to work the same way.