Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Component

1,485 views

Published on

Web Component intro at OSDC 2014, #osdctw

Published in: Technology
  • Be the first to comment

Web Component

  1. 1. Web Component othree
  2. 2. othree ⚫ HappyDesigner, MozTW! ⚫ PhD Candidate @ NTUST, F2E @HTC https://github.com/othreehttps://blog.othree.net/
  3. 3. othree
  4. 4. Why Web Component
  5. 5. Why ⚫ Rich Internet Applications! ⚫ More and more custom UI! ⚫ Complex → Modularize! ⚫ Reuse
  6. 6. Custom UI
  7. 7. What Developer Want ⚫ Modularize codes, markup and styles! ⚫ Simple and easy to reuse
  8. 8. What Developer Want ⚫ Use <magic-tag> and everything is done
  9. 9. Standards is Not Enough
  10. 10. Standards Changes too Slow
  11. 11. Let Web Extensible
  12. 12. Extensible Web https://medium.com/the-future-of-the-web/2fcd1c1bb32! http://extensiblewebmanifesto.org/! http://www.w3.org/community/nextweb/
  13. 13. Web Component
  14. 14. Not just new markup language
  15. 15. Not one standard
  16. 16. The Standards ⚫ Shadow DOM! ⚫ Custom Element! ⚫ HTML Imports! ⚫ Template! ⚫ Scoped Style! ⚫ Mutation Observer … etc
  17. 17. Template
  18. 18. <template> ⚫ Provide reusable DOMNode! ⚫ Parse but not render! ⚫ Used to use <script type="text/template">! ⚫ Not parse at all http://www.w3.org/TR/html5/scripting-1.html#the-template-element
  19. 19. <template id="sdom">! <header>! <h2>Eric</h2>! </header>! <section>! <div>Digital Jedi</div>! </section>! <footer>! <h4>footer text</h4>! </footer>! </template>
  20. 20. var tpl = document.getElementById('sdom');! ! var dom = tpl.content.cloneNode(true);! ! shadowRoot.appendChild(dom);
  21. 21. Shadow DOM
  22. 22. Shadow DOM ⚫ Hidden nodes in DOM tree! ⚫ Encapsulation! ⚫ Keep component simple! ⚫ Browser already have this feature http://w3c.github.io/webcomponents/spec/shadow/
  23. 23. Take a Look
  24. 24. Use ⚫ Create shadow root! ⚫ appendChild to shadow root
  25. 25. var host = document! .querySelector('.custom-component');! ! var root = host.createShadowRoot();! ! root.innerHTML = html_template_string;
  26. 26. DOM Tree root node (host) node
  27. 27. DOM Tree Shadow Tree root node (host) Shadow root node node
  28. 28. Get DOMNodes ⚫ querySelector, querySelectorAll on shadow root! ⚫ DOM API
  29. 29. Style var html_template_string = ! ! '<style>div { color: red; }</style>' ! ! + '<div>Click me!</div>';
  30. 30. Style in Shadow DOM ⚫ Scoped by default! ⚫ Possible to import separate css file! ⚫ Path issue
  31. 31. <option> ⚫ How to make custom element like <select>! ⚫ Fill content when using it
  32. 32. <select> <option>
  33. 33. <magic-tag id="example4">! <h2>Eric</h2>! <h2>Bidelman</h2>! <div>Digital Jedi</div>! <h4>footer text</h4>! </magic-tag>! ! <template id="sdom">! <header>! <content select="h2"></content>! </header>! <section>! <content select="div"></content>! </section>! <footer>! <content select="h4:first-of-type"></content>! </footer>! </template>
  34. 34. <content> ⚫ <content> as insertion point! ⚫ CSS selector to select content
  35. 35. Custom Element
  36. 36. Custom Element ⚫ Define your element! ⚫ Use API http://w3c.github.io/webcomponents/spec/custom/
  37. 37. <element> ⚫ No more in standards
  38. 38. Register Element registerElement(‘x-button', {prototype: xButtonProto}); element name options prototype extend
  39. 39. Custom Element Name ⚫ Custom element’s name should have “-”! ⚫ ex: x-button, my-slider! ⚫ With “-”, element don’t know by browser will treat as unresolved element, otherwise it will be unknown element
  40. 40. Unresolved ⚫ :unresolved can use to hide/style unresolved elements! ⚫ Avoid FOUT
  41. 41. Custom Prototype ⚫ Inherit from HTMLElement.prototype! ⚫ Add lifecycle callbacks
  42. 42. Element Lifecycle ⚫ Define in custom element standard! ⚫ created! ⚫ attached! ⚫ detatched! ⚫ attributeChanged https://www.w3.org/Bugs/Public/show_bug.cgi?id=24314
  43. 43. var doc = document.currentScript.ownerDocument;! ! var xButtonProto = Object.create(HTMLElement.prototype);! ! ! xButtonProto.createdCallback = function () {! var root = this;! var host = this.webkitCreateShadowRoot();! //host blah blah ...! };! ! ! document.registerElement(‘x-button',! {prototype: xButtonProto}! );
  44. 44. HTML Imports
  45. 45. Imports ⚫ Import more resources for future use! ⚫ Images, Style, Scripts…etc! ⚫ Web Component http://www.w3.org/TR/html-imports/
  46. 46. <link rel="import" href="path/to/component.html">
  47. 47. <script> ⚫ `document` is importer! ⚫ Easy to work with document! ⚫ How to get its self! ⚫ ex: <template> in importee document
  48. 48. importer importee document document document.registerElement! ! //register on importer <link rel="import"! href="…" />
  49. 49. importer importee document document <template>! <blah />! </template> <link rel="import"! href="…" />
  50. 50. importer importee document document <template>! <blah />! </template>! ! <script>! ! // How to get template?! ! </script> <link rel="import"! href="…" />
  51. 51. document.currentScript.ownerDocument;
  52. 52. currentScript ⚫ HTML5 API! ⚫ For 3rd party widgets to locate <script> position http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-currentscript
  53. 53. importer importee document document.currentScript <template>! <blah />! </template>! ! <script>! ! document.currentScript! .ownerDocument! ! </script> <link rel="import"! href="…" />
  54. 54. All Together
  55. 55. Demo https://github.com/othree/web-component-test
  56. 56. Libs
  57. 57. X-Tag ⚫ by Mozilla! ⚫ Easy to create custom element http://www.x-tags.org/
  58. 58. Brick ⚫ by Mozilla! ⚫ Repository for Custom-UI build by X-Tag http://mozilla.github.io/brick/
  59. 59. Polymer ⚫ by Google! ⚫ Application build upon Web Component! ⚫ Polyfills! ⚫ Share with X-Tag http://www.polymer-project.org/
  60. 60. more..
  61. 61. ⚫ Semantic! ⚫ Accessibility! ⚫ Internationalization! ⚫ Security! ⚫ Performance! ⚫ OS Native UI…
  62. 62. https://www.youtube.com/watch?v=e29D1daRYrQ
  63. 63. Q&A
  64. 64. > B

×