Как я могу расширить компонент LitElement и компонент Elix вместе?

Question

В настоящее время я создаю несколько базовых веб-компонентов для использования в микро-интерфейсе, каждый из которых расширен от LitElement и использует декораторы TypeScript. Все это прекрасно работает, однако я нахожусь в сценарии, в котором я хотел бы начать свои базовые компоненты со сторонних компонентов, которые уже позаботились о многих более укоренившихся функциях, таких как доступность, обработка ключевых событий и все, что я делаю в джазе. не успеваю встраивать с нуля. Специально для этого использования начните с компонента ListBox Elix в качестве стартера. документы: 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 (и все включенные в него миксины с необходимыми мне функциями), но все же получаю это совершенство LitElement? Можно ли трактовать это как сам миксин?

Answer 1

Самый близкий подход к тому, что я пытался описать, может быть достигнут путем использования коллекции Mixins, которую предоставляет Elix. Они предоставляют базовый класс (ReactiveElement), который включает в себя большую часть базовых c функций, на которые опирается Elix, таких как управление состоянием и методы обновления шаблонов, однако эти функциональные возможности могут быть добавлены в виде миксинов. Так что, возможно, это решение, использующее LitElement в качестве базового класса root:

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

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