Best way to create a reusable Aurelia widget that encapsulates both the label and the edit field - aurelia

Question

I'm trying to create a simple Aurelia reusable widget that encapsulates both a label and a text input field. The idea is to create a library of these reusable UI widgets to make it easier to compose screens and forms - perhaps taking some learnings from "Angular Formly".
text-field.html template:
<template>
<div class="form-group">
<label for.bind="name">${label}</label>
<input type="text" value.two-way="value" class="form-control" id.one-way="name" placeholder.bind="placeHolder">
</div>
</template>
text-field.js view model:
import {bindable} from 'aurelia-framework';
export class TextField {
#bindable name = '';
#bindable value = '';
#bindable label = '';
#bindable placeHolder = '';
}
client.html template snippet (showing usage of text-field):
<text-field name="firstName" value.two-way="model.firstName" label="First Name" placeHolder="Enter first name"></text-field>
<text-field name="lastName" value.two-way="model.lastName" label="Last Name" placeHolder="Enter last name"></text-field>
client.js view model (showing usage of text-field):
class ClientModel {
firstName = 'Johnny';
lastName = null;
}
export class Client{
heading = 'Edit Client';
model = new ClientModel();
submit(){
alert(`Welcome, ${this.model.firstName}!`);
}
}
QUESTION:
When the final HTML is generated, the attributes are "doubled up" by for example having both the id.one-way="name" AND id="firstName" (see below) - why is this and is there a better way to do this entire reusable text field control?:
<input type="text" value.two-way="value" class="form-control au-target" id.one-way="name" placeholder.bind="placeHolder" id="firstName" placeholder="">

Answer 1

That's normal. Same as if you do style.bind="expression" on a div and expression has display:block. You will end up with <div style.bind="expression" style="display:block"/>. The browser ignores style.bind because it is not a known html attribute. You can just ignore the Aurelia one.