HTML Attributes
You can use data to conditionally include or change the value of HTML attributes in your template.
Form field values
To dynamically set checked, selected, and value attributes, prefix them with an @ symbol. Use a falsy value when the item should not be checked or selected.
In the example below, the checkbox is checked when agreeToTOS is true.
// The reactive store
let data = store({
agreeToTOS: true
});
// The template
function template () {
return `
<label>
<input type="checkbox" @checked="${agreeToTOS}">
</label>`;
}
// The component
component('#app', template);
Default values
You might instead want to use a default value when an element initially renders, but defer to any changes the user makes after that.
You can do that by prefixing your attributes with a # symbol.
In this example, Merlin has the [selected] attribute on it when first rendered, but will defer to whatever changes the user makes when diffing and updating the UI.
function template () {
return `
<label for="wizards">Who is the best wizard?</label>
<select>
<option>Gandalf</option>
<option #selected>Merlin</option>
<option>Ursula</option>
</select>`;
}