Recreate Base lightning-input-field component?

Question

I would like to create a custom composite component to re-create the LWC input field behavior if possible.

<lightning-record-edit-form ... >
 <template for:each={Fields} for:item="field">
   <c-input-field-wrapper 
     key={field.name} 
     field-name={field.name}
     data-type={field.type}
 ></c-input-field-wrapper>
</template>
</lightning-record-edit-form>

The inputFieldWrapper would then be a large case statement (template ifs) that outputs different input components depending on the data-type.

The issue I have is that the data binding breaks when it's rendered as a child component.

I know that components can be mixed as Steven's been able to demonstrate Wissel Blog - Mixing lwc-inputs with custom data aware fields The but in his example he's declaring the inputs explicityly, and I'd like to dynamically render a specific one inside a loop depending on the data type and bind it.

That being said - I'm looking for help on the best method to go about doing this. A fellow dev mentioned that angular's use of a "replace:true" tag attribute allowed the rendered tag to be not shown as shown here but I don't know if the lwc engine allows for this behavior either.

As a side-note - Salesforce documents this behavior for the outputfield but does not mention it for the input field: Usage Considerations of Output Field . In this they mention that the output field must be a child of form with nesting restrictions (e.g. "You can't nest it in another component like lightning-layout though you can nest it in a div").

Any Help would be greatly appreciated - Thank you!

Answer 1

The short answer: don’t.

The long answer: You render separate record edit forms since that tag is inside the template repeat. That set aside, dynamic creation of components has explicitly been excluded from LWC since the respective Aura function has led to only grief and performance degradation.

What you can do if you feel that you want some dynamic creation: move that from runtime to design time. A call into the UI api can retrieve the fields and render a needed template.