Upgrade to Pro — share decks privately, control downloads, hide ads and more …

現場の Web Components / Real world Web Components

aggre
April 23, 2018

現場の Web Components / Real world Web Components

aggre

April 23, 2018
Tweet

More Decks by aggre

Other Decks in Technology

Transcript

  1. Web Components
    2018.04.23 @ Web Components Café by Polymer Japan

    View full-size slide

  2. aggre
    @aggre_
    @aggre
    FRAME00, INC. CTO

    View full-size slide

  3. ooapp.co/aggre

    View full-size slide

  4. • Web Components
    • Web Components
    • Web Components

    View full-size slide

  5. Web Components

    View full-size slide

  6. • Custom Elements
    • Shadow DOM
    • HTML Templates
    • HTML Imports

    View full-size slide

  7. • Custom Elements
    • Shadow DOM
    • HTML Templates
    • HTML Imports
    HTML Imports?
    ES Modules?
    HTML Modules?

    View full-size slide

  8. • Custom Elements
    • Shadow DOM
    • HTML Templates
    • HTML Imports
    HTML Imports?
    ES Modules?
    HTML Modules?
    ES Modules

    View full-size slide

  9. Custom Elements
    Shadow DOM
    HTML Templates
    ES Modules

    View full-size slide

  10. Custom Elements
    Shadow DOM
    HTML Templates
    ES Modules
    IE
    DOM

    View full-size slide

  11. Web Components

    View full-size slide

  12. JavaScript my-app.js

    View full-size slide

  13. HTML index.html

    View full-size slide

  14. ESM index.html

    View full-size slide

  15. Web Components

    View full-size slide

  16. Web Components
    Custom Elements

    View full-size slide

  17. React
    Custom Elements

    View full-size slide


  18. ?
    HTML my-app

    View full-size slide

  19. Custom Elements

    View full-size slide

  20. Custom Elements
    vue-custom-element @angular/elements

    View full-size slide

  21. Custom Elements
    vue-custom-element @angular/elements

    View full-size slide

  22. Web Components

    View full-size slide





  23. View full-size slide


  24. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks

    https://github.com/webcomponents/webcomponentsjs

    View full-size slide

  25. Custom Elements
    innerHTML

    View full-size slide

  26. HTML Templates

    View full-size slide

  27. HTML Templates

    View full-size slide

  28. Custom Elements

    View full-size slide

  29. Custom Elements
    (template).content.cloneNode()

    View full-size slide

  30. HTML Templates /

    View full-size slide

  31. addEventListener

    View full-size slide

  32. querySelector

    View full-size slide

  33. • DOM API
    • DOM API

    View full-size slide

  34. • DOM API
    • DOM API

    HTML Template Instantiation
    Appendix

    View full-size slide

  35. • DOM API
    • DOM API

    HTML Imports
    HTML Modules
    Appendix

    View full-size slide

  36. lit-html = Template literals

    View full-size slide

  37. IDE
    Microsoft/typescript-lit-html-plugin

    View full-size slide

  38. React
    Web Components

    View full-size slide

  39. PostCSS
    rollup-plugin-transform-postcss

    View full-size slide

  40. https://ooapp.co/project/LmsLz2a0pAUIHSZBmq3SH2XH

    View full-size slide

  41. https://ooapp.co/project/LmsLz2a0pAUIHSZBmq3SH2XH
    TypeScript

    View full-size slide

  42. connectedCallback connected
    ( )

    View full-size slide

  43. disconnectedCallback connected

    View full-size slide

  44. attributeChangedCallback
    connected

    View full-size slide

  45. attributeChangedCallback
    connected
    attributeChangedCallback

    View full-size slide

  46. connected
    connected

    View full-size slide

  47. • ES Class …

    View full-size slide

  48. customElements.define 1

    View full-size slide



  49. • Firebase Realtime Database
    http://developer.kaizenplatform.com/entry/tatsuroro/2018-04-19

    View full-size slide



  50. • React
    • HTML Imports PolymerElements/app-route

    View full-size slide



  51. • React
    • HTML Imports PolymerElements/app-route

    View full-size slide

  52. Web Components

    • Polyfill
    • ES Modules
    • module
    • HTML Modules
    • Web Components
    • Web Components
    • Custom Elements
    • lit-html

    • Web Components,

    View full-size slide

  53. Thank you
    ooapp.co/aggre

    View full-size slide