13. 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");
for(var i=0; i<items.length;i++) {
items[i].style.display =
(items[i].textContent.match(this.value) ? "block" : "none");
14. 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
15. 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
21. 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");
var root = container.createShadowRoot();
root.appendChild(tplContent);
22. 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();
var tplContent = document.querySelector("template").content.cloneNode(true);
this.root.appendChild(tplContent);
};
23. 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>
