Web Components のリアル/ Realistic Web Components

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
10. None

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
18. None

19. HTML

20. HTML

21. Custom Elements

22. Custom Elements

23. None

24. Custom Elements Shadow DOM ES Modules

25. Custom Elements Shadow DOM ES Modules Custom Elements Shadow DOM

    DOM

26. Custom Elements

27. None
28. None

29. DOM createElement()

30. DOM createElement()

31. None
32. None
33. None

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

43. None

44. Shadow DOM

45. <slot>

46. <slot> Shadow DOM slot slot

47. None

48. slot

49. None

50. Shadow DOM slot

51. • Custom Elements • • Shadow DOM DOM • slot

    Shadow DOM

52. Web Components

53. • • • • SSR • more…

54. Web Components

55. None

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>

61. None

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. …

75. None

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. ( )

83. None

84. • • innerHTML addEventListener DOM API •

85. lit-html ( lit-html )

86. None

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

101. None
102. None

103. lit-html React.Component

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

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

105. lit-html

106. None
107. None

108. lit-html

109. None

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