Web Components 

Who is this guy? nikgraf www.nikgraf.com [email protected] Web Components 

How to Use index.html Web Components 

Web Components 

How to Use index.html Web Components 

Web Components 

Web Component Web Components 

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

Easier and Faster Prototyping

Welcome to Berlin

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 <span class=”hour”></span>: <span class=”minute”></span> HTML encourages run-time string parsing (.innerHTML) user-supplied data → Cross-site scripting Web Components 

HTML Templates : var template = document.querySelector("#clock-tmpl"); // comment is a DocumentFragment var comment = template.content.cloneNode(true); 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 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 

Web Components 

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

Shadow DOM

Black header

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); Black header Red header Web Components HTML 

Shadow DOM shadowRoot.resetStyleInheritance = false; shadowRoot.applyAuthorStyles = false; @host { *:hover { color: red }; } #clock::x-hour { color: blue; } 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 14:20 to the DOM document.body.appendChild(clock); Web Components tick_tock_clock.html 

var link = document.querySelector('link[rel=import]'); var content = link.import.querySelector('#clock'); HTML Imports Web Components clock.html index.html 

Web Component Web Components 14: 30 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}); clock.html index.html 

Use Web Components today Web Components 

Web Component (Polymer.js) Web Components 14: 30 Polymer('my-clock'); clock.html index.html 

Think Big Web Components 

Thanks for listening! nikgraf www.nikgraf.com [email protected] 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/