WebComponent plugin

I read about web components plugin here https://aurelia.io/blog/2019/04/02/aurelia-release-notes-april-2019

If I try to follow the readme instructions i end up with the following error in Chrome:

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at new class_1 (aurelia-web-components.js?34e0:56)
    at CustomElementRegistry.registerBehavior

My main file looks like this:

import {Aurelia} from 'aurelia-framework'
import { CustomElementRegistry } from 'aurelia-web-components';

export function configure(aurelia: Aurelia) {

return aurelia.start()
  .then(() => {
    const registry = aurelia.container.get(CustomElementRegistry);

I added the DuTest component files

    Test Hello   


export class DuTest

And my index.ejs looks like this

<body aurelia-app="main" class="ms-Fabric">
    <% if (htmlWebpackPlugin.options.metadata.server) { %>
    <!-- Webpack Dev Server reload -->
    <script src="/webpack-dev-server.js"></script>
    <% } %>

What could possibly go wrong? :slight_smile:

1 Like

Can you help check if you are compiling to es5?

I have

"target": "es5"

Is that wrong?
I tried to change it to all other alternatives but no luck.

1 Like

You meant it threw even when setting it to es6?

Yes, actually es2015, but it should be the same. I will add link to a github project as soon as I can.

Thank you so much for looking into this.

1 Like

Here is a clean au -new with additions of the Web Component add-in.

It has the same error as above. And yes I have tried es6 as target.

1 Like

Gut feeling is that the distribution used is in es5, making it error as you cannot inherit built-in classes
(specifically super call) using es5 syntax. It’s a common error for web component usage. I think you can fix it in your webpack config via passing dist: 'es2015' option to Aurelia webpack plugin

1 Like


Now it works (in Chrome), I have checked in everything if someone else is looking into this.


1 Like

If I set attributes in HTML it works fine if they are string based.
Boolean types I have managed to set with simple javascript

document.getElementById("l1").setAttribute("disabled", true);

But how can I “bind” or set attributes to objects or functions. I used to use .bind or .one-time to assign an object to an attribute. I browsed through the spec, but I couldn’t get any information there.

Below works great when I use my components with just Aurelia. I would like to set on-click, icon-props and manu-props to functions or objects.

          text="Create Account"
          icon-props.one-time="{ iconName: 'Add' }"

If the element is used outside of Aurelia template, you do

duElement.split = true
duElement.iconProps = {...}
1 Like