Web Components are like Lego bricks. Easy to assemble and every piece simply fits together. But there is even more to it. Being able to create your own HTML-Tags with encapsulated style & logic changes the way you think about structuring your web applications. Get a sneak peek on how to develop scalable & maintainable applications in the future.
2. Who is this guy?
nikgraf
www.nikgraf.com
nik@blossom.io
Web Components
3. How to Use
<html>
<head>
<link rel="import" href="/path/calendar.html">
</head>
<body>
<custom-calendar></custom-calendar>
</body>
</html>
index.html
Web Components
9. 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
10. 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
11. 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
12. 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
13. 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.
14. “
”
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
17. 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
18. 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
19. 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
20. 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
21. <link rel="import" href="clock.html">
<script>
var link = document.querySelector('link[rel=import]');
var content = link.import.querySelector('#clock');
</script>
HTML Imports
Web Components
<div id="clock">
<span class=”hour”>14</span>:
<span class=”minute”>30</span>
</div>
clock.html
index.html
22. Web Component
Web Components
<template id="clock-tmpl">
<span class=”hour”>14</span>:
<span class=”minute”>30</span>
</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>
<link rel="import" href="clock.html">
<my-clock></my-clock>
clock.html
index.html
27. 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
28. 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/