Lit + FormProxy

component.js

import {FormProxy} from './form-proxy.js';

class MyComponent extends FormProxy(LitElement) {

	render () {
		return html`
			<form>
				<input type="text" />
			</form>
		`;
	}

};

form-proxy.js

export const FormProxy = (superClass) => class extends superClass {
	constructor () {
		super();
		this.outerForm = this.closest('form');
	}

	/**
	 * Get reference to the inner form element
	 */
	get innerForm () {
		return this.shadowRoot.querySelector('form');
	}

	/**
	 * Create proxy on connected
	 */
	connectedCallback () {
		super.connectedCallback();

		this.outerFormProxy = document.createElement('div');
		this.outerFormProxy.hidden = true;
		this.outerForm.appendChild(this.outerFormProxy);
	}

	/**
	 * Delete proxy on disconnected
	 */
	disconnectedCallback () {
		super.disconnectedCallback();

		this.outerFormProxy.remove();
	}

	/**
	 * On 'updated' update the hidden form input
	 */
	updated () {
		super.updated();

		const formData = new FormData(this.innerForm);
		let output = '';

		for (const [key, value] of formData) {
			output += `<input type="hidden" name="${key}" value="${value}" />`;
		}

		this.outerFormProxy.innerHTML = output;
	}
};