2

When an Aura component inherits another Aura component, it inherits both the Javascript and the HTML. So the html of ancestor component can be reused in the descendant component.

While this is not true for LWC. When Lightning Web Component inherits another Lightning Web Component, it only inherits the Javascript but not the HTML. There is no sign of ancestor component markup in the descendant component. Am I doing this wrong?

This is the code of Aura base component

<aura:component extensible="true" >
    Aura Base <br/>
    {!v.body} <br/>
</aura:component>

and the code of Aura descendant component

<aura:component extends="c:auraBase" extensible="true" >
    Aura Desc <br/>
    {!v.body} <br/>
</aura:component>

Basically the UI inheritance is implemented through the tag {!v.body}.

The corresponding item in LWC for {!v.body} is unnamed slot. So we can build some base Lightning Web Component

<template>
    LWC Base <br/>
    <slot></slot> <br/>
</template>

with almost empty Javascript

import { LightningElement } from 'lwc';

export default class LwcBase extends LightningElement {}

and some descendant Lightning Web Component

<template>
    LWC Desc <br/>
    <slot></slot> <br/>
</template>

with a following Javascript

import LwcBase from 'c/lwcBase';

export default class LwcDesc extends LwcBase {

}

If we render those two descendant components, we can see that the Aura descendant component inherits the UI from the Aura base component

enter image description here

while the Descending Lightning Web Component doesn't inherited the UI HTML Markup from the Lightning Base Web Component

enter image description here

Is this intended? Is there any other way to embed the markup from the ancestor component in LWC?

Maybe there is some <super> or some <this> tag in LWC which implements this?

2 Answers 2

1

I think you’re miss using the slot element on your LWC example. When marking a slot in your template you are allowing a parent component markup to be embedded inside that slot element.

So if you have the following markup like you stated:

  <template>
    LWC Base <br/>
    <slot></slot> <br/>
   </template>

You can build a wrapper parent component that use this component and inject other UI elements inside that slot.

Eg.

  <template>
       <c-lwc-base>
            <p> LWC Desc  or any other markup to pass to child </p>
       </c-lwc-base>
   </template>

The result will render like your screenshot

5
  • This would implement the composition but not the inheritance. I want LWC Desc inherit the LWC Base HTML, I don't want it to be embedded through composition...
    – Patlatus
    Feb 1, 2021 at 16:50
  • Maybe you should clarify better your aim and what is it you wish to achieve with inheritance? For embedding markup between components slots (composition) will be the way to achieve it. You could also @import template into your JS. But hard to tell what you’re after. LWC and Aura are different.
    – sfdx bomb
    Feb 2, 2021 at 15:26
  • I am trying find out possible options in two framework and find some documentation or proofs on what is available and what is not. So do you claim that Aura framework provides more options to embed markup, at least two completely different options: inheritance and composition, while LWC provides only composition option? Do you have any authoritative source which proves that there is no way in LWC to implement HTML markup inheritance?
    – Patlatus
    Feb 2, 2021 at 15:37
  • developer.salesforce.com/docs/component-library/documentation/… - this would be the main source with authority. But Personally would actually agree with the statement inside it - “always choose LWC unless...”
    – sfdx bomb
    Feb 2, 2021 at 15:45
  • Unfortunately the provided link doesn't tell anything about absence of UI Markup inheritance in LWC
    – Patlatus
    Feb 2, 2021 at 16:29
0

If you do not include the HTML in the subcomponent, the HTML from the parent component will be used. So it's inhering it :-)

But I have not found how to override fractions of the template, just like in JavaScript you override a function but keep the rest the same.

1
  • well, this doesn't answer my question. We have figured out that it is possible to use composition to override fractions of the template, but no way to do this using inheritance.
    – Patlatus
    Nov 28, 2022 at 12:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .