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.

1. WEBCOMPONENTS
@marcbaechinger

2. ‚web development is overly complex…‘
unknown, but desperate software engineer

3. lack of encapsulation and abstraction

4. TODAYS STANDARDS BODY

5. STANDARDS BODY
W3C webcomponents

6. STANDARDS BODY
W3C webcomponents
heavily in flux

7. STANDARDS BODY
W3C webcomponents
webcomponents polyfill
heavily in flux

8. STANDARDS BODY
W3C webcomponents
webcomponents polyfill
heavily in flux
2013: same for x-tags and polymer

9. STANDARDS BODY
W3C webcomponents
webcomponents polyfill
x-tags polymer
brick polymer elements
heavily in flux
2013: same for x-tags and polymer

10. 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)

11. 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, …)

12. http://www.w3.org/TR/components-intro/
Templates
Custom elements
Shadow DOM
Imports
June 2013

13. BROWSER SUPPORT
polymer

14. BROWSER SUPPORT
x-tags
polymer

15. HTML IMPORTS

16. 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>

17. HTML IMPORTS
<link id="markup" rel="import" href="imports.html">
import html fragment

18. 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

19. 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

20. HTML IMPORTS

21. HTML IMPORTS
check for import property to feature test

22. SCRIPTS IN IMPORTS
// in the import fragment
<script>
(function (global) {
global.markup = {
hi: function () {}
};
}(window));
</script>
// in the parent document
window.markup.hi();

23. 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

24. 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

25. NO PARENT DOCUMENT!
<script>
var importDoc =
document.currentScript.ownerDocument;
var parentDocument = document;
</script>
part of the imports.html

26. 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

27. TEMPLATES

28. TEMPLATE - LAZY MARKUP
<template id="template">
<h1>Diego Maradona</h1>
<img src="maradona.jpg"/>
<script>
console.log("exec template script");
</script>
</template>

29. TEMPLATE - LAZY MARKUP
<template id="template">
<h1>Diego Maradona</h1>
<img src="maradona.jpg"/>
<script>
console.log("exec template script");
</script>
</template>
lazy loaded

30. 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

31. FEATURETEST
function supportsTemplate() {
var el = document.createElement('template');
return !!('content' in el);
}
read-only DocumentFragment

32. INSERTING ATEMPLATE
var tmpl = __.e("#template"),
target = __.e("#target");
target.appendChild(
document.importNode(tmpl.content, true)
);

33. IMPORTEDTEMPLATES
// 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)
);

34. SHADOW DOM
!
Denn die einen sind im Dunkeln
Und die andern sind im Licht
Und man siehet die im Lichte
Die im Dunkeln sieht man nicht
!
aus Mackie Messer von Berthold Brecht

35. RENDERTREE
t e

36. RENDERTREE
t e
shadow = target.createShadowRoot()

37. RENDERTREE
t e
shadow = target.createShadowRoot()

38. RENDERTREE
t e
shadow = target.createShadowRoot()
s
shadow root

39. RENDERTREE
t e
shadow = target.createShadowRoot() shadow.appendChild(element)
s
shadow root

40. RENDERTREE
t e
shadow = target.createShadowRoot()
<content/>
shadow.appendChild(element)
s
shadow root

41. HTML IMPORTS

42. HTML IMPORTS
initial child node

43. HTML IMPORTS
initial child node
shadow DOM from template

44. HTML IMPORTS
initial child node
shadow DOM from template
insertion point of initial content

45. SHADOW DOMTEMPLATES
function renderShadow(tmplId, targetSelector) {
var tmpl = __.e("#" + tmplId),
target = __.e(targetSelector),
shadow = target.createShadowRoot();
target.style.display = "block";
shadow.appendChild(
tmpl.content.cloneNode(true)
);
}

46. SHADOW DOMTEMPLATES
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

47. SHADOW DOMTEMPLATES
<div id="name-shadow-hook" class="hook">
<span class="email">marc.baechinger@gmail.com</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>

48. SHADOW DOMTEMPLATES
<div id="name-shadow-hook" class="hook">
<span class="email">marc.baechinger@gmail.com</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

49. SHADOW DOMTEMPLATES
<template id=„person-template">
<article id="master">
<header><content select=".header"/></header>
<div><content select=".content"/></div>
<footer><content select=".footer"/></footer>
</article>
</template>

50. template demo
pic: www.lolpig.com

51. CUSTOM ELEMENTS
<woot/>

52. 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>

53. CUSTOM ELEMENTS

54. CUSTOM ELEMENTS
invisible to querySelector and CSS rules

55. CUSTOM ELEMENTS
invisible to querySelector and CSS rules
use elements and attributes of DOM as
API to interact with the
shadow DOM component:
!
acc.setAttribute("selected", 1);

56. CUSTOM ELEMENTS
function (name, spec, callbacks) {
var proto =
Object.create(HTMLDivElement.prototype);
// […] check for callbacks
return document.registerElement(name, {
prototype: Object.create(proto, spec || {})
});
}

57. 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

58. 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

59. CALLBACKS
proto.createdCallback = function () {}
proto.attachedCallback = function () {}
proto.detachedCallback = function () {}
proto.attributeChangedCallback = f(name,oldV,newV) {}

60. CALLBACKS
proto.createdCallback = function () {}
proto.attachedCallback = function () {}
proto.detachedCallback = function () {}
proto.attributeChangedCallback = f(name,oldV,newV) {}
this is the DOM element

61. CUSTOM ELEMENTS
register(
'x-label',
{},
{
createdCallback: function() {},
attachedCallback: function() {}
}
);

62. x-label demo
pic: www.lolpig.com

63. WEBCOMPONENTS
RECAP

64. 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

65. BRICK AND POLYMER

66. POLYMER

67. POLYMER
polyfill

68. POLYMER
polyfill
polymer framework (eg. databinding)

69. POLYMER
polyfill
polymer framework (eg. databinding)
polymer elements

70. POLYMER
polyfill
polymer framework (eg. databinding)
polymer elementspolymer elements

71. X-TAGS

72. X-TAGS API (IMPERATIVE)

73. MOZILLA.GITHUB.IO/BRICK/

74. MOZILLA.GITHUB.IO/BRICK/
available elements

75. MOZILLA.GITHUB.IO/BRICK/
available elements
styles and scripts of Brick

76. THX, GUYS!

77. RESOURCES

78. 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

79. HTML IMPORTS
http://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=877072
http://www.x-tags.org/blog

80. 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/