Web Components のリアル/ Realistic Web Components

Transcript

1. 1.

   Web Components HTML5 Conference 2018 @2018-11-25

2. 2.

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

3. 3.

   • Web Components (5min) • Web Components (5min) • Web

   Components (10min) • Web Components (20min)
4. 4.

   Web Components

5. 5.

   Custom Elements Shadow DOM HTML Templates ES Modules

6. 6.

   Custom Elements Shadow DOM HTML Templates ES Modules / Production-ready

7. 7.

   Custom Elements Shadow DOM HTML Templates ES Modules Edge Developing

   ‼
8. 8.

   IE

9. 9.

   IE • Windows 10 Edge • Windows 7 2020 1

   • Windows 8.1 ? Edge … App
10. 10.

    None
11. 11.

    Polyfills IE, Edge

12. 12.

    Polyfills IE, Edge Shadow DOM

13. 13.

    • / Polyfills OK • Edge , IE 2020 Polyfills

14. 14.

    Web Components

15. 15.

    • Custom Elements • Shadow DOM • HTML Templates •

    HTML Imports
16. 16.

    • Custom Elements • Shadow DOM • ES Modules

17. 17.

    • Custom Elements • Shadow DOM • HTML Templates •

    HTML Imports • Custom Elements • Shadow DOM • ES Modules
18. 18.

    None
19. 19.

    HTML

20. 20.

    HTML

21. 21.

    Custom Elements

22. 22.

    Custom Elements

23. 23.

    None
24. 24.

    Custom Elements Shadow DOM ES Modules

25. 25.

    Custom Elements Shadow DOM ES Modules Custom Elements Shadow DOM

    DOM
26. 26.

    Custom Elements

27. 27.

    None
28. 28.

    None
29. 29.

    DOM createElement()

30. 30.

    DOM createElement()

31. 31.

    None
32. 32.

    None
33. 33.

    None
34. 34.

    destroy

35. 35.

    observedAttributes DOM

36. 36.

    observedAttributes DOM

37. 37.

    iframe adoptNode() ownerDocument

38. 38.

    iframe adoptNode() ownerDocument

39. 39.

    Shadow DOM

40. 40.

    DOM

41. 41.

    CSS

42. 42.

    Shadow DOM

43. 43.

    None
44. 44.

    Shadow DOM

45. 45.

    <slot>

46. 46.

    <slot> Shadow DOM slot slot

47. 47.

    None
48. 48.

    slot

49. 49.

    None
50. 50.

    Shadow DOM slot

51. 51.

    • Custom Elements • • Shadow DOM DOM • slot

    Shadow DOM
52. 52.

    Web Components

53. 53.

    • • • • SSR • more…

54. 54.

    Web Components

55. 55.

    None
56. 56.

    size=large

57. 57.

    Web Components

58. 58.

    e.g. <iron-autogrow-textarea>

59. 59.

    e.g. <pinch-zoom>

60. 60.

    Web Components xxx-dnd … <drag-and-drop>

61. 61.

    None
62. 62.

    Web Components

63. 63.

    e.g. React

64. 64.

    e.g. React Shadow DOM React render

65. 65.

    • Web Components • React, Angular, Vue… • • •

    :
66. 66.

    SSR Shadow DOM slot Hydrate SSR

67. 67.

    HTML

68. 68.

    shadowRoot <slot> render shadowRoot

69. 69.

    shadowRoot <slot> render shadowRoot slot

70. 70.

    shadowRoot <slot> render shadowRoot Hydrate

71. 71.

    shadowRoot <slot> render shadowRoot SSR

72. 72.

    • Custom Elements • Shadow DOM, slot • •

73. 73.

    Web Components

74. 74.

    …

75. 75.

    None
76. 76.

    Web Components

77. 77.

    • • lit-html • Web Components • lit-html Web Components

    • lit-element • Angular/Vue
78. 78.

    • lit-html • lit-html Web Components • lit-element • Angular/Vue

79. 79.

    • lit-html • lit-html Web Components • lit-element • Angular/Vue

    Web Components
80. 80.

    • lit-html • lit-html Web Components • lit-element • Angular/Vue

    FW FW Web Components
81. 81.

    • lit-html • lit-html Web Components • lit-element • Angular/Vue

82. 82.

    ( )

83. 83.

    None
84. 84.

    • • innerHTML addEventListener DOM API •

85. 85.

    lit-html ( lit-html )

86. 86.

    None
87. 87.

    lit-html

88. 88.

    lit-html

89. 89.

    lit-html html, render directive 3 API

90. 90.

    lit-html Tagged Templates

91. 91.

    lit-html HTML

92. 92.

    lit-html HTML DOM DOM

93. 93.

    lit-html DOM

94. 94.

    lit-html textContent <p>

95. 95.

    @Event

96. 96.

    ?attribute

97. 97.

    .property DOM

98. 98.

    Intellisense for lit-html typescript-lit-html-plugin, vscode-lit-html

99. 99.

    lit-html • lit-html • Intellisense • Web Components • …

    • lit-html • lit-element
100. 100.

     lit-element

101. 101.

     None
102. 102.

     None
103. 103.

     lit-html React.Component

104. 104.

     lit-element • TypeScript Native • lit-html • Web Components •

     @property({type: X}) • • lit-html .property
105. 105.

     lit-html

106. 106.

     None
107. 107.

     None
108. 108.

     lit-html

109. 109.

     None
110. 110.

     <header>

111. 111.

     <nav>

112. 112.

     <article>

113. 113.

     <footer>

114. 114.

     JSX lit-html

115. 115.

     RxJS

116. 116.

     fit-html Redux + lit-html

117. 117.

     Directive API

118. 118.

     Directive API 1

119. 119.

     Directive API 0 -1

120. 120.

     Directive API directive

121. 121.

     Directive API

122. 122.

     Directive API render

123. 123.

     lit-html • TypeScript Native • JSX • Directive API •

     • Vue/Angular HTML React
124. 124.

     appendix

125. 125.

     lit-html, hyperHTML, htm Tagged Templates

126. 126.

     lit-html

127. 127.

     hyperHTML

128. 128.

     hyperHTML bind() DOM

129. 129.

     hyperHTML wire()

130. 130.

     htm

131. 131.

     htm htm ( preact )

132. 132.

     htm JSX

133. 133.

     htm …

134. 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. 135.

     ( TypeScript Native lit-html )

136. 136.

     • lit-element Web Components • FP lit-html ( )

137. 137.

     • / Polyfills OK • Edge , IE 2020 Polyfills

     • Custom Elements • Shadow DOM DOM • slot Shadow DOM • • • lit-element Web Components • FP lit-html
138. 138.

     Thank you! @aggre_ @aggre aggre.io