相关文档
问题背景
在使用 Lit 框架开发 Web Components 时，我们可能需要使用 Shopify Polaris 的样式系统。然而，Polaris 是为 React 设计的组件库，如何在 Lit 中优雅地使用 Polaris 的样式成为一个挑战。
可能的解决方案
1. 直接导入 Polaris CSS
typescript
// main.ts
import "@shopify/polaris/build/esm/styles.css";
// 或
import "@shopify/polaris/dist/styles.css";需要在 vite.config.ts 中添加相应配置：
typescript
export default defineConfig({
resolve: {
alias: {
'@shopify/polaris': resolve(__dirname, 'node_modules/@shopify/polaris'),
},
},
css: {
modules: {
scopeBehavior: 'global'
}
},
});2. 手动编写样式文件
创建自定义的 Polaris 样式文件：
scss
// polaris-styles.scss
.Polaris-Spinner {
// ... 样式定义
}这种方法比较繁琐，不推荐使用。
3. 使用 @lit-labs/react 桥接
尝试将 React 组件转换为 Web Components：
typescript
import { createComponent } from '@lit-labs/react';
import React from 'react';
import { Spinner } from '@shopify/polaris';
export const PolarisSpinner = createComponent({
tagName: 'polaris-spinner',
elementClass: Spinner,
react: React,
});4. 创建 Polaris 风格的 Lit 组件（推荐方案）
创建一个组件库，使用 Polaris 的样式类名和设计：
- 创建基础组件目录结构：
css
components/
polaris/
spinner.ts
button.ts
card.ts
...- 实现 Spinner 组件示例：
typescript
// components/polaris/spinner.ts
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('polaris-spinner')
export class PolarisSpinner extends LitElement {
@property({ type: String })
size: 'small' | 'large' = 'large';
@property({ type: String })
accessibilityLabel = 'Loading';
createRenderRoot() {
return this;
}
render() {
const sizeClass = this.size === 'large' ? 'Polaris-Spinner--sizeLarge' : '';
return html`
<span class="Polaris-Spinner ${sizeClass}">
<svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
<path d="M15.542 1.487A21.507 21.507 0 00.5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 00-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 10-.9-2.863z"></path>
</svg>
<span class="Polaris-VisuallyHidden">${this.accessibilityLabel}</span>
</span>
`;
}
}参考：
- 使用组件：
typescript
// main-container.ts
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
import './polaris/spinner';
@customElement("main-container")
export class MainContainer extends LitElement {
render() {
return html`
<polaris-spinner
size="large"
accessibilityLabel="Loading content"
></polaris-spinner>
`;
}
}最佳实践建议
- 使用 Light DOM
- 通过
createRenderRoot() { return this; }确保样式可以正确继承 - Shadow DOM vs Light DOM
- 保持类名一致
- 使用与 Polaris 相同的类名命名规范（如
Polaris-ComponentName--modifier） - Polaris 设计系统
- 渐进式开发
- 根据需求逐步添加所需的组件
- 保持组件 API 设计与 Polaris React 版本一致
- Lit 生命周期
- 样式引入
- 在应用入口处引入 Polaris 的基础样式
- 确保构建工具正确配置以处理样式文件
- Lit CSS 集成
优点
- 保持了 Lit 的开发方式
- 复用了 Polaris 的样式和设计
- 使用方式简洁明了
- 可以根据需求逐步扩展
缺点
- 需要手动实现每个需要使用的组件
- 可能需要维护组件更新与 Polaris 版本的同步
结论
在 Lit 框架中使用 Polaris 样式的最佳方案是创建一个 Polaris 风格的 Lit 组件库。这种方式既保持了 Web Components 的优势，又能享受 Polaris 的设计系统，同时保持了良好的开发体验。