Downloaded 24 times
![<input is=”x-rating”
value=”2”>
<input is=”x-rating”
value=”2”
readonly>
<style>
:host {
border:0;
color:black;
}
:host([readonly]) button {
display:none
}
</style>
<label>Rating: </label>
<button id="dec">-</button>
<span id="value"></span>
<button id="inc">+</button>](https://image.slidesharecdn.com/frontendmeetup2014-140626075046-phpapp02/75/Webcomponents-at-Frontend-meetup-2014-06-25-16-2048.jpg)
Uploaded byRobert Szaloki
Webcomponents at Frontend meetup 2014.06.25
The document discusses web components including custom elements, shadow DOM, HTML imports, and templates. It provides an example of a lightbox component and highlights key aspects of web components like encapsulation, reusability, and communication via interfaces. It also summarizes the Polymer library which provides polyfills and tools to help build and use web components across browsers.
More Related Content
Similar to Webcomponents at Frontend meetup 2014.06.25
Webcomponents at Frontend meetup 2014.06.25
- 1.
- 2. Components “An individual softwarecomponent is a software package, a web service, a web resource, or a module that encapsulates a set of related functions (or data).” Component-based software engineering Wikipedia
- 3. Components ● encapsulation ● reusability ●communication via interfaces
- 4. Components ● encapsulation ● reusability ●communication via interfaces Today: components for the web ~= jquery plugins
- 5. Components Example: Lightbox http://lokeshdhakar.com/projects/lightbox2/ <scriptsrc="js/jquery-1.11.0.min.js"></script> <script src="js/lightbox.min.js"></script> <link href="css/lightbox.css" rel="stylesheet" /> <a href="img/image-1.jpg" data-lightbox="i1" data-title="My caption"> <img src="img/image-1.jpg"> </a> <a href="img/image-2.jpg" data-lightbox="i1" data-title="My caption2"> <img src="img/image-2.jpg"> </a>
- 6. Components Example: Lightbox http://lokeshdhakar.com/projects/lightbox2/ <scriptsrc="js/jquery-1.11.0.min.js"></script> <script src="js/lightbox.min.js"></script> <link href="css/lightbox.css" rel="stylesheet" /> <a href="img/image-1.jpg" data-lightbox="i1" data-title="My caption"> <img src="img/image-1.jpg"> </a> <a href="img/image-2.jpg" data-lightbox="i1" data-title="My caption2"> <img src="img/image-2.jpg"> </a> But I’m using YUI :( three request? HTML Captions?
- 7. Components Example: Lightbox <link rel=”import”href=”//cdn.net/elements/lightbox.html”> <lightbox-images> <a href=”img/image-1.jpg”> <figure> <img src=”img/image-1.jpg”> <figcaption><b>Lorem</b> Ipsum!</figcaption> </figure> </a> </lightbox-images>
- 8.
- 9.
- 10. Components Example: prism.js span {display:block }
- 11.
- 12. Shadow DOM <div id=”foo”>LightDOM</div> <script> var foo = document.querySelector(‘#foo’); shadow = foo.createShadowRoot(); shadow.innerHTML = “Shadow DOM”; </script> http://rszaloki.github.io/webcomponents/shadow_dom/index.html Shadow DOM
- 13. Shadow DOM Shadow host= has a shadow root Normal DOM under the shadow host = Light DOM The content of a shadow host isn’t rendered; the content of the shadow root is rendered instead.
- 14. <div id="lego-name"> <img src="img/emmet.jpg"> <ahref="">EMMET</a> <p>An ordinary...</p> <input type="text" value="5" is="x-rating"> </div> <content select="img"></co <content select="a"></cont <hr> <button>Select</button> <content></content> <script> var foo = document.querySelector(‘#lego-name); shadow = foo.createShadowRoot(); shadow.innerHTML = “ ”; </script>
- 15. <div id="lego-name"> <img src="img/emmet.jpg"> <ahref="">EMMET</a> <p>An ordinary...</p> <input type="text" value="5" is="x-rating"> </div> <style> :host { text-align:center; display:inline-block; width:200px; ... } :host a ::content a { font-family: impact; font-size:30px; color:green; } </style>
- 16. <input is=”x-rating” value=”2”> <input is=”x-rating” value=”2” readonly> <style> :host{ border:0; color:black; } :host([readonly]) button { display:none } </style> <label>Rating: </label> <button id="dec">-</button> <span id="value"></span> <button id="inc">+</button>
- 17. New selectors inthe shadow: ● :host, :host(.selector), :host(:hover) ● ::content ● :host-context(.selector) http://rszaloki.github.io/webcomponents/shadow_dom/index.html Shadow DOM
- 18. Pierce through theboundary: ● ::shadow selects the elements shadow root ● /deep/ ignores the boundary http://rszaloki.github.io/webcomponents/shadow_dom/index.html Shadow DOM
- 19. ● abort ● error ●select ● change ● load http://rszaloki.github.io/webcomponents/shadow_dom/index.html Shadow DOM ● reset ● resize ● scroll ● selectstart Events that are always stopped at the boundary: Others are retargeted: the event is changed, to look like, they’ve come from the host element
- 20. Custom Elements -reuse
- 21. Custom elements var LegoName= document.registerElement('lego-name'); var e1 = new LegoName(); var e2 = document.createElement('lego-name'); document.body.appendChild(e1); document.body.appendChild(e2); <lego-name></lego-name> http://rszaloki.github.io/webcomponents/custom_elements/index.html
- 22. Custom elements Lifecycle events: ●createdCallback ● attachedCallback ● detachedCallback ● attributeChangedCallback http://rszaloki.github.io/webcomponents/custom_elements/index.html
- 23. Custom elements var LNameProto= Object.create(HTMLElement.prototype); LNameProto.createdCallback = function(){ this.innerHTML = “Hello!” } var LName = document.registerElement('lego-name',{ prototype:LNameProto }); <lego-name></lego-name> <lego-name>Hello</lego-name> - source - DOM
- 24. Custom elements document.registerElement('lego-name', { prototype:prototype object, "extends":’li’ }); <li is=”lego-name”> http://rszaloki.github.io/webcomponents/custom_elements/index.html
- 25. HTML Import <link rel="import"href="assets.html" onload="render()" id="assets"> ... <script> function render(){ var content = document.getElementById('assets').import; document.body.innerHTML = content; } </script> http://rszaloki.github.io/webcomponents/import/index.html
- 26. HTML Import ● importsload asynchronous ● same-origin policy! ● javascript in the import ○ global object is the window ○ document is the window.document ○ importDoc = document.currentScript.ownerDocument; importDoc.querySelector(‘template’); ● scripts inside the imports are blocks the parsing ● subimports ● the same import loads only once
- 27. HTML Template <template> <div>Everything isAWESOME!</div> </template> <script> … target.appendChild( document.importNode( template.content,true)); </script> http://rszaloki.github.io/webcomponents/template/index.html
- 28. HTML Template <template> <div>Everything isAWESOME!</div> </template> <script> … target.appendChild( document.importNode( template.content,true)); </script> http://rszaloki.github.io/webcomponents/template/index.html Invisible and no side effects!
- 29. Webcomponents ● encapsulation -Shadow DOM ● reusability - Custom Elements, HTML Import ● communication via interfaces - Attributes, Properties ● helpers - HTML Template
- 30. Can I useit?
- 31. Can I useit? Custom Elements HTML Templates Shadow DOM HTML Imports ● too much boilerplate ● no declarative api: <element> ● no easy way to let the users override the default styles: parts, css variables
- 32.
- 33. Web Components ● ShadowDOM ● HTML Imports ● Custom Elements Platform - polyfills Polymer DOM ● URL ● WeakMap ● Mutation Observers Other ● Pointer Events ● Pointer Gestures ● Web Animations
- 34.
- 35. create elements Polymer ● declarativesyntax ● dynamic templates ● two way data binding ● property observation
- 36. use elements Polymer ● widgetlibrary ● UI and non-UI elements ● core elements + labs elements
- 37. tools Polymer Vulcanize: concatenate the importedelements designer: http://www. polymer-project. org/tools/designer/
- 38.