Как расширить и стилизовать существующие LitElements?

Question

Мы хотим работать с компонентами из https://github.com/ing-bank/lion и стилизовать их под наши нужды. Их репо рекламируется с расширяемыми и минимально стилизованными компонентами. Однако я не могу понять, как на самом деле их стилизовать. Мы пытались использовать элемент style в родительском компоненте, но мы не можем правильно оформить эти компоненты.

Не могли бы вы привести пример расширения компонента?

обновить после ответ @ niiyeboah После очень хорошего ответа @niiyeboah я создал следующий класс:

import {css, customElement} from 'lit-element'
import {LionButton} from '@lion/button'

@customElement('my-custom-button')
class MyCustomButton extends LionButton {
  static get styles() {
    return [
      super.styles,
      css`
        :host {
          background-color: red;
        }
      `,
    ]
  }

  constructor() {
    super()
  }
}

Однако теперь он просто показывает, что кнопка полностью не стилизована, т.е. только текст. Кто-нибудь знает, что происходит?

Answer 1

У команды ING Lion есть свободный канал: https://www.polymer-project.org/slack-invite

для вопросов поддержки.

Это подканал #lion в Полимерном проекте Slack

Answer 2

Они предоставляют пример того, как расширить и стилизовать свои компоненты на этой странице .

Для вкладок код будет выглядеть примерно так:

import { css } from 'lit-element';
import { LionTabs } from '@lion/tabs';

export class MyTabs extends LionTabs {
  static get styles() {
    return [
      super.styles,
      css`
        /* my stylings */
      `
    ];
  }
}

customElements.define('my-tabs', MyTabs);