How to extend and style existing LitElements?

Question

We want to work with components from https://github.com/ing-bank/lion and style them to our needs. Their repo advertises with the components being extensible and minimally styled. However, I cannot seem to figure out how to actually style them. We tried using style element in the parent component, but we cant seem to style these components properly.

Could you give me an example of how to extend a component?

update after answer by @niiyeboah After a very nice answer by @niiyeboah, I created the following class:

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()
  }
}

However, now it just shows be the button completely unstyled, i.e. only the text. Does anyone know whats happening?

Answer 1

They provide an example of how to extend and style their components on this page.

For tabs, the code will look something like this:

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);