Web Component

Transcript

1. 1.

   Web Component othree

2. 2.

   othree ⚫ HappyDesigner, MozTW! ⚫ PhD Candidate @ NTUST, F2E

   @HTC https://github.com/othree https://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.

   None
8. 8.

   None
9. 9.

   None
10. 10.

    None
11. 11.

    None
12. 12.

    None
13. 13.

    What Developer Want ⚫ Modularize codes, markup and styles! ⚫

    Simple and easy to reuse
14. 14.

    What Developer Want ⚫ Use <magic-tag> and everything is done

15. 15.

    Standards is Not Enough

16. 16.

    Standards Changes too Slow

17. 17.

    Let Web Extensible

18. 18.

    Extensible Web https://medium.com/the-future-of-the-web/2fcd1c1bb32! http://extensiblewebmanifesto.org/! http://www.w3.org/community/nextweb/

19. 19.

    Web Component

20. 20.

    Not just new markup language

21. 21.

    Not one standard

22. 22.

    The Standards ⚫ Shadow DOM! ⚫ Custom Element! ⚫ HTML

    Imports! ⚫ Template! ⚫ Scoped Style! ⚫ Mutation Observer … etc
23. 23.

    Template

24. 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. 25.

    <template id="sdom">! <header>! <h2>Eric</h2>! </header>! <section>! <div>Digital Jedi</div>! </section>! <footer>!

    <h4>footer text</h4>! </footer>! </template>
26. 26.

    var tpl = document.getElementById('sdom');! ! var dom = tpl.content.cloneNode(true);! !

    shadowRoot.appendChild(dom);
27. 27.

    Shadow DOM

28. 28.

    Shadow DOM ⚫ Hidden nodes in DOM tree! ⚫ Encapsulation!

    ⚫ Keep component simple! ⚫ Browser already have this feature http://w3c.github.io/webcomponents/spec/shadow/
29. 29.

    None
30. 30.

    None
31. 31.

    Take a Look

32. 32.

    Use ⚫ Create shadow root! ⚫ appendChild to shadow root

33. 33.

    var host = document! .querySelector('.custom-component');! ! var root = host.createShadowRoot();!

    ! root.innerHTML = html_template_string;
34. 34.

    DOM Tree root node (host) node

35. 35.

    DOM Tree Shadow Tree root node (host) Shadow root node

    node
36. 36.

    Get DOMNodes ⚫ querySelector, querySelectorAll on shadow root! ⚫ DOM

    API
37. 37.

    Style var html_template_string = ! ! '<style>div { color: red;

    }</style>' ! ! + '<div>Click me!</div>';
38. 38.

    Style in Shadow DOM ⚫ Scoped by default! ⚫ Possible

    to import separate css file! ⚫ Path issue
39. 39.

    <option> ⚫ How to make custom element like <select>! ⚫

    Fill content when using it
40. 40.

    <select> <option>

41. 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. 42.

    <content> ⚫ <content> as insertion point! ⚫ CSS selector to

    select content
43. 43.

    None
44. 44.

    Custom Element

45. 45.

    Custom Element ⚫ Define your element! ⚫ Use API http://w3c.github.io/webcomponents/spec/custom/

46. 46.

    <element> ⚫ No more in standards

47. 47.

    Register Element registerElement(‘x-button', {prototype: xButtonProto}); element name options prototype extend

48. 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. 49.

    Unresolved ⚫ :unresolved can use to hide/style unresolved elements! ⚫

    Avoid FOUT
50. 50.

    Custom Prototype ⚫ Inherit from HTMLElement.prototype! ⚫ Add lifecycle callbacks

51. 51.

    Element Lifecycle ⚫ Define in custom element standard! ⚫ created!

    ⚫ attached! ⚫ detatched! ⚫ attributeChanged https://www.w3.org/Bugs/Public/show_bug.cgi?id=24314
52. 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. 53.

    HTML Imports

54. 54.

    Imports ⚫ Import more resources for future use! ⚫ Images,

    Style, Scripts…etc! ⚫ Web Component http://www.w3.org/TR/html-imports/
55. 55.

    <link rel="import" href="path/to/component.html">

56. 56.

    <script> ⚫ `document` is importer! ⚫ Easy to work with

    document! ⚫ How to get its self! ⚫ ex: <template> in importee document
57. 57.

    importer importee document document document.registerElement! ! //register on importer <link

    rel="import"! href="…" />
58. 58.

    importer importee document document <template>! <blah />! </template> <link rel="import"!

    href="…" />
59. 59.

    importer importee document document <template>! <blah />! </template>! ! <script>!

    ! // How to get template?! ! </script> <link rel="import"! href="…" />
60. 60.

    document.currentScript.ownerDocument;

61. 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. 62.

    importer importee document document.currentScript <template>! <blah />! </template>! ! <script>!

    ! document.currentScript! .ownerDocument! ! </script> <link rel="import"! href="…" />
63. 63.

    All Together

64. 64.

    Demo https://github.com/othree/web-component-test

65. 65.

    Libs

66. 66.

    X-Tag ⚫ by Mozilla! ⚫ Easy to create custom element

    http://www.x-tags.org/
67. 67.

    Brick ⚫ by Mozilla! ⚫ Repository for Custom-UI build by

    X-Tag http://mozilla.github.io/brick/
68. 68.

    Polymer ⚫ by Google! ⚫ Application build upon Web Component!

    ⚫ Polyfills! ⚫ Share with X-Tag http://www.polymer-project.org/
69. 69.

    None
70. 70.

    more..

71. 71.

    ⚫ Semantic! ⚫ Accessibility! ⚫ Internationalization! ⚫ Security! ⚫ Performance!

    ⚫ OS Native UI…
72. 72.

    https://www.youtube.com/watch?v=e29D1daRYrQ

73. 73.

    Q&A

74. 74.

    > B