Question

我目前正在构建一些基本的Web组件以在微型前端中使用，每个组件都从LitElement扩展并使用TypeScript装饰器。一切都很好，但是我处于一种情况下，我想从第三方组件开始我的基础组件，这些第三方组件已经处理了许多更根深蒂固的功能，例如可访问性，键事件处理以及我所不喜欢的所有爵士乐没有时间从头开始构建。专门针对这种用法，从Elix的ListBox组件开始。 docs：https://component.kitchen/elix/ListBox 来源：https://github.com/elix/elix/blob/master/src/ListBox.js

因此，我通常首先像这样扩展LitElement：

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

那我如何才能同时扩展ListBox组件（以及它包含的所有带有我需要的功能的mixins），但仍能获得LitElement的好处呢？可以将其本身视为mixin吗？

Answer 1

可以通过利用Elix提供的Mixins集合来实现与我尝试描述的最接近的方法。它们提供了一个基类（ReactiveElement），其中包含了Elix依赖的许多基本功能，例如状态管理和模板更新方法，但是这些功能也可以作为混合添加。因此，也许可以使用LitElement作为根基类：

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

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

如何将LitElement组件和Elix组件一起扩展？

1 个答案: