LWC Super Component Approach

Super Components approach means that you will have a base (super) component that other components will inherit. It’s very common thing. You will face it very often when developing a Lightning Web Components.

In object-oriented programming (OOP), inheritance is a fundamental concept that allows you to create a new class (called a subclass or derived class) based on an existing class (called a superclass or base class).

Why this approach?

The first thing is reusability, you can share common variables and functions. the second thing is maintainability your code will be centralized in one place making it easy maintain and update. And the third, it is easy to implement super class inheritance approach in LWC.

How to use a super class

We will call it BaseClass in our example it will hold some useful functions. For the first of all we need to create a new lightning component named BaseClass and remove html file because we won’t use it.
baseClass.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class BaseClass extends LightningElement {
    
    showErrorMessage(title, message) {
        const event = new ShowToastEvent({
            title: title,
            message: message,
            variant: 'error'
        });
        this.dispatchEvent(event);
    }

    showSuccessMessage(title, message) {
        const event = new ShowToastEvent({
            title: title,
            message: message,
            variant: 'success'
        });
        this.dispatchEvent(event);
    }
}

I added 2 functions to show a toast messages, that means every class that inherit a BaseClass will also inherit those 2 functions.

For demonstration I will use superClassDemo component.
superClassDemo.js

import { LightningElement } from 'lwc';
import BaseClass from 'c/baseClass'

export default class SuperClassDemo extends BaseClass {
    handleClickSuccess() {
        this.showSuccessMessage('Success', 'Bluecloud');
    }

    handleClickError() {
        this.showErrorMessage('Error', 'Bluecloud');
    }
}

Have a look at this line, we have to import super class first

import BaseClass from 'c/baseClass'

After that we need extend our existing lwc component with our super class

export default class SuperClassDemo extends BaseClass 

I have added 2 buttons that will use code from the super class
superClassDemo.html

<template>
    <div class="slds-box slds-theme_default">
            <lightning-button variant="neutral"
                              class="slds-m-around_small" 
                              label="Success" 
                              title="Success" 
                              onclick={handleClickSuccess}>
            </lightning-button>
            <lightning-button variant="neutral" 
                              class="slds-m-around_small" 
                              label="Error" 
                              title="Error" 
                              onclick={handleClickError}>
            </lightning-button>
    </div>
</template>

Now when the buttons were clicked, handler function will call the function from the super.

    handleClickSuccess() {
        //this method is from super compoent
        this.showSuccessMessage('Success', 'Bluecloud');
    }

    handleClickError() {
        //this method is from super compoent
        this.showErrorMessage('Error', 'Bluecloud');
    }

Example of the success button clicked:

Conclusion

Of course, this is not a universal answer to every situation. This super class approach has some strong sides, but on the other hand, there are some cons that should be mentioned.
The first one is inflexibility the superclass and it’s subclasses can be too tied together and if you make significant changes to the superclass, it may require updates in all related subclasses, potentially introducing maintenance challenges.
The second one overhead in some cases, creating a superclass just to share a few common attributes or methods may introduce unnecessary complexity and overhead, especially if those shared elements are not widely used.

When using a superclass approach, it’s essential to carefully consider your design and the relationships between classes.