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?