看起来很奇怪<vaadin-integer-field>＆<vaadin-button>

Question

我以前曾在不同的项目中多次使用过 vaadin WebComponents，但现在我陷入困境，似乎无法弄清楚。请指教。

出于测试目的，我尝试使用

<vaadin-integer-field>

和

<vaadin-button>

这就是它们的样子。完全关闭，为什么！？

实际导入的组件：

import { LitElement, html, css } from 'lit';
import { Router } from '@vaadin/router';



class BoxkeyPwaClient extends LitElement {
  static properties = {
    header: { type: String },
  }

  static styles = css`
    :host {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      font-size: calc(10px + 2vmin);
      color: #1a2b42;
      max-width: 960px;
      margin: 0 auto;
      text-align: center;
      background-color: var(--boxkey-pwa-client-background-color);
    }

    main {
      flex-grow: 1;
    }
  `;

  constructor() {
    super();
  }

  firstUpdated() {
    this.initiateRouter();
  }

  initiateRouter() {

    const routerOutletElement = this.renderRoot.getElementById('router-outlet')  
    this.router = new Router(routerOutletElement)
    
    this.router.setRoutes([
      {
        path: '/',
        component: 'loading-page',
        action: async () => { await import('./pages/loading-page') },
        animate: false
      },
      {
        path: '/map',
        component: 'map-page',
        action: async () => { await import('./pages/map-page') },
        animate: false
      },
      {
        path: '/test',
        component: 'test-page',
        action: async () => { await import('./pages/test-page') },
        animate: false
      }
    ]);
  }

  render() {
    return html`
      <div id="router-outlet"></div>
    `;
  }
}

customElements.define('boxkey-pwa-client', BoxkeyPwaClient);

通过路由器插座显示上述组件的组件。

import { LitElement, html, css } from 'lit';
import '@vaadin/integer-field';

class TestPage extends LitElement {
  static properties = {
    counter: { type: String },
  }

  static styles = css`
    :host {

    }

  `;

  constructor() {
    super();
    this.counter = 0;
  }

  render() {
    return html`
      <vaadin-integer-field value="2" step-buttons-visible min="0" max="9"></vaadin-integer-field>
    `;
  }
}

customElements.define('test-page', TestPage);

应该看起来像这样。

Answer 1

Lit 版本之间似乎存在冲突。 @open-wc 生成器默认安装 Lit 2，而最新的 Vaadin 使用 Lit 3:

更新 package.json 中的 lit 版本解决了我的问题：

- "lit": "^2.0.2"
+ "lit": "^3.1.3"