lion-form: custom form using slot

[nbamfordcirium]

Expected behavior

I would like to customize lion-form to a custom form component that could contain arbitrary form controls, like the following:

import {
  LitElement,
  customElement,
  property,
  html,
} from '@lion/core';

import '@lion/form/define';
import '@lion/button/define';

@customElement('my-form')
export class MyForm extends LitElement {
  @property() submitHandler?: (formData: FormData) => void;

  _handleSubmit = (event) => {
    const formData = event.target?.serializedValue;

    if (this.submitHandler) {
      this.submitHandler(formData);
    }
  };

  render() {
    return html`
      <lion-form @submit="${this._handleSubmit}">
        <form>
          <slot></slot>
          <lion-button-submit>Submit</lion-button-submit>
        </form>
      </lion-form>
    `;
  }
}

and then it would be used like:

<my-form>
  <lion-input label="Name"></lion-input>
</my-form>

Actual Behavior

Unfortunately, I can't seem to make the live code samples import lion components beyond the tooltip, but though the submit is called as I would expect, the form serializedValue is always empty.

Is there any way for me to derive a customized lion-form in this way?

Additional context

lion-form:0.15.0