Introduction to web components
2 likes2,404 views
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.
![CUSTOM ELEMENTS
function (name, spec, callbacks) {
var proto =
Object.create(HTMLDivElement.prototype);
// […] check for callbacks
return document.registerElement(name, {
prototype: Object.create(proto, spec || {})
});
}](https://image.slidesharecdn.com/webcomponentsall-140402163155-phpapp01/85/Introduction-to-web-components-56-320.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](https://image.slidesharecdn.com/webcomponentsall-140402163155-phpapp01/85/Introduction-to-web-components-57-320.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](https://image.slidesharecdn.com/webcomponentsall-140402163155-phpapp01/85/Introduction-to-web-components-58-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to Introduction to web components (20)
![Upload[1]](https://cdn.slidesharecdn.com/ss_thumbnails/upload1-150713003350-lva1-app6892-thumbnail.jpg?width=560&fit=bounds)
Ad
More from Marc Bächinger (8)
Recently uploaded (20)
Introduction to web components
- 2. ‚web development is overly complex…‘ unknown, but desperate software engineer
- 3. lack of encapsulation and abstraction
- 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, …)
- 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">[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>
- 48. SHADOW DOMTEMPLATES <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
- 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>
- 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() {} } );
- 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
- 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
- 75. MOZILLA.GITHUB.IO/BRICK/ available elements styles and scripts of Brick
- 76. THX, GUYS!
- 77. RESOURCES