0

Is it possible to extend multiple lighting base web components?

Something like this:

import externalScripts from 'c/Scripts';
import { LightningElement, api } from 'lwc';

export default class Topics extends LightningElement, externalScripts{
    @api name;
}

I want to use @track, @api but they are not working

Thanks!

4

That's not possible for prototypical inheritance. But you can use Mix-Ins to emulate multiple inheritances:

Abstract subclasses or mix-ins are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.

A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:

let calculatorMixin = Base => class extends Base {
  calc() { }
};

let randomizerMixin = Base => class extends Base {
  randomize() { }
};

A class that uses these mix-ins can then be written like this:

class Foo { }
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }

Some additional resources: Mixins for Web Components

|improve this answer|||||

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.