Custom elements with common base class

[lorond]

Submitting a bug report

• Library Version: aurelia-bootstrapper 2.3.2, aurelia-cli 1.2.3
• Operating System: OSX 10.15, Windows 10 (does not matter)
• Node Version: 10.15, 13.8
• NPM Version: 6.13.7, 6.4.1
• Webpack Version webpack 4.27
• Browser: Chrome 79 | Firefox 73 (guess, it does not matter)
• Language: TypeScript 3.1.2

Current behavior:
Several custom elements cannot inherit the same base class (please, do not close issue at this point, at least, read the "Desired behavior" section first).

Repo that reproduces bug: https://github.com/partyzzzan/extend-err-app
Note, the 1st commit represent a bug (git checkout bug), the 2nd and the 3rd commits are possible workarounds.

When you open root, Home custom element is rendered:

Let's click open foo - it opens FooContainer that in turn contains FooItem:

Let's get back to home and then go to bar - it opens BarContainer that in turn contains BarItem:

Nothing rendered and no any errors in console:

Both BarItem and FooItem extends same generic SomeComponentBase<TModel>

But let's get back to foo again:

Note, bar's template rendered with foo's model.

Two possible workarounds:

1. do not use inheritance
2. explicitly decorate FooItem and BarItem with @customElement decorator

Desired behavior

As of #463 (and other issues) I guess, this one should not be closed without fix. The issue is not about the behavior itself, but about the fact, that there is no any errors in console or anything else, no information at all for developers - what happened or what to do.

It would be nice to have something like:

Use decorators, not inheritance.

(c) #463 (comment)

[bigopon]

@lorond I believe you hit the issue of derived class retrieving base class metadata. We have provided doc for this, but probably it's easy to miss. Did you have a look at https://aurelia.io/docs/templating/html-behaviors#inheritance-with-html-behaviors? Note:

Second, notice that we explicitly declared @CustomElement(). Any time you inherit a custom element, you must add the customElement decorator.

It doens't need to be a @customElement decorator though, any metadata-stamping decorator would do: @bindable, @useShadowDOM, @templateController etc...

Here's some example you can have a look at: https://discourse.aurelia.io/t/example-of-binding-inheritance/428

@jods4 @EisenbergEffect @fkleuver We can fix this behavior of inheritance, that is surprising users here and there with probably a simple change: get own metadata instead of first available metadata in the hierarchy. Though I'm not sure the potential breaking changes, but it seems to me anything that is not working would suddenly work. Not sure if it's a good idea. Thoughts?

[lorond]

Thanks @bigopon. Yep, I missed that. I'll do a PR a bit later to highlight this in the docs, ok?

[bigopon]

@lorond that'd be awesome