Using the customElement decorator excludes html template in webpack?

vNext
1

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

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

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

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?

3 Likes
2

Hey there. This is a known issue that’s already on the todo list for being fixed: 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:

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

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