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:
<div>my component</div>
I would expect this to just render the div in my template but instead it renders:
<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?
I think either @containerless or as-element may be what you are looking for.
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';
@containerless
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 {
}
@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.
