Vaadin 20.0.3中LitElement模板的Select组件无法注入服务端Java如何解决

问题原因 #

报错的核心原因是Vaadin Select组件不允许同时使用前端内置template和服务端渲染器：当你用@Id注入服务端Select类实例时，Vaadin Flow会自动给前端Select组件绑定一套服务端控制的渲染逻辑，和你在前端模板里写死的<template>选项冲突，因此注入失败、抛出错误。

解决方案 #

方案1（推荐）：移除前端模板内的Select选项，完全交给服务端管理 #

这是最适配Vaadin Flow注入逻辑的方案，无额外兼容成本。

调整后前端TS代码

import {LitElement, html} from 'lit-element';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout.js';
import '@vaadin/vaadin-select/vaadin-select.js';

class LinkageToolbar extends LitElement {
    render() {
        return html`
            <vaadin-horizontal-layout>
                <!-- 仅保留空的select节点，移除内部template和选项 -->
                <vaadin-select id="linkagePosition"></vaadin-select>
            </vaadin-horizontal-layout>
            `;
    }
}

customElements.define('linkage-toolbar', LinkageToolbar);

调整后Java代码

Java端注入后直接配置选项即可，其他逻辑完全不受影响：

@Tag("linkage-toolbar")
@JsModule("./src/linkage-toolbar.ts")
@SuppressWarnings("serial")
public class LinkageToolbar extends LitTemplate {
    @Id("linkagePosition")
    private Select<String> linkagePosition;

    // 构造方法里初始化选项
    public LinkageToolbar() {
        linkagePosition.setItems("?", "1", "2", "3", "4", "5", "6", "7", "8", "9");
        // 也可正常添加值变化监听、设置选中值等服务端操作
    }
}

方案2：保留前端写死的选项，改用属性同步取值 #

如果你的业务场景必须把选项写死在前端模板内，可以放弃注入Select组件，改用属性双向同步的方式交互：

前端TS代码（保留原template，加双向绑定）

import {LitElement, html} from 'lit-element';
import '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout.js';
import '@vaadin/vaadin-select/vaadin-select.js';
import '@vaadin/vaadin-list-box/theme/lumo/vaadin-list-box.js';
import '@vaadin/vaadin-item/theme/lumo/vaadin-item.js';

class LinkageToolbar extends LitElement {
    static get properties() {
        return {
            linkageValue: { type: String }
        }
    }

    render() {
        return html`
            <vaadin-horizontal-layout>
                <vaadin-select 
                    id="linkagePosition" 
                    .value="${this.linkageValue}" 
                    @value-changed="${e => this.linkageValue = e.detail.value}"
                >
                    <template>
                        <vaadin-list-box>
                            <vaadin-item>?</vaadin-item>
                            <vaadin-item>1</vaadin-item>
                            <vaadin-item>2</vaadin-item>
                            <vaadin-item>3</vaadin-item>
                            <vaadin-item>4</vaadin-item>
                            <vaadin-item>5</vaadin-item>
                            <vaadin-item>6</vaadin-item>
                            <vaadin-item>7</vaadin-item>
                            <vaadin-item>8</vaadin-item>
                            <vaadin-item>9</vaadin-item>
                        </vaadin-list-box>
                    </template>
                </vaadin-select>
            </vaadin-horizontal-layout>
            `;
    }
}

customElements.define('linkage-toolbar', LinkageToolbar);

调整后Java代码

通过@Synchronize注解同步属性值即可，无需注入Select组件：

@Tag("linkage-toolbar")
@JsModule("./src/linkage-toolbar.ts")
@SuppressWarnings("serial")
public class LinkageToolbar extends LitTemplate {

    @Synchronize("linkageValue-changed")
    public String getLinkageValue() {
        return getElement().getProperty("linkageValue");
    }

    public void setLinkageValue(String value) {
        getElement().setProperty("linkageValue", value);
    }
}

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