email-input-template.js

const template = document.createElement('template');
template.innerHTML = `
<!--Label that will display the input-title 'Email'-->
<label for="email-input">Email</label>

<!--Input field that will be validated when it loses focus-->
<input type="text" id="email-input" name="email-input">

<!--Container for the validation text, hidden by default-->
<div>
    <small style="visibility: hidden;" id="validationtext"></small>
</div>

<!--Styling for the validation text (class will be added in component logic)-->
<style>
    .invalid {
        color: red;
    }

    .valid {
        color: green;
    }
</style>
`;