introduction to web components
DESCRIPTION
A short introduction to web components. The talk covers the basic standard specified by W3c like HTML imports, templates, shadow DOM and custom elements. Further a short overview of polyme, x-tags/Brick is given and shows how these bring together native browser implementation, polyfills and framework code to leverage web components technology today.TRANSCRIPT
![Page 1: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/1.jpg)
WEBCOMPONENTS@marcbaechinger
![Page 2: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/2.jpg)
‚web development is overly complex…‘unknown, but desperate software engineer
![Page 3: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/3.jpg)
lack of encapsulation and abstraction
![Page 4: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/4.jpg)
TODAYS STANDARDS BODY
![Page 5: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/5.jpg)
STANDARDS BODY
W3C webcomponents
![Page 6: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/6.jpg)
STANDARDS BODY
W3C webcomponents
heavily in flux
![Page 7: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/7.jpg)
STANDARDS BODY
W3C webcomponents
webcomponents polyfill
heavily in flux
![Page 8: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/8.jpg)
STANDARDS BODY
W3C webcomponents
webcomponents polyfill
heavily in flux
2013: same for x-tags and polymer
![Page 9: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/9.jpg)
STANDARDS BODY
W3C webcomponents
webcomponents polyfill
x-tags polymer
brick polymer elements
heavily in flux
2013: same for x-tags and polymer
![Page 10: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/10.jpg)
STANDARDS BODY
W3C webcomponents
webcomponents polyfill
x-tags polymer
brick polymer elements
heavily in flux
2013: same for x-tags and polymer
wrapper API (JS/HTML)
![Page 11: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/11.jpg)
STANDARDS BODY
W3C webcomponents
webcomponents polyfill
x-tags polymer
brick polymer elements
heavily in flux
2013: same for x-tags and polymer
wrapper API (JS/HTML)element sets (accordion, …)
![Page 12: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/12.jpg)
http://www.w3.org/TR/components-intro/
Templates
Custom elements
Shadow DOM
Imports
June 2013
![Page 13: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/13.jpg)
BROWSER SUPPORTpolymer
![Page 14: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/14.jpg)
BROWSER SUPPORT
x-tags
polymer
![Page 15: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/15.jpg)
HTML IMPORTS
![Page 16: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/16.jpg)
imports.html
<link href="../styles/import.css" rel="stylesheet"/> <section id="root"> <h1>Caption of import</h1> <p>imported text<p> </section> <script> (function (global) { global.markup = { hi: function () { console.log("hi from a fun declared in an import"); } }; }(this)); </script>
![Page 17: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/17.jpg)
HTML IMPORTS
<link id="markup" rel="import" href="imports.html">
import html fragment
![Page 18: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/18.jpg)
var link = __.e("#markup"); var markup = link.import; var fragment = markup.querySelector("#root");
access import
HTML IMPORTS
<link id="markup" rel="import" href="imports.html">
import html fragment
![Page 19: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/19.jpg)
var link = __.e("#markup"); var markup = link.import; var fragment = markup.querySelector("#root");
access import
HTML IMPORTS
<link id="markup" rel="import" href="imports.html">
import html fragment
usually cloned before use
![Page 20: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/20.jpg)
HTML IMPORTS
![Page 21: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/21.jpg)
HTML IMPORTS
check for import property to feature test
![Page 22: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/22.jpg)
SCRIPTS IN IMPORTS// in the import fragment <script> (function (global) { global.markup = { hi: function () {} }; }(window)); </script>
// in the parent document window.markup.hi();
![Page 23: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/23.jpg)
SCRIPTS IN IMPORTS// in the import fragment <script> (function (global) { global.markup = { hi: function () {} }; }(window)); </script>
// in the parent document window.markup.hi();
executed once when imported
![Page 24: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/24.jpg)
SCRIPTS IN IMPORTS// in the import fragment <script> (function (global) { global.markup = { hi: function () {} }; }(window)); </script>
// in the parent document window.markup.hi();
parent global context
executed once when imported
![Page 25: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/25.jpg)
NO PARENT DOCUMENT!
<script> var importDoc = document.currentScript.ownerDocument; var parentDocument = document; </script>
part of the imports.html
![Page 26: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/26.jpg)
NO PARENT DOCUMENT!
<script> var importDoc = document.currentScript.ownerDocument; var parentDocument = document; </script>
part of the imports.html
so scripts behave the same as in parent doc
![Page 27: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/27.jpg)
TEMPLATES
![Page 28: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/28.jpg)
TEMPLATE - LAZY MARKUP
<template id="template"> <h1>Diego Maradona</h1> <img src="maradona.jpg"/> <script> console.log("exec template script"); </script> </template>
![Page 29: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/29.jpg)
TEMPLATE - LAZY MARKUP
<template id="template"> <h1>Diego Maradona</h1> <img src="maradona.jpg"/> <script> console.log("exec template script"); </script> </template>
lazy loaded
![Page 30: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/30.jpg)
TEMPLATE - LAZY MARKUP
<template id="template"> <h1>Diego Maradona</h1> <img src="maradona.jpg"/> <script> console.log("exec template script"); </script> </template>
executed each time when applied
lazy loaded
![Page 31: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/31.jpg)
FEATURE TEST
function supportsTemplate() { var el = document.createElement('template'); return !!('content' in el); }
read-only DocumentFragment
![Page 32: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/32.jpg)
INSERTING A TEMPLATE
var tmpl = __.e("#template"), target = __.e("#target"); target.appendChild( document.importNode(tmpl.content, true) );
![Page 33: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/33.jpg)
IMPORTED TEMPLATES
// select the import root from the ‚link‘ elem var importLink = __.e("#import-1").import; // select the template within the import var tmpl = __.e("template", importLink);
__.e("#target").appendChild( document.importNode(tmpl.content, true) );
![Page 34: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/34.jpg)
SHADOW DOM
!Denn die einen sind im Dunkeln Und die andern sind im LichtUnd man siehet die im Lichte Die im Dunkeln sieht man nicht !aus Mackie Messer von Berthold Brecht
![Page 35: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/35.jpg)
RENDER TREE
t e
![Page 36: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/36.jpg)
RENDER TREE
t e
shadow = target.createShadowRoot()
![Page 37: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/37.jpg)
RENDER TREE
t e
shadow = target.createShadowRoot()
![Page 38: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/38.jpg)
RENDER TREE
t e
shadow = target.createShadowRoot()
sshadow root
![Page 39: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/39.jpg)
RENDER TREE
t e
shadow = target.createShadowRoot() shadow.appendChild(element)
sshadow root
![Page 40: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/40.jpg)
RENDER TREE
t e
shadow = target.createShadowRoot()
<content/>
shadow.appendChild(element)
sshadow root
![Page 41: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/41.jpg)
HTML IMPORTS
![Page 42: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/42.jpg)
HTML IMPORTS
initial child node
![Page 43: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/43.jpg)
HTML IMPORTS
initial child node
shadow DOM from template
![Page 44: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/44.jpg)
HTML IMPORTS
initial child node
shadow DOM from template
insertion point of initial content
![Page 45: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/45.jpg)
SHADOW DOM TEMPLATES
function renderShadow(tmplId, targetSelector) { var tmpl = __.e("#" + tmplId), target = __.e(targetSelector), shadow = target.createShadowRoot(); target.style.display = "block"; shadow.appendChild( tmpl.content.cloneNode(true) ); }
![Page 46: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/46.jpg)
SHADOW DOM TEMPLATES
function renderShadow(tmplId, targetSelector) { var tmpl = __.e("#" + tmplId), target = __.e(targetSelector), shadow = target.createShadowRoot(); target.style.display = "block"; shadow.appendChild( tmpl.content.cloneNode(true) ); }
visually removes all previous children
![Page 47: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/47.jpg)
SHADOW DOM TEMPLATES<div id="name-shadow-hook" class="hook"> <span class="email">[email protected]</span> <span class="address">Webergasse 23, 8408 Winterthur</span> <span class="name">Hans Meier</span> <img src="../images/alaska.jpg" width="480"/> </div>
<template id="person-template"> <section> <h3><content select=".name"/></h3> <p><b>Address</b> <content select=".address"/></p> <p><b>E-Mail</b> <content select=".email"/></p> <div><content select=„img"/></div> </section></template>
![Page 48: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/48.jpg)
SHADOW DOM TEMPLATES<div id="name-shadow-hook" class="hook"> <span class="email">[email protected]</span> <span class="address">Webergasse 23, 8408 Winterthur</span> <span class="name">Hans Meier</span> <img src="../images/alaska.jpg" width="480"/> </div>
<template id="person-template"> <section> <h3><content select=".name"/></h3> <p><b>Address</b> <content select=".address"/></p> <p><b>E-Mail</b> <content select=".email"/></p> <div><content select=„img"/></div> </section></template>
change initial DOM to change shadow dom
![Page 49: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/49.jpg)
SHADOW DOM TEMPLATES
<template id=„person-template"> <article id="master"> <header><content select=".header"/></header> <div><content select=".content"/></div> <footer><content select=".footer"/></footer> </article></template>
![Page 51: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/51.jpg)
CUSTOM ELEMENTS
<woot/>
![Page 52: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/52.jpg)
CUSTOM ELEMENTS<polymer-ui-accordion selected="1" id="accordion"> <polymer-ui-collapsible id="abstraction"> <div class="polymer-ui-collapsible-header">Abstraction and encapsulation</div> <div>…</div> </polymer-ui-collapsible> <polymer-ui-collapsible id="abstraction"> <div class="polymer-ui-collapsible-header">Abstraction and encapsulation</div> <div>…</div> </polymer-ui-collapsible> </polymer-ui-accordion>
![Page 53: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/53.jpg)
CUSTOM ELEMENTS
![Page 54: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/54.jpg)
CUSTOM ELEMENTSinvisible to querySelector and CSS rules
![Page 55: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/55.jpg)
CUSTOM ELEMENTSinvisible to querySelector and CSS rules
use elements and attributes of DOM as API to interact with the
shadow DOM component: !
acc.setAttribute("selected", 1);
![Page 56: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/56.jpg)
CUSTOM ELEMENTS
function (name, spec, callbacks) { var proto = Object.create(HTMLDivElement.prototype); // […] check for callbacks return document.registerElement(name, { prototype: Object.create(proto, spec || {}) });}
![Page 57: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/57.jpg)
CUSTOM ELEMENTS
function (name, spec, callbacks) { var proto = Object.create(HTMLDivElement.prototype); // […] check for callbacks return document.registerElement(name, { prototype: Object.create(proto, spec || {}) });}
returns a constructor
![Page 58: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/58.jpg)
CUSTOM ELEMENTS
function (name, spec, callbacks) { var proto = Object.create(HTMLDivElement.prototype); // […] check for callbacks return document.registerElement(name, { prototype: Object.create(proto, spec || {}) });}
returns a constructor
the prototype of the constructor
![Page 59: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/59.jpg)
CALLBACKS
proto.createdCallback = function () {} proto.attachedCallback = function () {} proto.detachedCallback = function () {}
proto.attributeChangedCallback = f(name,oldV,newV) {}
![Page 60: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/60.jpg)
CALLBACKS
proto.createdCallback = function () {} proto.attachedCallback = function () {} proto.detachedCallback = function () {}
proto.attributeChangedCallback = f(name,oldV,newV) {}
this is the DOM element
![Page 61: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/61.jpg)
CUSTOM ELEMENTS
register( 'x-label', {}, { createdCallback: function() {}, attachedCallback: function() {} } );
![Page 63: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/63.jpg)
WEBCOMPONENTS RECAP
![Page 64: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/64.jpg)
polyfills to use it today
infrastructure for abstraction and encapsulation
infrastructure to build frameworks on top of it
heavily pushed by Google
future in the dust
RECAP
![Page 65: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/65.jpg)
BRICK AND POLYMER
![Page 66: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/66.jpg)
POLYMER
![Page 67: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/67.jpg)
POLYMER
polyfill
![Page 68: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/68.jpg)
POLYMER
polyfill
polymer framework (eg. databinding)
![Page 69: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/69.jpg)
POLYMER
polyfill
polymer framework (eg. databinding)
polymer elements
![Page 70: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/70.jpg)
POLYMER
polyfill
polymer framework (eg. databinding)
polymer elementspolymer elements
![Page 71: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/71.jpg)
X-TAGS
![Page 72: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/72.jpg)
X-TAGS API (IMPERATIVE)
![Page 75: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/75.jpg)
MOZILLA.GITHUB.IO/BRICK/
available elements
styles and scripts of Brick
![Page 76: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/76.jpg)
THX, GUYS!
![Page 77: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/77.jpg)
RESOURCES
![Page 78: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/78.jpg)
GENERAL
https://html5-demos.appspot.com/static/webcomponents/index.html !
www.html5rocks.com/en/tutorials/webcomponents/customelements/ !!
https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/x-tags
![Page 79: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/79.jpg)
HTML IMPORTShttp://w3c.github.io/webcomponents/spec/imports/http://www.w3.org/TR/2013/WD-html-imports-20130514/http://www.w3.org/TR/2014/WD-html-imports-20140311/
http://www.html5rocks.com/en/tutorials/webcomponents/imports/ http://www.polymer-project.org/platform/html-imports.html
https://bugzilla.mozilla.org/show_bug.cgi?id=877072http://www.x-tags.org/blog
![Page 80: Introduction to web components](https://reader034.vdocuments.site/reader034/viewer/2022052321/554954acb4c905f74e8b4dbf/html5/thumbnails/80.jpg)
TEMPLATES
http://www.w3.org/TR/components-intro/#template-section
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html
http://www.html5rocks.com/en/tutorials/webcomponents/template/