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 ?

Have you tried [inherit styles from a superclass](https://lit.dev/docs/components/styles/#inheriting-styles-from-a-superclass) ? — michaPau, Nov 28 '21 at 14:06
@michaPau Could you describe your solution and provide it as answer ? — Christian, Jan 13 '22 at 07:17

score 0 · Answer 1 · answered May 17 '22 at 11:49

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.

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

1 Answers1