如何在Lit框架的css方法中使用CSSType类型的JS对象？

问题描述 #

尝试在Lit框架的css方法中使用CSSType类型的JS对象定义组件样式，将对象转换为字符串后，直接通过css${style}`的方式无法生效，需要找到可行的传入字符串或JS对象的方法。

原代码示例：

import { Properties } from 'csstype';
import {LitElement, css, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import { convertStyle } from '../utils/convert-style';

const style: Properties = {
  color: 'blue'
}

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`${convertStyle(style)}`;

  render() {
    return html`<p>Hello, World!</p>`;
  }
}

// convert-style.ts
import { Properties } from "csstype";

/**
 * 将Properties对象转换为CSS字符串
*/
export function convertStyle(style: Properties) {
  return Object.entries(style)
  .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)
  .join(' ');
}

可行方案 #

Lit的css标签函数默认只接受静态字面量，动态生成的字符串会被安全机制过滤，要解决这个问题，需要使用Lit提供的unsafeCSS工具来包装转换后的样式字符串：

1. 导入unsafeCSS：从lit包中导入unsafeCSS工具
2. 用unsafeCSS包装样式字符串：在css模板中使用unsafeCSS(convertStyle(style))替代直接传入字符串

修改后的完整代码：

import { Properties } from 'csstype';
import {LitElement, css, html, unsafeCSS} from 'lit'; // 新增unsafeCSS导入
import {customElement, property} from 'lit/decorators.js';
import { convertStyle } from '../utils/convert-style';

const style: Properties = {
  color: 'blue',
  fontSize: '1.2rem' // 示例添加驼峰属性测试转换逻辑
}

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  // 使用unsafeCSS包装转换后的样式字符串
  static styles = css`${unsafeCSS(convertStyle(style))}`;

  render() {
    return html`<p>Hello, World!</p>`;
  }
}

// convert-style.ts 保持原转换逻辑不变
import { Properties } from "csstype";

/**
 * 将Properties对象转换为CSS字符串
*/
export function convertStyle(style: Properties) {
  return Object.entries(style)
  .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)
  .join(' ');
}

注意事项 #

• unsafeCSS会绕过Lit的样式安全检查，必须确保传入的样式内容是可信的，避免不可信内容导致的XSS风险。
• 如果样式是组件内部静态定义的（如示例中的style对象），使用unsafeCSS是安全的；如果涉及用户输入或外部动态内容，需要先做严格的内容校验和过滤。

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