現場の Web Components / Real world Web Components

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

SlideShare 👉 https://www.slideshare.net/hiroyukiaggre/web-components-94747767

Transcript

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