A component is..

• a custom <tag>
• behaviours
• styling

The Problem

Re-using components is hard!

How do I distribute the HTML, CSS, and JavaScript?

How do I create a component that others can use?

How can I extend the browser with my components?

Custom Elements

Example

<script>
var p = Object.create(HTMLElement.prototype);
p.createdCallback = function() { this.innerHTML = "Kittens go here!"; };
p.attachedCallback = function() { console.log("Inserting into doc."); };
p.detachedCallback = function() { console.log("Removing from doc."); };
p.attributeChangedCallback = function() { console.log("attribute changed", arguments); };

var custom_elem = document.registerElement('x-kitten-1', { prototype: p });
</script>

Templates

Example

<template id="kitten-2-template">
	<style>
	.kitten-img { width: 50%; }
	</style>
	<img src="imgs/6-day-kitten.png" class="kitten-img" credit="http://elvira1990.deviantart.com/art/sleeping-6-days-old-kitten-377444631">
</template>
<script>
	var p = Object.create(HTMLElement.prototype);
	p.createdCallback = function() {
		var template = document.querySelector("#kitten-2-template");
		var content = template.content.cloneNode(true);
		this.appendChild(content);
	};
	var custom_elem =
		document.registerElement('x-kitten-2', { prototype: p });
</script>

Shadow DOM

Example

<template id="kitten-2-template">
	<style>
	.kitten-img { width: 50%; }
	</style>
	<img src="imgs/6-day-kitten.png" class="kitten-img"
		credit="http://elvira1990.deviantart.com/art/sleeping-6-days-old-kitten-377444631" />
</template>
<script id="example1">
	var p = Object.create(HTMLElement.prototype);
	p.createdCallback = function() {
		var template = document.querySelector("#kitten-2-template");
		var content = document.importNode(template.content, true);
		var shadow_root = this.createShadowRoot();
		shadow_root.appendChild(content);
	};
	var custom_elem =
		document.registerElement('x-kitten-3', { prototype: p });
</script>

Imports

Example

	<link rel="import" href="x-kitten-4.html">

Using Custom Elements

Polymer

A cross broswer "prolyfill" for web components

Include platform.js

Chrome Flag

#enable-experimental-web-platform-features

Gotchas

Imports are synchronous and blocking by default

Imports add one (or more) HTTP request

Missing data binding Missing inter-component communicating