This document provides an overview of web components and their standards, including template elements, shadow DOM, custom elements, and HTML imports. It discusses how web components allow building new HTML elements using HTML, CSS, and JavaScript. While browser support is still limited, polyfills and frameworks exist to implement web components. The document encourages testing browser support and exploring useful tools and libraries.

1. Web components
A whirlwind tour

2. Ohai
I'm @g33konaut
These slides: bit.ly/webcomponents-intro
Ebook: leanpub.com/webcomponents
geekonaut.de
github.com/avgp

3. Let's talk about HTML
Lego ad from 1978

4. HTML is easy

5. 1991: HTML 1.0
TITLE
ISINDEX
ANCHOR
ISINDEX
PLAINTEXT
LISTING
P
H1, H2, ..., H6
ADDRESS
UL, MENU, DIR

6. 1993: HTML 2.0
+ Forms
+ Images
+ Head/Body
+ Strict mode

7. 1995: HTML 3.0
150 pages of specification
Different browsers have their own extensions
:(

8. 1998: HTML 4.0
Three infamous modes:
1. Strict
2. Transitional
3. Frameset
Tried to standardize most of the browser-specific elements

9. 1998 - 2008
...

10. The web evolved
vs

11. The web gained power
RIA, Web 2.0 and the first Smartphone
Image: Spiegel

12. But HTML fell behind

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

16. But then again...
Source: @stevefaulkner

17. Let's talk about Web components
Image CC-BY-SA 2.0 by Alan Chia, Source

18. Web components Standards:
Template element
Shadow DOM
Custom elements
HTML imports
Go read the intro here

19. Build new HTML elements
using HTML, CSS & Javascript

20. 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>

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>

25. It's already in your browser.
Sorta.

26. It's already in your browser.
Sorta.

27. Browser support
Test yourself: bit.ly/webcomptest
Source: are-we-componentized-yet, captured 03.05.14

28. Useful stuff
Polyfill & frameworks
Polymer
X-Tags
Try it
Brick
CustomElements.io
Mozilla AppMaker

29. Thank you!
Questions?
Slides: bit.ly/webcomponents-intro
@g33konaut
Blog @ ox86.tumblr.com