# Avoid rendering tag name in components

**URL:** <https://discourse.aurelia.io/t/avoid-rendering-tag-name-in-components/4367>\
**Category:** vNext\
**Created:** [August 12, 2021, 6:12am UTC](https://discourse.aurelia.io/t/avoid-rendering-tag-name-in-components/4367 "2021-08-12T06:12:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![lfoust](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lfoust/32/119_2.png) [@lfoust](https://discourse.aurelia.io/u/lfoust)\
**Post date:** [August 12, 2021, 6:12am UTC](https://discourse.aurelia.io/t/avoid-rendering-tag-name-in-components/4367/1 "2021-08-12T06:12:29Z")

</div>

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

`<my-component></my-component>`

in my-component.html I can have markup:

```auto
<div>my component</div>

```

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

```auto
<my-component>
<div>my component</div>
</my-component>

```

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

---

<div class="post-metadata">

**Author:** ![lancelot316](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lancelot316/32/527_2.png) [@lancelot316](https://discourse.aurelia.io/u/lancelot316)\
**Post date:** [August 12, 2021, 4:03pm UTC](https://discourse.aurelia.io/t/avoid-rendering-tag-name-in-components/4367/2 "2021-08-12T16:03:40Z")

</div>

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

> [@Use of containerless](https://discourse.aurelia.io/t/use-of-containerless/817):
>
> What is best/worse practice of using containerless in view model or in view? When to use containerless and when not to use containerless? All this question I have in my mind after conversation I have with @boban.r

---

<div class="post-metadata">

**Author:** ![lfoust](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lfoust/32/119_2.png) [@lfoust](https://discourse.aurelia.io/u/lfoust)\
**Post date:** [August 12, 2021, 4:49pm UTC](https://discourse.aurelia.io/t/avoid-rendering-tag-name-in-components/4367/3 "2021-08-12T16:49:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [August 12, 2021, 11:13pm UTC](https://discourse.aurelia.io/t/avoid-rendering-tag-name-in-components/4367/4 "2021-08-12T23:13:01Z")

</div>

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

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

@containerless
export class BaseComponent {
}

```

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

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

export class MyComponent extends BaseComponent {
}

```

---

<div class="post-metadata">

**Author:** ![lfoust](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lfoust/32/119_2.png) [@lfoust](https://discourse.aurelia.io/u/lfoust)\
**Post date:** [August 14, 2021, 3:38pm UTC](https://discourse.aurelia.io/t/avoid-rendering-tag-name-in-components/4367/5 "2021-08-14T15:38:33Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [August 16, 2021, 5:51am UTC](https://discourse.aurelia.io/t/avoid-rendering-tag-name-in-components/4367/6 "2021-08-16T05:51:12Z")

</div>

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`

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

Without `@containerless`

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

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [August 16, 2021, 8:39pm UTC](https://discourse.aurelia.io/t/avoid-rendering-tag-name-in-components/4367/7 "2021-08-16T20:39:26Z")

</div>

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