如何在Lit Element中使用Vaadin Badge组件？

我尝试在Lit Element中使用Vaadin Badge组件，文档提到“要在应用中使用这些类，需在主题的theme.json中启用它们”，但我没有这个文件，而且大部分文档都是以Java为重点，这让我很困惑。目前我只通过NPM安装了部分组件，尝试创建了frontend/themes/common-theme/theme.json文件但没成功。

我的组件代码如下：

import {LitElement, html} from 'lit';

import '@vaadin/vertical-layout';
import '@vaadin/horizontal-layout';

import '@vaadin/vaadin-lumo-styles/badge.js';

export class PaymentLink extends LitElement {
    static properties = {
        version: {},
        link : { Object}
    };

    constructor() {
        super();
    }

    render() {
        return html`
            <vaadin-horizontal-layout>
                <a href="${this.link.url}">${this.link.id}</a>
                <span theme="badge">Pending</span>
            </vaadin-horizontal-layout>
    `;
    }

}
customElements.define('payment-link', PaymentLink);

我还有对应的StackBlitz示例，求指点问题出在哪。

解决方法 #

1. 正确使用Vaadin Badge组件（推荐） #

你之前混淆了Vaadin Flow（Java框架）和纯前端Lit项目的配置逻辑：theme.json是Vaadin Flow项目的主题配置文件，纯前端Lit项目完全不需要它。

正确步骤：

• 首先安装完整的Vaadin Badge组件：

  npm install @vaadin/badge
  

• 在组件中导入Badge组件，替换原来的span写法：

  import {LitElement, html} from 'lit';
  
  import '@vaadin/vertical-layout';
  import '@vaadin/horizontal-layout';
  // 导入Vaadin Badge组件
  import '@vaadin/badge';
  
  export class PaymentLink extends LitElement {
      static properties = {
          version: {},
          link : { type: Object }
      };
  
      constructor() {
          super();
      }
  
      render() {
          return html`
              <vaadin-horizontal-layout>
                  <a href="${this.link.url}">${this.link.id}</a>
                  <!-- 使用官方Badge组件，可通过theme属性配置样式 -->
                  <vaadin-badge theme="primary">Pending</vaadin-badge>
              </vaadin-horizontal-layout>
      `;
      }
  
  }
  customElements.define('payment-link', PaymentLink);
  

2. 若只想用Lumo的badge样式类 #

如果不想用<vaadin-badge>组件，只想用Lumo主题的badge样式，需要：

• 全局导入Lumo主题的完整样式：

  import '@vaadin/vaadin-lumo-styles/all-imports.js';
  

• 给span添加Lumo的badge类（普通HTML元素不识别Vaadin组件的theme属性）：

  <span class="badge">Pending</span>
  

关键说明 #

Vaadin官方文档确实对Java的Vaadin Flow项目侧重更多，纯前端Lit项目的配置要简化很多：

• 无需theme.json，纯前端项目直接通过npm安装组件，导入对应组件或样式即可
• Vaadin组件的theme属性仅对官方Vaadin自定义元素生效，普通HTML元素需要用类名来应用Lumo样式

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