# Using the customElement decorator excludes html template in webpack?

**URL:** <https://discourse.aurelia.io/t/using-the-customelement-decorator-excludes-html-template-in-webpack/3214>\
**Category:** vNext\
**Created:** [February 5, 2020, 8:42am UTC](https://discourse.aurelia.io/t/using-the-customelement-decorator-excludes-html-template-in-webpack/3214 "2020-02-05T08:42:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![deap82](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/deap82/32/203_2.png) [@deap82](https://discourse.aurelia.io/u/deap82)\
**Post date:** [February 5, 2020, 8:42am UTC](https://discourse.aurelia.io/t/using-the-customelement-decorator-excludes-html-template-in-webpack/3214/1 "2020-02-05T08:42:58Z")

</div>

So I decided to take Aurelia 2 for a spin (after attending the “Swetugg” conference in Stockholm this week 🙂 ).

Using `npx makes aurelia` as the starting point I got the application running and created a simple custom element;

box.ts;

```
export class Box {
    color: string = 'red';
}

```

box.html;

```
<div css="width: 50px; height: 50px; background-color: ${color};"></div>

```

This works fine using `<import from="custom-elements/box/box"></import>` and `<box></box>` within **my-app.html**.

I can use chrome dev tools to see that the html file is included;

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

However, as soon as I add the `@customElement` decorator to the class;

```
import { customElement } from 'aurelia';
@customElement('box')
export class Box {
    color: string = 'red';
}

```

_ **the .html template is no longer loaded;** _

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

In the above case, obviously the ´@customElement` decorator doesn’t serve any purpose, but what I would like to, and what we’re doing in “v1”, is to always prefix the tag name on our own custom elements;

```
/.../
@customElement('vkau-box')
export class Box {
/.../

```

so the usage would be;

```
<vkau-box></vkau-box>

```

We do this to simplify the introduction of new developers, to make it clear what components are our own as well as making sure our own components wont clash with some built in or third party components that might exist.

**Why is the html template not loaded as soon as I add the `@customElement` decorator?**

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [February 5, 2020, 9:17am UTC](https://discourse.aurelia.io/t/using-the-customelement-decorator-excludes-html-template-in-webpack/3214/2 "2020-02-05T09:17:38Z")

</div>

Hey there. This is a known issue that’s already on the todo list for being fixed: [https://github.com/aurelia/aurelia/issues/810](https://github.com/aurelia/aurelia/issues/810)  
So what you are trying to do is _supposed_ to work, and it will relatively soon.

In short, the conventions plugin will not touch the decorator if you add one, but in this specific case it needs an exception.  
You can work around it temporarily by bypassing conventions and using the full explicit decorator notation:

```auto
import * as template from './box.html';

@customElement({ name: 'vkau-box', template })
export class Box {

```
