Open lorond opened 4 years ago
@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?
Thanks @bigopon. Yep, I missed that. I'll do a PR a bit later to highlight this in the docs, ok?
@lorond that'd be awesome
Submitting a bug report
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,![image](https://user-images.githubusercontent.com/1833263/75357936-32100880-58c3-11ea-85d2-12cfca76775d.png)
Home
custom element is rendered:Let's click open![image](https://user-images.githubusercontent.com/1833263/75358021-4d7b1380-58c3-11ea-80e7-d47d44a66389.png)
foo
- it opensFooContainer
that in turn containsFooItem
:Let's get back to![image](https://user-images.githubusercontent.com/1833263/75358189-8b783780-58c3-11ea-8d72-7f87295e8a14.png)
home
and then go tobar
- it opensBarContainer
that in turn containsBarItem
:Nothing rendered and no any errors in console:![image](https://user-images.githubusercontent.com/1833263/75358389-db56fe80-58c3-11ea-9276-745e38ddb376.png)
Both
BarItem
andFooItem
extends same genericSomeComponentBase<TModel>
But let's get back to foo again:![image](https://user-images.githubusercontent.com/1833263/75360108-689b5280-58c6-11ea-8a0b-022e5858b4f2.png)
Note,
bar
's template rendered withfoo
's model.Two possible workarounds:
FooItem
andBarItem
with@customElement
decoratorDesired 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