Downloaded 45 times
![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)
![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/75/Introduction-to-web-components-56-2048.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/75/Introduction-to-web-components-57-2048.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/75/Introduction-to-web-components-58-2048.jpg)
Uploaded byMarc Bächinger
Introduction to web components
The document discusses the complexities of web development and the evolution of web components, highlighting the ongoing development and support challenges related to W3C standards such as custom elements, HTML imports, and shadow DOM. It details various coding patterns, examples, and best practices in utilizing web components, focusing on encapsulation and abstraction. Additionally, resources and references for further learning and implementation of web components are provided.
More Related Content
Similar to Introduction to web components
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Introduction to web components
- 1.
- 2. ‚web development isoverly complex…‘ unknown, but desperate software engineer
- 3. lack of encapsulationand abstraction
- 4.
- 5.
- 6.
- 7. STANDARDS BODY W3C webcomponents webcomponentspolyfill heavily in flux
- 8. STANDARDS BODY W3C webcomponents webcomponentspolyfill heavily in flux 2013: same for x-tags and polymer
- 9. STANDARDS BODY W3C webcomponents webcomponentspolyfill x-tags polymer brick polymer elements heavily in flux 2013: same for x-tags and polymer
- 10. STANDARDS BODY W3C webcomponents webcomponentspolyfill 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 webcomponentspolyfill x-tags polymer brick polymer elements heavily in flux 2013: same for x-tags and polymer wrapper API (JS/HTML) element sets (accordion, …)
- 12.
- 13.
- 14.
- 15.
- 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.
- 21. HTML IMPORTS check forimport 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> varimportDoc = document.currentScript.ownerDocument; var parentDocument = document; </script> part of the imports.html
- 26. NO PARENT DOCUMENT! <script> varimportDoc = document.currentScript.ownerDocument; var parentDocument = document; </script> part of the imports.html so scripts behave the same as in parent doc
- 27.
- 28. TEMPLATE - LAZYMARKUP <template id="template"> <h1>Diego Maradona</h1> <img src="maradona.jpg"/> <script> console.log("exec template script"); </script> </template>
- 29. TEMPLATE - LAZYMARKUP <template id="template"> <h1>Diego Maradona</h1> <img src="maradona.jpg"/> <script> console.log("exec template script"); </script> </template> lazy loaded
- 30. TEMPLATE - LAZYMARKUP <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() { varel = 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 theimport 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 dieeinen 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.
- 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.
- 42.
- 43. HTML IMPORTS initial childnode shadow DOM from template
- 44. HTML IMPORTS initial childnode 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"> <articleid="master"> <header><content select=".header"/></header> <div><content select=".content"/></div> <footer><content select=".footer"/></footer> </article> </template>
- 50.
- 51.
- 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.
- 54. CUSTOM ELEMENTS invisible toquerySelector and CSS rules
- 55. CUSTOM ELEMENTS invisible toquerySelector 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.
- 63.
- 64. polyfills to useit today infrastructure for abstraction and encapsulation infrastructure to build frameworks on top of it heavily pushed by Google future in the dust RECAP
- 65.
- 66.
- 67.
- 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.
- 72.
- 73.
- 74.
- 75. MOZILLA.GITHUB.IO/BRICK/ available elements styles andscripts of Brick
- 76.
- 77.
- 78.
- 79.
- 80.