Lit组件自定义:host覆盖mixin中:host样式的解决方案问询

Lit 的静态 styles 属性不支持自动继承合并，子类直接定义 static styles 时会完全覆盖父类（即 Mixin 注入的父类）的 styles 配置，这就是你案例中 Mixin 定义的红色背景样式失效的原因。

可以通过两种方式实现默认样式保留+自定义样式覆盖的需求：

方案1：子类手动合并父类样式（简单易排查） #

Lit 的 styles 本身支持传入数组格式的多份样式，你只需要在组件定义样式时，将父类（Mixin）的样式放在数组首位，后面追加自定义样式即可：
my-component.js 调整后代码：

import { LitElement, css } from 'lit';
import { ViewMixin } from './view-mixin.js';

export class HomePage extends ViewMixin(LitElement) {
  static styles = [
    super.styles, // 先加载 Mixin 提供的默认样式
    css`
      :host {
        color: blue;
      }
    `
  ];
}

该方案下样式优先级为：自定义样式 > Mixin默认样式，你自定义的同名字段会覆盖默认值，非冲突字段会保留。

方案2：Mixin 内自动合并样式（使用更便捷） #

如果不希望每个接入Mixin的组件都手动拼接样式，可以在Mixin内部重写styles的getter逻辑，自动完成默认样式和自定义样式的合并：
view-mixin.js 调整后代码：

import { css } from 'lit';

export const ViewMixin = superClass => {
  class ViewMixinElement extends superClass {
    // 单独存放Mixin的默认样式，避免和子类样式冲突
    static get #mixinDefaultStyles() {
      return css`
        :host {
          background-color: red;
        }
      `;
    }

    // 重写styles getter自动合并
    static get styles() {
      const rawParentStyles = super.styles ?? [];
      const parentStyles = Array.isArray(rawParentStyles) ? rawParentStyles : [rawParentStyles];
      // 把Mixin默认样式放在前面，保证子类样式可以覆盖默认配置
      return [this.#mixinDefaultStyles, ...parentStyles];
    }
  }
  return ViewMixinElement;
};

该方案下，接入Mixin的组件不需要做任何代码修改，原来的组件写法就可以同时保留默认红色背景和自定义字体颜色。

注意：如果需要让Mixin的默认样式优先级高于自定义样式，只需要把数组顺序调换，将Mixin样式放在数组末尾即可。

内容的提问来源于stack exchange，提问作者MadeInLagny