fix: add hidden input for lit-element after render completes

Author: Brion Fuller

Diff for: src/types.ts

@@ -60,4 +60,8 @@ export interface ICustomElement extends HTMLElement {
   disabled?: boolean;
 }
 
+export interface ILitElement extends ICustomElement {
+  updateComplete: Promise<void>;
+}
+
 export type LabelsList = NodeListOf<HTMLLabelElement>|[];

Diff for: src/utils.ts

@@ -1,5 +1,5 @@
 import { hiddenInputMap, formsMap, formElementsMap, internalsMap } from './maps.js';
-import { ICustomElement, IElementInternals, LabelsList } from './types.js';
+import { ICustomElement, IElementInternals, ILitElement, LabelsList } from './types.js';
 
 const observerConfig: MutationObserverInit = { attributes: true };
 
@@ -47,11 +47,15 @@ export const removeHiddenInputs = (internals: IElementInternals): void => {
  * @param {IElementInternals} internals - The element internals instance for the ref
  * @return {HTMLInputElement} The hidden input
  */
-export const createHiddenInput = (ref: ICustomElement, internals: IElementInternals): HTMLInputElement | null => {
+export const createHiddenInput = (ref: ICustomElement | ILitElement, internals: IElementInternals): HTMLInputElement | null => {
   const input = document.createElement('input');
   input.type = 'hidden';
   input.name = ref.getAttribute('name');
-  ref.after(input);
+  if ((<ILitElement>ref).updateComplete) {
+    (<ILitElement>ref).updateComplete.then(() => ref.after(input));
+  } else {
+    ref.after(input);
+  }
   hiddenInputMap.get(internals).push(input);
   return input;
 }