# WebComponent plugin

**URL:** <https://discourse.aurelia.io/t/webcomponent-plugin/2529>\
**Category:** Help Requests\
**Created:** [May 8, 2019, 8:32am UTC](https://discourse.aurelia.io/t/webcomponent-plugin/2529 "2019-05-08T08:32:24Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![magnusdanielson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/magnusdanielson/32/924_2.png) [@magnusdanielson](https://discourse.aurelia.io/u/magnusdanielson)\
**Post date:** [May 8, 2019, 8:32am UTC](https://discourse.aurelia.io/t/webcomponent-plugin/2529/1 "2019-05-08T08:32:24Z")

</div>

I read about web components plugin here [https://aurelia.io/blog/2019/04/02/aurelia-release-notes-april-2019](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:

```auto
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:

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

export function configure(aurelia: Aurelia) {
aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .globalResources(
      [ 
        PLATFORM.moduleName('DuTest')
      ]);

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

```

I added the DuTest component files  
DuTest.html

```auto
<template>
    Test Hello   
</template>

```

DuTest.ts

```auto
export class DuTest
{
}

```

And my index.ejs looks like this

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

```

What could possibly go wrong? 🙂

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [May 8, 2019, 11:09am UTC](https://discourse.aurelia.io/t/webcomponent-plugin/2529/2 "2019-05-08T11:09:39Z")

</div>

Can you help check if you are compiling to es5?

---

<div class="post-metadata">

**Author:** ![magnusdanielson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/magnusdanielson/32/924_2.png) [@magnusdanielson](https://discourse.aurelia.io/u/magnusdanielson)\
**Post date:** [May 8, 2019, 8:34pm UTC](https://discourse.aurelia.io/t/webcomponent-plugin/2529/3 "2019-05-08T20:34:41Z")

</div>

I have

```auto
"target": "es5"

```

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [May 8, 2019, 9:39pm UTC](https://discourse.aurelia.io/t/webcomponent-plugin/2529/4 "2019-05-08T21:39:27Z")

</div>

You meant it threw even when setting it to es6?

---

<div class="post-metadata">

**Author:** ![magnusdanielson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/magnusdanielson/32/924_2.png) [@magnusdanielson](https://discourse.aurelia.io/u/magnusdanielson)\
**Post date:** [May 8, 2019, 10:40pm UTC](https://discourse.aurelia.io/t/webcomponent-plugin/2529/5 "2019-05-08T22:40:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![magnusdanielson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/magnusdanielson/32/924_2.png) [@magnusdanielson](https://discourse.aurelia.io/u/magnusdanielson)\
**Post date:** [May 9, 2019, 12:50pm UTC](https://discourse.aurelia.io/t/webcomponent-plugin/2529/6 "2019-05-09T12:50:21Z")

</div>

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

> **[magnusdanielson/au-component](https://github.com/magnusdanielson/au-component)**
>
> Aurelia WebComponent. Contribute to magnusdanielson/au-component development by creating an account on GitHub.

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [May 9, 2019, 1:25pm UTC](https://discourse.aurelia.io/t/webcomponent-plugin/2529/7 "2019-05-09T13:25:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![magnusdanielson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/magnusdanielson/32/924_2.png) [@magnusdanielson](https://discourse.aurelia.io/u/magnusdanielson)\
**Post date:** [May 9, 2019, 7:25pm UTC](https://discourse.aurelia.io/t/webcomponent-plugin/2529/8 "2019-05-09T19:25:30Z")

</div>

SWEET!

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

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

---

<div class="post-metadata">

**Author:** ![magnusdanielson](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/magnusdanielson/32/924_2.png) [@magnusdanielson](https://discourse.aurelia.io/u/magnusdanielson)\
**Post date:** [May 9, 2019, 9:19pm UTC](https://discourse.aurelia.io/t/webcomponent-plugin/2529/9 "2019-05-09T21:19:13Z")

</div>

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.

```auto
<du-command-bar-button
          text="Create Account"
          on-click.bind="actionButtonClick"
          icon-props.one-time="{ iconName: 'Add' }"
          menu-props.bind="commandMenu"
          split.bind="true"
        ></du-command-bar-button>

```

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [May 9, 2019, 10:36pm UTC](https://discourse.aurelia.io/t/webcomponent-plugin/2529/10 "2019-05-09T22:36:25Z")

</div>

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

```auto
duElement.split = true
duElement.iconProps = {...}

```