Where are we today?

Today we use classes to give our Components meaning

This is known as semantics.

We've all built something like this:

								
<div class="schedule">
	<h1 class="schedule__header">Basketball Schedule</h1>
	<table class="schedule__table">
		<thead class="schedule__table__heading">
			<tr>
				<td>Time</td>
				<td>Event</td>
				<td>State</td>
			</tr>
		</thead>
		<tbody class="schedule__table__body">
		  <tr>
		    <td class="schedule__table__body__time">10:00 PM MST</td>
		    <td class="schedule__table__body__event">TTU @ TCU</td>
		    <td class="schedule__table__body__state">In Progress</td>
		  </tr>
		</tbody>

	</table>
</div>
								
							

or this:

							  
<div class="panel panel-default">
  <div class="panel-body">
		<p>Basic Panel Example</p>
  </div>
</div>
								
							

With Web Components, we can be much more semantic.

							  <panel>
	<panel-body>
		<p>Basic Panel Example</p>
	</panel-body>
</panel>
							

But the real magic is when we make smarter components.

Components with APIs, state, events, and life cycles.

HTML5 already gives us some new Web Components

Audio and Video tags use the same technology as Web Components will in the future.

Templates

<template id="MediaTemplate">
	<h2></h2>
	<img src="" alt="">
</template>

Inert until Activated

markup is hidden from the DOM so it doesn't render.

No side effects

Script doesn't run, images don't load, audio doesn't play

<template id="MediaTemplate">
	<div class="media-item">
		<h2></h2>
		<script>
			console.log('my template loaded!');
		</script>
		<img src="/images/article.png" alt="">
	</div>
</template>