The document discusses web components with a focus on custom elements, shadow DOM, and HTML templates. It references various technologies and frameworks such as React, Vue, and Angular, emphasizing the integration of web components into modern web applications. Additionally, it includes links for further reading and resources, as well as technical details about DOM APIs and lifecycle callbacks.

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