Select component on LitElement template can not inject to server side Java with Vaadin 20.0.3

Question

Select component doesn't work with the code below:

typescript

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 {
    render() {
        return html`
            <vaadin-horizontal-layout>
                <vaadin-select id="linkagePosition">
                    <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

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

The code works on client side, but doesn't inject the component on server side Java. Then an error occurs on client side below:

FlowBootstrap.js?f80c:67 There seems to be an error in the Vaadin Select: You should only use either a renderer or a template for select content Please submit an issue to https://github.com/vaadin/vaadin-select/issues/new!

How to inject Select component to server side Java? Do you have any idea?

Answer 1

If you are using @Id binding to connect an element to a server-side Component, you should leave the contents of the element empty and initialize the contents on the server. In other words, instead of using

 <vaadin-select id="linkagePosition">
                    <template>
                        <vaadin-list-box>
                            <vaadin-item>?</vaadin-item>
                            <vaadin-item>1</vaadin-item>
                            <vaadin-item>2</vaadin-item>
...

in your TypeScript file, you should have only

 <vaadin-select id="linkagePosition"></vaadin-select>

and initialize the select values in Java code.