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

Web Components のリアル/ Realistic Web Components

Avatar for aggre aggre
November 25, 2018
Technology
12
8.2k

Web Components のリアル/ Realistic Web Components

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

Avatar for aggre

aggre

November 25, 2018
Tweet

More Decks by aggre

See All by aggre
The money for the openable and shareable era
Avatar for aggre aggre
0
490
エンジニアは会社に何を求めるか? / What does engineers wants the company?
Avatar for aggre aggre
0
140
The importance of open assets
Avatar for aggre aggre
0
75
Fully AMP pros and cons
Avatar for aggre aggre
0
190
OSS の持続的開発をトークンエコノミーで支援する / Dev Token @OSS Universe
Avatar for aggre aggre
1
380
OSS の持続的開発をトークンエコノミーで支援する / Dev Token @CryptoBowl
Avatar for aggre aggre
1
440
Mastering lit-html directive
Avatar for aggre aggre
0
450
非中央集権ウェブ / Decentralized Web
Avatar for aggre aggre
3
600
OSS の持続的開発をトークンエコノミーで支援する / Dev Token
Avatar for aggre aggre
0
520

Other Decks in Technology

See All in Technology
生成AIを安心して活用するために──「情報セキュリティガイドライン」策定とポイント
Avatar for gree_tech gree_tech
PRO
0
170
「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について
Avatar for gree_tech gree_tech
PRO
0
240
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
Avatar for 弁護士ドットコム bengo4com
3
120
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
Avatar for gree_tech gree_tech
PRO
0
140
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
Avatar for Yuma Ichikawa yumaichikawa
1
170
Zephyr(RTOS)にEdge AIを組み込んでみた話
Avatar for misoji engineer iotengineer22
1
250
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
Avatar for hhiroshell hhiroshell
0
120
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
Avatar for Yuji Oshima yuj1osm
1
120
データ戦略部門 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.8k
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
Avatar for Ryusei Ohkura 3l4l5
1
110
フレームワークを意識させないワークショップづくり
Avatar for Keigo Suda keigosuda
0
240
AIとともに歩んでいくデザイナーの役割の変化
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
800

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
Navigating Team Friction
Avatar for Lara Hogan lara
190
15k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
115
20k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
79
6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k

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