CODEWITHSUNDEEP
javascripttypescriptweb-componentlit-element
Kevin H.
Kevin H.

Reputation: 348

How can I extend a LitElement component and Elix component together?

I'm currently building some base web components to use in a micro front end, each extended from LitElement and using TypeScript decorators. It all works great, however I'm in a scenario where I'd like to begin my base components from third party components that already take care of much of the more ingrained features like accessibility, key event handling, and all that jazz I don't have time to build in from scratch. Specifically to this usage, begin with Elix's ListBox component as a starter. docs: https://component.kitchen/elix/ListBox source: https://github.com/elix/elix/blob/master/src/ListBox.js

So I typically begin by extending LitElement like so: 

@customElement('md-list')
export class List extends LitElement {/** all my personal prop and render needs */}

How then can I both extend the ListBox component (and all its included mixins with the features I need) but still get that LitElement goodness? Is it possible to treat that as a mixin itself?

Upvotes: 3

Views: 1943

Answers (1)

Kevin H.
Kevin H.

Reputation: 348

The closest approach to what I've tried to describe could be achieved by leveraging the collection of Mixins that Elix provides. They provide a base class (ReactiveElement) that packs much of the basic features Elix relies upon, like state management and template update methods, however those functionalities can be added a la cart as mixins too. So perhaps a solution like so, using LitElement as the root base class:

const Base = AriaListMixin(
  GenericMixin(
      SlotItemsMixin(
        ShadowTemplateMixin(
          ReactiveMixin(LitElement))))
);

@customElement('md-list')
export class List extends Base {/** all my personal prop and render needs */}

Upvotes: 1

Related Questions