Web Components のリアル/ Realistic Web Components

HTML5 Conference 2018 ( https://events.html5j.org/conference/2018/11/ )での資料です

Transcript

1. Web Components HTML5 Conference 2018 @2018-11-25
2. aggre @aggre_ @aggre FRAME00, INC. CTO aggre.io
3. • Web Components (5min) • Web Components (5min) • Web Components (10min) • Web Components (20min)
4. Web Components
5. Custom Elements Shadow DOM HTML Templates ES Modules
6. Custom Elements Shadow DOM HTML Templates ES Modules / Production-ready
7. Custom Elements Shadow DOM HTML Templates ES Modules Edge Developing ‼
8. IE
9. IE • Windows 10 Edge • Windows 7 2020 1 • Windows 8.1 ? Edge … App
11. Polyfills IE, Edge
12. Polyfills IE, Edge Shadow DOM
13. • / Polyfills OK • Edge , IE 2020 Polyfills
14. Web Components
15. • Custom Elements • Shadow DOM • HTML Templates • HTML Imports
16. • Custom Elements • Shadow DOM • ES Modules
17. • Custom Elements • Shadow DOM • HTML Templates • HTML Imports • Custom Elements • Shadow DOM • ES Modules
19. HTML
20. HTML
21. Custom Elements
22. Custom Elements
24. Custom Elements Shadow DOM ES Modules
25. Custom Elements Shadow DOM ES Modules Custom Elements Shadow DOM DOM
26. Custom Elements
29. DOM createElement()
30. DOM createElement()
34. destroy
35. observedAttributes DOM
36. observedAttributes DOM
37. iframe adoptNode() ownerDocument
38. iframe adoptNode() ownerDocument
39. Shadow DOM
40. DOM
41. CSS
42. Shadow DOM
44. Shadow DOM
45. <slot>
46. <slot> Shadow DOM slot slot
48. slot
50. Shadow DOM slot
51. • Custom Elements • • Shadow DOM DOM • slot Shadow DOM
52. Web Components
53. • • • • SSR • more…
54. Web Components
56. size=large
57. Web Components
58. e.g. <iron-autogrow-textarea>
59. e.g. <pinch-zoom>
60. Web Components xxx-dnd … <drag-and-drop>
62. Web Components
63. e.g. React
64. e.g. React Shadow DOM React render
65. • Web Components • React, Angular, Vue… • • • :
66. SSR Shadow DOM slot Hydrate SSR
67. HTML
68. shadowRoot <slot> render shadowRoot
69. shadowRoot <slot> render shadowRoot slot
70. shadowRoot <slot> render shadowRoot Hydrate
71. shadowRoot <slot> render shadowRoot SSR
72. • Custom Elements • Shadow DOM, slot • •
73. Web Components
74. …
76. Web Components
77. • • lit-html • Web Components • lit-html Web Components • lit-element • Angular/Vue
78. • lit-html • lit-html Web Components • lit-element • Angular/Vue
79. • lit-html • lit-html Web Components • lit-element • Angular/Vue Web Components
80. • lit-html • lit-html Web Components • lit-element • Angular/Vue FW FW Web Components
81. • lit-html • lit-html Web Components • lit-element • Angular/Vue
82. ( )
84. • • innerHTML addEventListener DOM API •
85. lit-html ( lit-html )
87. lit-html
88. lit-html
89. lit-html html, render directive 3 API
90. lit-html Tagged Templates
91. lit-html HTML
92. lit-html HTML DOM DOM
93. lit-html DOM
94. lit-html textContent <p>
95. @Event
96. ?attribute
97. .property DOM
98. Intellisense for lit-html typescript-lit-html-plugin, vscode-lit-html
99. lit-html • lit-html • Intellisense • Web Components • … • lit-html • lit-element
100. lit-element
103. lit-html React.Component
104. lit-element • TypeScript Native • lit-html • Web Components • @property({type: X}) • • lit-html .property
105. lit-html
108. lit-html
110. <header>
111. <nav>
112. <article>
113. <footer>
114. JSX lit-html
115. RxJS
116. fit-html Redux + lit-html
117. Directive API
118. Directive API 1
119. Directive API 0 -1
120. Directive API directive
121. Directive API
122. Directive API render
123. lit-html • TypeScript Native • JSX • Directive API • • Vue/Angular HTML React
124. appendix
125. lit-html, hyperHTML, htm Tagged Templates
126. lit-html
127. hyperHTML
128. hyperHTML bind() DOM
129. hyperHTML wire()
130. htm
131. htm htm ( preact )
132. htm JSX
133. htm …
134. lit-html hyperHTML htm • (HTML Template Instantiation) • PolymerLabs/template-instantiation • Directive API • ES5 • Node.js • Tagged Templates JSX • preact vhtml developit/ WebReflection/ Polymer/
135. ( TypeScript Native lit-html )
136. • lit-element Web Components • FP lit-html ( )
137. • / Polyfills OK • Edge , IE 2020 Polyfills • Custom Elements • Shadow DOM DOM • slot Shadow DOM • • • lit-element Web Components • FP lit-html
138. Thank you! @aggre_ @aggre aggre.io