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