时间戳

首页 > 解决方案 > 如何一起扩展 LitElement 组件和 Elix 组件？

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

问题描述

我目前正在构建一些用于微前端的基本 Web 组件，每个组件都从 LitElement 扩展并使用 TypeScript 装饰器。这一切都很好，但是我在一个场景中，我想从第三方组件开始我的基本组件，这些组件已经处理了许多更根深蒂固的功能，比如可访问性、关键事件处理以及我不喜欢的所有爵士乐没有时间从头开始构建。具体到这种用法，从 Elix 的 ListBox 组件开始。文档：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组件（以及它包含的所有具有我需要的功能的 mixin）但仍然获得 LitElement 的优点？是否可以将其视为 mixin 本身？

标签： javascripttypescriptweb-componentlit-element

解决方案

最接近我试图描述的方法可以通过利用 Elix 提供的 Mixin 集合来实现。它们提供了一个基类（ReactiveElement），它包含了 Elix 所依赖的许多基本功能，例如状态管理和模板更新方法，但是这些功能也可以作为 mixins 随意添加。所以也许像这样的解决方案，使用 LitElement 作为根基类：

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

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

推荐阅读