Working with inheritance

[Guillaume]

Hello !

I'm working with WebComponents and I'm facing a problem related to inheritance between classes.
Maybe you can give me a hint?

I have 2 Web-Components A and B.
B inherits from A. (class B extends A)
Both class have an attribute version.

The rendering function is defined in class A, and the template literal is using the version attribute :

render(this.shadow, html`<div>${this.version}</div>`);

Now the problem :

When I call the render function from class A (this.constructor.name === 'A'), everything works, and the version of A is displayed.
But when I call the render function from class B (this.constructor.name === 'B'), the value of A.version is displayed, instead of the value of B.version.

Did I miss something here ?
Is there anything to configure when working with inheritance?

Thanks!

[Andrea Giammarchi]

this library has nothing to do with inheritance and all I can think about without having any code to look at is that you render on constructor so when super() is called in B you have version defined in A, not the one defined in B but then again, this is how JS work, it has nothing to do at all with uhtml. I hope I got your issue right, closing as there's nothing to do here.

[Guillaume]

Hello,

Thanks for your answer.
Sorry to reopen this, but I'm not sure I understand what you said.
Actually, with inheritance, the object type is always B, even if I call a method of A. Calling the method with super() does not change anything.

I tried to reproduce my problem in a smaller project, but I cannot, everything works as expected.
It has to do with the context of my specific project I think, but I cannot not find where exactly the problem is.

I added a log in the same method that do the render():

  render() {
    console.log(`VERSION: ${this.version}`);
    render(this.shadow, html`<div>${this.version}</div>`);
  }

The console shows the right version :

VERSION: X.Y

But somehow this valure won't be found during the render(), and I can only see <!--isµ0--> in the rendered HTML.

Is there a way to activate some more logs, in order to understand what the context in uhtml is ?

Thanks.

[Andrea Giammarchi]

The context is the one you use … uhtml has nothing to do with context or inheritance, you pass a node where to render stuff and interpolations values, that’s it.

if I don’t have a minimal code example that shows the issue I can’t help.

[Guillaume]

Hello,

Ok, I found where my error came from.
Actually, "this" is evaluated when you define the template string with "html()", not when you call it with "render()".
render() use the "this" that has been evaluated when defining the template.

Actually, all my template strings for all my objects were defined in a central function, this mean always with the same "this".

I thought that "this" will be evaluated at the time the template string is generated, but that's not the case. It is evaluated only at the definition of the template.

Now it works perfectly.
Thank you for the time you took to answer me, and for this awesome library too.

[Andrea Giammarchi]

To clarify: there is no evaluation at all in this library so it's up to you to pass or use the right references, context, interpolation values ... happy you solved, hopefully you also understood it had nothing to do with uhtml :-)