Web Component

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