HTML Components

All parts of a web application's user interface are made of HTML. Complex user interfaces like calendars or rich text editors can be made of many nested elements, which would be very difficult to maintain directly within the page. With HTML Components, it's possible to maintain nested HTML structures in separate HTML files and import them into the document by name, using custom HTML tags <like-this>. This has the added benefit of being able to reuse components of HTML.

Example HTML page:

<p>Pick a date from the calendar</p>

<form method="post">
	<calendar-control />
	<button name="do" value="set-date">Pick selected date</button>
</form>

The calendar-control component can be stored in a separate file called calendar-control.html, in a component directory.

_component/calendar-control.html

<form method="post">
	<select name="calendar-year" data-bind:value="selectedYear">
		<option data-template data-bind:text="year">0000</option>
	</select>
	<select name="calendar-month" data-bind:value="selectedMonth">
		<option data-template data-bind:text="monthName" data-bind:value="month">Month</option>
	</select>

	<ol>
		<li data-template>
			<label>
				<input type="radio" name="selectedDay" data-bind:value="day" />
				<span data-bind:text="day">0</span>
			</label>
		</li>
	</ol>
</form>

---

Next, learn how to template pages using Partial HTML.