使用UnoCSS Wind4搭配Lit组件时CSS自定义属性未定义问题

我用Lit构建Web组件原型，搭配UnoCSS的Wind4 TailwindCSS预设。目前遇到大量CSS自定义属性未定义的问题，例如渐变相关的--un-gradient-to-position等变量均未定义。虽然padding、margin等布局类样式正常生效，但颜色相关样式缺失。疑惑是否需要手动定义所有这些变量？原以为插件会自动处理。

项目配置文件 #

package.json #

{
  "name": "unocss-lit-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "watch": "vite build --watch",
    "preview": "vite preview",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@unocss/preset-wind4": "^66.1.2",
    "lit": "^3.3.0",
    "typescript": "^5.8.3",
    "unocss": "^66.1.2"
  }
}

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <script type="module" src="./index.js"></script>
    <style>
        /* I'm expected to define all of these these manually? */
        :root {
            --un-bg-opacity: 100%;
            --un-text-opacity: 100%;
            --un-border-opacity: 100%;
        }
    </style>
</head>
<body>
    <my-test-component>my component</my-test-component>
</body>
</html>

index.ts #

import { LitElement, css, html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("my-test-component")
export class SelectDropdown extends LitElement {
  static styles = [
    css`
      @unocss-placeholder;
    `,
  ];

  gradientTest = "bg-linear-to-r from-blue-500 to-red-200 m-4 p-10 border-6";
  colorTest =
    "bg-blue-500 m-4 border text-blue-200 p-10 border-red-200 border-6";

  render() {
    return html`<div>
      <div class="${this.colorTest}">${this.colorTest}</div>
      <div class="${this.gradientTest}">${this.gradientTest}</div>
    </div>`;
  }
}

unocss.config.ts #

import { defineConfig } from "unocss";
import { presetAttributify } from "unocss";
import presetWind4 from "@unocss/preset-wind4";

export default defineConfig({
  presets: [presetWind4({}), presetAttributify()],
});

vite.config.ts #

import { defineConfig } from "vite";
import UnoCSS from "unocss/vite";

export default defineConfig({
  plugins: [
    UnoCSS({
      mode: "shadow-dom",
      inspector: true,
    }),
  ],
});

1. 修改UnoCSS的shadow DOM模式 #

shadow-dom模式会完全隔离组件样式，导致全局CSS变量无法注入到shadow DOM中。需要切换为shadow-dom-scoped模式，这个模式会将必要的变量和样式打包到组件内部，同时保留shadow DOM的隔离特性：

修改vite.config.ts：

import { defineConfig } from "vite";
import UnoCSS from "unocss/vite";

export default defineConfig({
  plugins: [
    UnoCSS({
      mode: "shadow-dom-scoped", // 替换为该模式
      inspector: true,
    }),
  ],
});

2. 调整预设顺序 #

presetAttributify需要在presetWind4之前加载，确保属性化语法被正确解析后再由Wind4预设处理样式：

修改unocss.config.ts：

import { defineConfig } from "unocss";
import { presetAttributify } from "unocss";
import presetWind4 from "@unocss/preset-wind4";

export default defineConfig({
  presets: [presetAttributify(), presetWind4({})], // 交换顺序
});

3. 移除手动定义的全局变量 #

修复配置后，UnoCSS会自动生成并注入所有必要的CSS变量（包括--un-bg-opacity、渐变相关变量等），因此可以删除index.html中手动添加的:root样式块。

4. 保留组件内的UnoCSS占位符 #

你在Lit组件中使用的@unocss-placeholder;是正确的，它负责将UnoCSS生成的样式注入到组件的静态样式表中，无需修改。

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