Style :host in Lit component overrides style :host in mixin

Question

When a lit component extends a mixin, style in component overrides style in mixin.

Example:

my-component.js

export class HomePage extends ViewMixin(LitElement) {
  static styles = css`
    :host {
      color: blue;
    }
  `;

view-mixin.js

export const ViewMixin = superClass => {
  class ViewMixinElement extends superClass {
    static styles = css`
      :host {
         background-color: red;
      }
    `;

The component will render with color=blue but background will not be red. How can I add background-color=red to all views while adding specific :host styling per view ?

Answer 1

If I got your question correctly, you need to extend styles in you child component. There is a way to do it like this:

import { css } from 'lit';

import { BaseButton } from './BaseButton.js';
import { buttonStyles } from './buttonStyles.js';


export class EnhancedButton extends BaseButton {
  static styles = [
    BaseButton.styles,
    buttonStyles,
    css`div {
      background-color: red;
    }`
  ];
}

I also added buttonStyles to make it clear how you could pass several styles in an array. Or have you styles in a separate file while extending the BaseButton.