Frontend meetup 2014.06.25
1 like372 views
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.
![<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-140704091824-phpapp02/85/Frontend-meetup-2014-06-25-16-320.jpg)
Frontend meetup 2014.06.25
- 2. Components “An individual software component 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/ <script src="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/ <script src="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>
- 10. Components Example: prism.js span { display:block }
- 12. Shadow DOM <div id=”foo”>Light DOM</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"> <a href="">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"> <a href="">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 in the shadow: ● :host, :host(.selector), :host(:hover) ● ::content ● :host-context(.selector) http://rszaloki.github.io/webcomponents/shadow_dom/index.html Shadow DOM
- 18. Pierce through the boundary: ● ::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 ● imports load 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 is AWESOME!</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 is AWESOME!</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 use it?
- 31. Can I use it? 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. Polymer Project
- 33. Web Components ● Shadow DOM ● HTML Imports ● Custom Elements Platform - polyfills Polymer DOM ● URL ● WeakMap ● Mutation Observers Other ● Pointer Events ● Pointer Gestures ● Web Animations
- 35. create elements Polymer ● declarative syntax ● dynamic templates ● two way data binding ● property observation
- 36. use elements Polymer ● widget library ● UI and non-UI elements ● core elements + labs elements
- 37. tools Polymer Vulcanize: concatenate the imported elements designer: http://www. polymer-project. org/tools/designer/