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?

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 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 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 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 at 15:45
  • Unfortunately the provided link doesn't tell anything about absence of UI Markup inheritance in LWC – Patlatus Feb 2 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.