Question

@JsModule("./src/component/den-checkbox-helper.ts")
@Tag("den-checkbox-helper")
public class DenCheckboxHelper extends LitTemplate implements LocaleChangeObserver, HasHelper, HasText, HasValue<HasValue.ValueChangeEvent<Boolean>,Boolean> {

    @Id("checkbox")
    private Checkbox checkbox;
    private String helperText;
    private final String key;
    private boolean translate = true;

    public DenCheckboxHelper(String title, String helperText) {
        super();
        this.key = title;
        this.helperText = helperText;
    }

    @Override
    public void localeChange(LocaleChangeEvent event) {
        if (key != null && translate) {
            checkbox.setLabel(getTranslation(key));
        }
        if (helperText != null && translate) {
            setHelperText(getTranslation(helperText));
        }
    }

    //Methods implemented by iterfaces
}

我认为我缺少一些东西，但不确定。

方法

setHelperText(String);

从接口中看到的是设置属性helpertext，但是您在lit-template中没有这样的propety。您应该添加它以及其他几件事。我现在不必测试它，但是我将在这里放置一些至少需要在那里的代码。 Vaadin的Lumo设计系统中有一些公用事业类，您可以导入。您可能需要进一步调整它。

  import { HelperController } from '@vaadin/field-base/src/helper-controller.js';
  import { FieldAriaController } from '@vaadin/a11y-base/src/field-aria-controller.js';
  // add your own imports

  @customElement('den-checkbox-helper')
  export class DenCheckboxHelper extends LitElement {

  @property()
  helperText : string | null = '';

  _tooltipController : HelperController | undefined;

  firstUpdated() {
    this._helperController = new HelperController(this);
    this._helperController.addEventListener('slot-content-changed', (event) => {
      const { hasContent, node } = event.detail;
      this.toggleAttribute('has-helper', hasContent);
      this.__helperChanged(hasContent, node);
    });
  }

  updated() {
    this._helperController.setHelperText(helperText);
  }

  __helperChanged(hasHelper, helperNode) {
    if (hasHelper) {
      this._fieldAriaController.setHelperId(helperNode.id);
    } else {
      this._fieldAriaController.setHelperId(null);
    }
  }

  render() {
    return html`
      <div>
        <vaadin-checkbox id="checkbox"></vaadin-checkbox>
        <div part="helper-text">
          <slot name="helper"></slot>
        </div>
      </div>
    `;
  }

}