Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components のリアル/ Realistic Web Components

06c292fa0b9557777d3cb4663ceec40a?s=47 aggre
November 25, 2018
Technology
12
6.6k

Web Components のリアル/ Realistic Web Components

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

06c292fa0b9557777d3cb4663ceec40a?s=128

aggre

November 25, 2018
Tweet

More Decks by aggre

See All by aggre
The money for the openable and shareable era
06c292fa0b9557777d3cb4663ceec40a?s=48 aggre
0
330
エンジニアは会社に何を求めるか? / What does engineers wants the company?
06c292fa0b9557777d3cb4663ceec40a?s=48 aggre
0
65
The importance of open assets
06c292fa0b9557777d3cb4663ceec40a?s=48 aggre
0
43
Fully AMP pros and cons
06c292fa0b9557777d3cb4663ceec40a?s=48 aggre
0
150
OSS の持続的開発をトークンエコノミーで支援する / Dev Token @OSS Universe
06c292fa0b9557777d3cb4663ceec40a?s=48 aggre
1
230
OSS の持続的開発をトークンエコノミーで支援する / Dev Token @CryptoBowl
06c292fa0b9557777d3cb4663ceec40a?s=48 aggre
1
310
Mastering lit-html directive
06c292fa0b9557777d3cb4663ceec40a?s=48 aggre
0
390
非中央集権ウェブ / Decentralized Web
06c292fa0b9557777d3cb4663ceec40a?s=48 aggre
3
370
OSS の持続的開発をトークンエコノミーで支援する / Dev Token
06c292fa0b9557777d3cb4663ceec40a?s=48 aggre
0
470

Other Decks in Technology

See All in Technology
Stripe Search APIを利用した、LINEとStripeの顧客情報連携/line-dc-202205
E77ca94266ffd3d69f8aee91f7468264?s=48 stripehideokamoto
0
120
New Features in C# 10/11
1c3658db58f755e44fc1a70255c08ff7?s=48 chack411
0
900
OSS ことはじめ
Eabad423977cfc6873b8f5df62b848a6?s=48 hsbt
3
500
新規ゲームのリリース(開発)前からのSRE活動
B276b9088550bc522536ab9d471aeebe?s=48 tmkoikee
1
130
How We Foster Reliability in Diversity
Ed424b1e857828ce69b0fdf4c3291d2e?s=48 nari_ex
PRO
9
2.5k
ソフトウェアテストで参考にしている67のモノ #scrumniigata / 67 things for software testing
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
PRO
1
260
OSINT/GEOINT ワークショップ 20220514 古橋資料
5314ec2302336bf68c95bdb5b1476227?s=48 furuhashilab
2
300
5分で完全理解するGoのiota
9c23bec5e8b0aa1d9458d40800987347?s=48 uji
3
2k
AWS CLI入門_20220513
1642254df0e7560327cda4ddc071397e?s=48 suzakiyoshito
0
3.7k
長年運用されてきたモノリシックアプリケーションをコンテナ化しようとするとどんな問題に遭遇するか？ / SRE NEXT 2022
3e77f9dbec6a87756d1dbdddab283aee?s=48 nulabinc
PRO
15
7.4k
Who owns the Service Level?
93c80c388fe9d8f9df7d030549a0ff0b?s=48 chaspy
5
890
Team building programs for Engineering Team at Torana, Inc
218473ff7abad0fcd72865da2b23bb5b?s=48 memory1994
PRO
0
100

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
6.4k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
120k
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
265
21k
The Illustrated Children's Guide to Kubernetes
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
14
34k
Embracing the Ebb and Flow
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
73
3.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
910
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
365
63k
Teambox: Starting and Learning
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
121
7.6k
Designing for humans not robots
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
241
23k
What's new in Ruby 2.0
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
336
30k

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