Web Components

Who is this guy?
nikgraf
www.nikgraf.com
nik@blossom.io
Web Components

How to Use
<html>
<head>
<link rel="import" href="/path/calendar.html">
</head>
<body>
<custom-calendar></custom-calendar>
</body>
</html>
index.html
Web Components

How to Use
<html>
<head>
<link rel="import" href="/path/to/map.html">
</head>
<body>
<open-street-map location-x=”13.252601623535156”
location-y=”52.45077881417044”
zoom=”5”>
</open-street-map>
</body>
</html>
index.html
Web Components

Why?
Component
Component
Component
● Encapsulation
● Reusability
● Composability
Web Components

Easier and Faster Prototyping
<bootstrap-modal>
<h2>Welcome to Berlin</h2>
<open-street-map location-x=”13.252601623535156”
location-y=”52.45077881417044”
zoom=”5”>
</open-street-map>
</bootstrap-modal>
Web Components

Web Component
● HTML Templates inert chunks of clonable DOM
● Custom Elements create new HTML elements
● Shadow DOM encapsulation & boundaries inside of DOM
● HTML Imports import html documents
Web Components

Client Side Templating
<script id="clock-template" type="text/x-type-template">
<span class=”hour”></span>:
<span class=”minute”></span>
</script>
HTML
encourages run-time string parsing (.innerHTML)
user-supplied data → Cross-site scripting
Web Components

HTML Templates
<template id="clock-tmpl">
<span class=”hour”></span>:
<span class=”minute”></span>
</template>
<script>
var template = document.querySelector("#clock-tmpl");
// comment is a DocumentFragment
var comment = template.content.cloneNode(true);
</script>
Web Components
HTML

HTML Templates
Web Components
Working directly with the DOM
no runtime script parsing, smaller XSS attack vector
Hidden from document
cannot traverse into its DOM via JavaScript
Content gets parsed, not rendered
<script> tags aren’t executed, images aren't loaded,
media doesn't play, etc.

“
”
Shadow DOM
Web Components
Shadow DOM gives us markup encapsulation,
style boundaries, and exposes (to web
developers) the same mechanics browsers
vendors have been using to implement their
internal UI.
Eric Bidelman

Shadow DOM
Web Components
Let’s dig deeper

Shadow DOM
<div id="clock"></div>
<script>
var host = document.querySelector('#clock');
// use webkitCreateShadowRoot for now
var shadowRoot = host.createShadowRoot();
shadowRoot.innerHTML = "<span>14</span>:
<span>30</span>";
</script>
Web Components
HTML

Shadow DOM
<h2>Black header</h2>
<script>
var host = document.createElement('div');
var shadowRoot = host.createShadowRoot();
var content = "<style>h2 {color: red}</style>";
content += "<h2>Red header</h2>";
shadowRoot.innerHTML = content;
document.body.appendChild(host);
</script>
Black header
Red header
Web Components
HTML

Shadow DOM
shadowRoot.resetStyleInheritance = false;
shadowRoot.applyAuthorStyles = false;
@host {
*:hover { color: red };
}
<span pseudo="x-hour"></span>
<my-clock id=”clock”></my-clock>
<style> #clock::x-hour { color: blue; } </style>
Web Components
HTML
Component CSS
clock.html Template
index.html

Custom Elements
var ClockPrototype = Object.create(HTMLElement.prototype);
ClockPrototype.createdCallback = function() {
this.impl.textContent = "14:20";
};
var Clock = document.register('custom-clock', {
prototype: ClockPrototype
});
var clock = new Clock();
// adds <custom-clock>14:20</custom-clock> to the DOM
document.body.appendChild(clock);
Web Components
tick_tock_clock.html

Web Component
Web Components
<template id="clock-tmpl">
</template>
<script>
var ClockProto = Object.create(HTMLElement.prototype);
ClockProto.createdCallback = function() {
var template = document.querySelector('#clock-tmpl');
var shadowRoot = this.createShadowRoot();
var clone = template.content.cloneNode(true);
shadowRoot.appendChild(clone);
};
document.register('my-clock', {prototype: ClockProto});
</script>
<my-clock></my-clock>
clock.html
index.html

Use Web Components today
Web Components

Web Component (Polymer.js)
Web Components
<polymer-element name="my-clock">
<template>
</template>
<script>Polymer('my-clock');</script>
</polymer-element>
<my-clock></my-clock>
clock.html
index.html

Think Big
Web Components
<login-form></login-form>

Thanks for listening!
nikgraf
www.nikgraf.com
nik@blossom.io
Web Components

Further Reading
Web Components
Web Components
http://www.youtube.com/watch?v=fqULJBBEVQE
https://dvcs.w3.org/hg/webcomponents/raw-file/57f8cfc4a7dc/explainer/index.html
HTML Templates
http://www.html5rocks.com/en/tutorials/webcomponents/template/
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html
HTML Imports
http://robdodson.me/blog/2013/08/20/exploring-html-imports/
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/imports/index.html

Further Reading
Web Components
Shadow DOM
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/
http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html
Custom Elements
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html
Resources
Web Components https://plus.google.com/103330502635338602217/posts
Lego Bricks http://commons.wikimedia.org/wiki/File:2_duplo_lego_bricks.jpg
Polymer Architecture http://www.polymer-project.org/
Icons http://pictos.cc/

Web Components

More Related Content

What's hot (20)

Similar to Web Components (20)

More from Nikolaus Graf (10)

Recently uploaded (20)

Web Components