Custom elements with common base class
- Dominant language
- TypeScript
- Stars
- 113
- Forks
- 101
- PR merge metrics
- No merged PRs in 30d
Description
**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`
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) https://github.com/aurelia/templating/issues/463#issuecomment-264192090
Contributor guide
Research direction
Start with the linked extend-err-app reproduction, checking out the bug commit and comparing it with the two workaround commits. Reproduce the Home, FooContainer/FooItem, and BarContainer/BarItem navigation described in the report. Done means the common-base-class case provides clear developer-facing information about what happened or what to do.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, webpack
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100