Slotted error text in a form item

const [value, setValue] = useState("");

  const onChange = (detail: GoabInputOnChangeDetail) => {
    setValue(detail.value);
  };

  const errorMessage = (
    <>
      <i>This is </i> slotted <b>error text</b>.
    </>
  );

<GoabxFormItem label="First name" error={errorMessage}>
      <GoabxInput onChange={onChange} value={value} name="item" error={true} />
    </GoabxFormItem>

form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      item: [""],
    });
  }

<goabx-form-item label="First name" [formGroup]="form">
  <goabx-input name="item" formControlName="item" [error]="true"></goabx-input>
  <goabx-form-item-slot slot="error">
    <span>This is </span>
    <i>slotted </i>
    <b>error text.</b>
  </goabx-form-item-slot>
</goabx-form-item>

const input = document.querySelector('goa-input[name="item"]');
input.addEventListener("_change", (e) => {
  console.log("Value changed:", e.detail.value);
});

<goa-form-item version="2" label="First name">
  <goa-input version="2" name="item" error="true"></goa-input>
  <div slot="error">
    <span>This is </span>
    <i>slotted </i>
    <b>error text.</b>
  </div>
</goa-form-item>