Web Component

Transcript

1. Web Component
   othree
   

   View Slide

2. othree
   ⚫ HappyDesigner, MozTW!
   ⚫ PhD Candidate @ NTUST, F2E @HTC
   https://github.com/othree
   https://blog.othree.net/
   

   View Slide

3. othree
   

   View Slide

4. Why Web Component
   

   View Slide

5. Why
   ⚫ Rich Internet Applications!
   ⚫ More and more custom UI!
   ⚫ Complex → Modularize!
   ⚫ Reuse
   

   View Slide

6. Custom UI
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. What Developer Want
    ⚫ Modularize codes, markup and styles!
    ⚫ Simple and easy to reuse
    

    View Slide

14. What Developer Want
    ⚫ Use and everything is done
    

    View Slide

15. Standards is Not
    Enough
    

    View Slide

16. Standards Changes
    too Slow
    

    View Slide

17. Let Web Extensible
    

    View Slide

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

    View Slide

19. Web Component
    

    View Slide

20. Not just new markup language
    

    View Slide

21. Not one standard
    

    View Slide

22. The Standards
    ⚫ Shadow DOM!
    ⚫ Custom Element!
    ⚫ HTML Imports!
    ⚫ Template!
    ⚫ Scoped Style!
    ⚫ Mutation Observer … etc
    

    View Slide

23. Template
    

    View Slide

24. 
    ⚫ Provide reusable DOMNode!
    ⚫ Parse but not render!
    ⚫ Used to use !<br/>⚫ Not parse at all<br/>http://www.w3.org/TR/html5/scripting-1.html#the-template-element<br/>

    View Slide

25. !
    !
    Eric!
    !
    !
    Digital Jedi!
    !
    !
    footer text!
    !
    
    

    View Slide

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

    View Slide

27. Shadow DOM
    

    View Slide

28. Shadow DOM
    ⚫ Hidden nodes in DOM tree!
    ⚫ Encapsulation!
    ⚫ Keep component simple!
    ⚫ Browser already have this feature
    http://w3c.github.io/webcomponents/spec/shadow/
    

    View Slide

29. View Slide

30. View Slide

31. Take a Look
    

    View Slide

32. Use
    ⚫ Create shadow root!
    ⚫ appendChild to shadow root
    

    View Slide

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

    View Slide

34. DOM Tree
    root
    node
    (host)
    node
    

    View Slide

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

    View Slide

36. Get DOMNodes
    ⚫ querySelector, querySelectorAll on shadow root!
    ⚫ DOM API
    

    View Slide

37. Style
    var html_template_string = !
    !
    'div { color: red; }' !
    !
    + 'Click me!';
    

    View Slide

38. Style in Shadow DOM
    ⚫ Scoped by default!
    ⚫ Possible to import separate css file!
    ⚫ Path issue
    

    View Slide

39. 
    ⚫ How to make custom element like !
    ⚫ Fill content when using it
    

    View Slide

40. 
    
    

    View Slide

41. !
    Eric!
    Bidelman!
    Digital Jedi!
    footer text!
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    
    

    View Slide

42. 
    ⚫ as insertion point!
    ⚫ CSS selector to select content
    

    View Slide

43. View Slide

44. Custom Element
    

    View Slide

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

    View Slide

46. 
    ⚫ No more in standards
    

    View Slide

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

    View Slide

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
    

    View Slide

49. Unresolved
    ⚫ :unresolved can use to hide/style unresolved
    elements!
    ⚫ Avoid FOUT
    

    View Slide

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

    View Slide

51. Element Lifecycle
    ⚫ Define in custom element standard!
    ⚫ created!
    ⚫ attached!
    ⚫ detatched!
    ⚫ attributeChanged
    https://www.w3.org/Bugs/Public/show_bug.cgi?id=24314
    

    View Slide

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}!
    );
    

    View Slide

53. HTML Imports
    

    View Slide

54. Imports
    ⚫ Import more resources for future use!
    ⚫ Images, Style, Scripts…etc!
    ⚫ Web Component
    http://www.w3.org/TR/html-imports/
    

    View Slide

55. 
    

    View Slide

56. <br/>⚫ `document` is importer!<br/>⚫ Easy to work with document!<br/>⚫ How to get its self!<br/>⚫ ex: <template> in importee document<br/>

    View Slide

57. importer importee
    document document
    document.registerElement!
    !
    //register on importer
    href="…" />
    

    View Slide

58. importer importee
    document document
    !
    !
    
    href="…" />
    

    View Slide

59. importer importee
    document document
    !
    !
    !
    !
    !<br/>!<br/>// How to get template?!<br/>!<br/>
    href="…" />
    

    View Slide

60. document.currentScript.ownerDocument;
    

    View Slide

61. currentScript
    ⚫ HTML5 API!
    ⚫ For 3rd party widgets to locate position<br/>http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-currentscript<br/>

    View Slide

62. importer importee
    document document.currentScript
    !
    !
    !
    !
    !<br/>!<br/>document.currentScript!<br/>.ownerDocument!<br/>!<br/>
    href="…" />
    

    View Slide

63. All Together
    

    View Slide

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

    View Slide

65. Libs
    

    View Slide

66. X-Tag
    ⚫ by Mozilla!
    ⚫ Easy to create custom element
    http://www.x-tags.org/
    

    View Slide

67. Brick
    ⚫ by Mozilla!
    ⚫ Repository for Custom-UI build by X-Tag
    http://mozilla.github.io/brick/
    

    View Slide

68. Polymer
    ⚫ by Google!
    ⚫ Application build upon Web Component!
    ⚫ Polyfills!
    ⚫ Share with X-Tag
    http://www.polymer-project.org/
    

    View Slide

69. View Slide

70. more..
    

    View Slide

71. ⚫ Semantic!
    ⚫ Accessibility!
    ⚫ Internationalization!
    ⚫ Security!
    ⚫ Performance!
    ⚫ OS Native UI…
    

    View Slide

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

    View Slide

73. Q&A
    

    View Slide

74. > B
    

    View Slide