The differences between Aura and LWC inheritance, how to inherit the UI HTML Markup from ancestor component?

Question

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

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

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?

Answer 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

Answer 2

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.