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 Components

4,508 views

Published on

一部 ES Class の記述に誤りがありました。訂正版は Speaker Deck にアップロードしていますのでそちらをご覧ください 👉 https://speakerdeck.com/aggre/real-world-web-components

https://polymer-japan.connpass.com/event/84638/ の登壇資料です

Published in: Technology
  • Login to see the comments

現場の Web Components

  1. 1. Web Components 2018.04.23 @ Web Components Café by Polymer Japan
  2. 2. aggre @aggre_ @aggre FRAME00, INC. CTO
  3. 3. ooapp.co/aggre
  4. 4. • Web Components • Web Components • Web Components
  5. 5. Web Components
  6. 6. • Custom Elements • Shadow DOM • HTML Templates • HTML Imports
  7. 7. • Custom Elements • Shadow DOM • HTML Templates • HTML Imports HTML Imports? ES Modules? HTML Modules?
  8. 8. • Custom Elements • Shadow DOM • HTML Templates • HTML Imports HTML Imports? ES Modules? HTML Modules? ES Modules
  9. 9. Custom Elements Shadow DOM HTML Templates ES Modules
  10. 10. Custom Elements Shadow DOM HTML Templates ES Modules IE DOM
  11. 11. Web Components
  12. 12. • • •
  13. 13. JavaScript my-app.js
  14. 14. HTML index.html
  15. 15. ESM index.html
  16. 16. index.html
  17. 17. DOM
  18. 18. Web Components
  19. 19. Web Components Custom Elements
  20. 20. React
  21. 21. React Custom Elements
  22. 22. <my-app></my-app> ? HTML my-app
  23. 23. Custom Elements
  24. 24. React
  25. 25. Vue
  26. 26. Vue …?
  27. 27. Custom Elements vue-custom-element @angular/elements
  28. 28. Custom Elements vue-custom-element @angular/elements
  29. 29. • •
  30. 30. <my-app></my-app> <my-app></my-app> <x-price /> <x-cart /> <x-promote />
  31. 31. <my-app></my-app> <my-app></my-app> <x-price /> <x-cart /> <x-promote /> App
  32. 32. <my-app></my-app> <my-app></my-app> <x-price /> <x-cart /> <x-promote /> App /
  33. 33. <my-app></my-app> <my-app></my-app> <x-price />
  34. 34. Web Components
  35. 35. • • • •
  36. 36. • •
  37. 37. • https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks • https://github.com/webcomponents/webcomponentsjs
  38. 38. innerHTML
  39. 39. Custom Elements innerHTML
  40. 40. HTML Templates
  41. 41. HTML Templates
  42. 42. Custom Elements
  43. 43. Custom Elements (template).content.cloneNode()
  44. 44. HTML Templates /
  45. 45. addEventListener
  46. 46. querySelector
  47. 47. innerText
  48. 48. • DOM API • DOM API •
  49. 49. • DOM API • DOM API • HTML Template Instantiation Appendix
  50. 50. • DOM API • DOM API • HTML Imports HTML Modules Appendix
  51. 51. ES Modules
  52. 52. lit-html
  53. 53. lit-html = Template literals
  54. 54. lit-html
  55. 55. lit-html
  56. 56. lit-html
  57. 57. IDE Microsoft/typescript-lit-html-plugin
  58. 58. React
  59. 59. React Web Components
  60. 60. REST API
  61. 61. Shadow DOM
  62. 62. Shadow DOM
  63. 63. PostCSS
  64. 64. PostCSS rollup-plugin-transform-postcss
  65. 65. Appendix
  66. 66. https://ooapp.co/project/LmsLz2a0pAUIHSZBmq3SH2XH
  67. 67. https://ooapp.co/project/LmsLz2a0pAUIHSZBmq3SH2XH TypeScript
  68. 68. connected
  69. 69. connected
  70. 70. connectedCallback connected ( )
  71. 71. disconnectedCallback connected
  72. 72. ( ) Private
  73. 73. Protected
  74. 74. render()
  75. 75. attributeChangedCallback connected
  76. 76. attributeChangedCallback connected attributeChangedCallback
  77. 77. connected
  78. 78. connected connected
  79. 79. • ES Class … •
  80. 80. customElements.define 1
  81. 81. Set
  82. 82. Set
  83. 83. • • • Firebase Realtime Database http://developer.kaizenplatform.com/entry/tatsuroro/2018-04-19 •
  84. 84. • • • React • HTML Imports PolymerElements/app-route
  85. 85. • • • React • HTML Imports PolymerElements/app-route …
  86. 86. Web Components • • Polyfill • ES Modules • module • HTML Modules • Web Components • Web Components • Custom Elements • lit-html • • Web Components,
  87. 87. Thank you ooapp.co/aggre

×