8. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 8/28
Let's talk about Web components
Image CC-BY-SA 2.0 by Alan Chia, Source
9. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 9/28
Let's talk about HTML
Lego ad from 1978
10. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 10/28
We need to move forward quickly
vs
11. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 11/28
A sample: Filterable list
<div class="filterList">
<label for="filterTerm">Search for: </label>
<input id="filterTerm">
<ul>
<li>Chuck Norris doesn't call the wrong number. You answer the wrong phone.</li>
<li>Chuck Norris has been to Mars; that's why there are no signs of life.</li>
<li>Chuck Norris refers to himself in fourth person.?</li>
<li>Chuck Norris once leaned against a tower in Pisa, Italy.</li>
<li>To keep is his mind sharp Chuck Norris plays Tic‑Tac‑Toe versus himself. He wins every time.</li>
<li>Light is so fast, because it tries to escape Chuck Norris (but that obviously fails)</li>
<li>The average room bears 73658 ways for Chuck Norris to kill you, including just the room itself.</li>
</ul>
</div>
<script>
document.getElementById("filterTerm").addEventListener("keyup", function() {
var items = document.querySelectorAll(".filterList li");
12. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 12/28
How to go on from here?
1. Keep it a Javascript hack
2. Try to implement it directly in the browser's codebases
3. Try to get it standardized
13. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 13/28
How to go on from here?
1. Keep it a Javascript hack
2. Try to implement it directly in the browser's codebases
3. Try to get it standardized
14. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 14/28
But then again...
Source: @stevefaulkner
15. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 15/28
Web components Standards:
Template element
Shadow DOM
Custom elements
HTML imports
Go read the intro here
16. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 16/28
Build new HTML elements
using HTML, CSS & Javascript
17. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 17/28
Template elements
<template>
<script>
console.log("Hi!");
</script>
<h1></h1>
</template>
<button id="add">Make a headline</button>
<script>
document.getElementById("add").addEventListener("click", function() {
var tplContent = document.querySelector("template").content;
tplContent.querySelector("h1").textContent = window.prompt("Headline");
document.body.appendChild(tplContent.cloneNode(true));
});
</script>
18. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 18/28
Shadow DOM
<template>
<script>
console.log("Hi!");
</script>
<h1></h1>
</template>
<button id="add">Make a headline</button>
<button id="test">Test for headlines</button>
<script>
document.getElementById("add").addEventListener("click", function() {
var tplContent = document.querySelector("template").content.cloneNode(true);
tplContent.querySelector("h1").textContent = window.prompt("Headline");
var container = document.createElement("div");
19. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 19/28
Custom elements
<template>
<script>
console.log("Hi.");
</script>
<h1></h1>
</template>
<button id="add">Make a headline</button>
<button id="test">Test for headlines</button>
<script>
var elemPrototype = Object.create(HTMLElement.prototype);
elemPrototype.createdCallback = function() {
console.log("Created element");
this.root = this.createShadowRoot();
20. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 20/28
HTML imports
<link rel="import" href="filterlist.html">
<filter‑list>
<li>Chuck Norris doesn't call the wrong number. You answer the wrong phone.</li>
<li>Chuck Norris has been to Mars; that's why there are no signs of life.</li>
<li>Chuck Norris refers to himself in fourth person.?</li>
<li>Chuck Norris once leaned against a tower in Pisa, Italy.</li>
<li>To keep is his mind sharp Chuck Norris plays Tic‑Tac‑Toe versus himself. He wins every time.</li>
<li>Light is so fast, because it tries to escape Chuck Norris (but that obviously fails)</li>
<li>The average room bears 73658 ways for Chuck Norris to kill you, including just the room itself.</li>
</filter‑list>