# @bindable in abstract base view model breaks assigned view

**URL:** <https://discourse.aurelia.io/t/bindable-in-abstract-base-view-model-breaks-assigned-view/4421>\
**Category:** Framework Knowledge\
**Created:** [September 27, 2021, 12:15pm UTC](https://discourse.aurelia.io/t/bindable-in-abstract-base-view-model-breaks-assigned-view/4421 "2021-09-27T12:15:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mreiche](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mreiche/32/1912_2.png) [@mreiche](https://discourse.aurelia.io/u/mreiche)\
**Post date:** [September 27, 2021, 12:15pm UTC](https://discourse.aurelia.io/t/bindable-in-abstract-base-view-model-breaks-assigned-view/4421/1 "2021-09-27T12:15:15Z")

</div>

The following behaviour breaks my code and I assume that this is a bug.

I have 2 components, inheriting from a base component.

- AbstractComponent (abstract-component.ts)
  - CompA (comp-a.html, comp-a.ts)
  - CompB (comp-b.html, comp-b.ts)

```auto
export class CompA extends AbstractComponent {
}

```

```auto
<template>
    <h2>Comp A</h2>
</template>

```

```auto
export class CompB extends AbstractComponent {
}

```

```auto
<template>
    <h2>Comp B</h2>
</template>

```

```auto
.globalResources([
    PLATFORM.moduleName('components/comp-a/comp-a'),
    PLATFORM.moduleName('components/comp-b/comp-b')
]);

```

When I include my `<comp-a>` in the DOM, the code of `comp-a.html` is shown.  
 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/7/754fc717d39313d560f4e3d3b0a54d973538e4e4.png)  
But when I add `@bindable()` to `AbstractComponent`, then the code of `comp-b.html` is shown.

```auto
export abstract class AbstractComponent {
    @bindable()
    messages:object[];
}

```

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

What I’am doing wrong or what I’m missing here?

Best,  
Mike

---

<div class="post-metadata">

**Author:** ![arnederuwe](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/arnederuwe/32/737_2.png) [@arnederuwe](https://discourse.aurelia.io/u/arnederuwe)\
**Post date:** [September 27, 2021, 12:29pm UTC](https://discourse.aurelia.io/t/bindable-in-abstract-base-view-model-breaks-assigned-view/4421/2 "2021-09-27T12:29:37Z")

</div>

[Templating: HTML Behaviors Introduction | Aurelia](https://aurelia.io/docs/templating/html-behaviors#inheritance-with-html-behaviors)

TL;DR:  
when using inheritance in custom elements, the `customElement()` decorator is required. It has something to do with the elements sharing eachothers’ metadata otherwise, which isn’t desired

---

<div class="post-metadata">

**Author:** ![mreiche](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mreiche/32/1912_2.png) [@mreiche](https://discourse.aurelia.io/u/mreiche)\
**Post date:** [September 27, 2021, 1:05pm UTC](https://discourse.aurelia.io/t/bindable-in-abstract-base-view-model-breaks-assigned-view/4421/3 "2021-09-27T13:05:09Z")

</div>

Many thanks. That fixed the issue.