Vue中向Lit Element传递CSS类不生效，如何实现外部样式应用？

Lit 组件默认启用 Shadow DOM，它会严格隔离外部样式：只有组件自身（:host选择器）、插槽内容（::slotted()选择器）的样式能从外部穿透，普通类选择器无法直接作用到 Shadow DOM 内部元素。再加上 Vue scoped 样式会自动添加属性前缀进一步限制作用范围，导致你传递的类名样式、后代选择器都无法生效。

方案1：使用 CSS Shadow Parts（推荐，符合 Web Components 规范） #

Lit 支持 Shadow Parts API，允许外部精准选中组件内部的指定元素：

1. 修改 Lit 组件的根元素，添加 part 属性：

import { LitElement, html, css } from "lit";

export class MyElement extends LitElement {
  static properties = {
    classes: { type: String }
  };

  static styles = css`
    .root {
      background-color: aliceblue;
      color: darkgreen;
    }
  `;

  render() {
    // 添加 part="root" 标记内部根元素
    return html`
      <div class="root ${this.classes}" part="root">
        <slot></slot>
        <p>Hello from my template.</p>
      </div>
    `;
  }
}
customElements.define("my-element", MyElement);

2. 在 Vue 中使用 :deep() 配合 ::part() 编写样式：

<style scoped>
/* 穿透作用到 Lit 内部标记了 part="root" 的元素 */
:deep(my-element::part(root)) {
  display: flex;
  color: red;
}
</style>

方案2：使用 CSS 自定义属性 #

通过自定义 CSS 变量，让外部间接控制组件内部样式，无需传递类名：

1. 在 Lit 组件样式中定义可被外部覆盖的变量：

static styles = css`
  .root {
    background-color: aliceblue;
    color: var(--text-color, darkgreen); /* 默认 darkgreen，外部可覆盖 */
    display: var(--display, block); /* 默认 block，外部可覆盖 */
  }
`;

2. 在 Vue 中给自定义元素设置这些变量：

<style scoped>
my-element {
  --text-color: red;
  --display: flex;
}
</style>

方案3：关闭 Shadow DOM（不推荐，丢失样式隔离性） #

如果不需要 Shadow DOM 的封装能力，可以关闭它，但会导致组件样式和全局样式冲突：

export class MyElement extends LitElement {
  // 重写方法，返回组件本身而非 Shadow DOM
  createRenderRoot() {
    return this;
  }

  // ...其他代码不变
}

此时 Vue 需用 :deep() 穿透 scoped 样式：

<style scoped>
:deep(.myStyle) {
  display: flex;
}
:deep(my-element .root) {
  color: red;
}
</style>

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