Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Components のリアル/ Realistic Web Components
Search
aggre
November 25, 2018
Technology
12
8.2k
Web Components のリアル/ Realistic Web Components
HTML5 Conference 2018 (
https://events.html5j.org/conference/2018/11/
)での資料です
aggre
November 25, 2018
Tweet
Share
More Decks by aggre
See All by aggre
The money for the openable and shareable era
aggre
0
490
エンジニアは会社に何を求めるか? / What does engineers wants the company?
aggre
0
140
The importance ofopen assets
aggre
0
75
Fully AMP pros and cons
aggre
0
190
OSS の持続的開発をトークンエコノミーで支援する / Dev Token @OSS Universe
aggre
1
380
OSS の持続的開発をトークンエコノミーで支援する / Dev Token @CryptoBowl
aggre
1
440
Mastering lit-html directive
aggre
0
450
非中央集権ウェブ / Decentralized Web
aggre
3
600
OSS の持続的開発をトークンエコノミーで支援する / Dev Token
aggre
0
520
Other Decks in Technology
See All in Technology
生成AIを安心して活用するために──「情報セキュリティガイドライン」策定とポイント
gree_tech
PRO
0
170
「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について
gree_tech
PRO
0
240
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
120
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
gree_tech
PRO
0
140
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
1
170
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
1
250
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
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
yuj1osm
1
120
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
1
110
フレームワークを意識させないワークショップづくり
keigosuda
0
240
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
800
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Navigating Team Friction
lara
190
15k
How to Ace a Technical Interview
jacobian
280
24k
Gamification - CAS2011
davidbonilla
81
5.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Documentation Writing (for coders)
carmenintech
75
5.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Adaptive Systems
keathley
44
2.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Transcript
Web Components HTML5 Conference 2018 @2018-11-25
aggre @aggre_ @aggre FRAME00, INC. CTO aggre.io
• Web Components (5min) • Web Components (5min) • Web
Components (10min) • Web Components (20min)
Web Components
Custom Elements Shadow DOM HTML Templates ES Modules
Custom Elements Shadow DOM HTML Templates ES Modules / Production-ready
Custom Elements Shadow DOM HTML Templates ES Modules Edge Developing
‼
IE
IE • Windows 10 Edge • Windows 7 2020 1
• Windows 8.1 ? Edge … App
None
Polyfills IE, Edge
Polyfills IE, Edge Shadow DOM
• / Polyfills OK • Edge , IE 2020 Polyfills
Web Components
• Custom Elements • Shadow DOM • HTML Templates •
HTML Imports
• Custom Elements • Shadow DOM • ES Modules
• Custom Elements • Shadow DOM • HTML Templates •
HTML Imports • Custom Elements • Shadow DOM • ES Modules
None
HTML
HTML
Custom Elements
Custom Elements
None
Custom Elements Shadow DOM ES Modules
Custom Elements Shadow DOM ES Modules Custom Elements Shadow DOM
DOM
Custom Elements
None
None
DOM createElement()
DOM createElement()
None
None
None
destroy
observedAttributes DOM
observedAttributes DOM
iframe adoptNode() ownerDocument
iframe adoptNode() ownerDocument
Shadow DOM
DOM
CSS
Shadow DOM
None
Shadow DOM
<slot>
<slot> Shadow DOM slot slot
None
slot
None
Shadow DOM slot
• Custom Elements • • Shadow DOM DOM • slot
Shadow DOM
Web Components
• • • • SSR • more…
Web Components
None
size=large
Web Components
e.g. <iron-autogrow-textarea>
e.g. <pinch-zoom>
Web Components xxx-dnd … <drag-and-drop>
None
Web Components
e.g. React
e.g. React Shadow DOM React render
• Web Components • React, Angular, Vue… • • •
:
SSR Shadow DOM slot Hydrate SSR
HTML
shadowRoot <slot> render shadowRoot
shadowRoot <slot> render shadowRoot slot
shadowRoot <slot> render shadowRoot Hydrate
shadowRoot <slot> render shadowRoot SSR
• Custom Elements • Shadow DOM, slot • •
Web Components
…
None
Web Components
• • lit-html • Web Components • lit-html Web Components
• lit-element • Angular/Vue
• lit-html • lit-html Web Components • lit-element • Angular/Vue
• lit-html • lit-html Web Components • lit-element • Angular/Vue
Web Components
• lit-html • lit-html Web Components • lit-element • Angular/Vue
FW FW Web Components
• lit-html • lit-html Web Components • lit-element • Angular/Vue
( )
None
• • innerHTML addEventListener DOM API •
lit-html ( lit-html )
None
lit-html
lit-html
lit-html html, render directive 3 API
lit-html Tagged Templates
lit-html HTML
lit-html HTML DOM DOM
lit-html DOM
lit-html textContent <p>
@Event
?attribute
.property DOM
Intellisense for lit-html typescript-lit-html-plugin, vscode-lit-html
lit-html • lit-html • Intellisense • Web Components • …
• lit-html • lit-element
lit-element
None
None
lit-html React.Component
lit-element • TypeScript Native • lit-html • Web Components •
@property({type: X}) • • lit-html .property
lit-html
None
None
lit-html
None
<header>
<nav>
<article>
<footer>
JSX lit-html
RxJS
fit-html Redux + lit-html
Directive API
Directive API 1
Directive API 0 -1
Directive API directive
Directive API
Directive API render
lit-html • TypeScript Native • JSX • Directive API •
• Vue/Angular HTML React
appendix
lit-html, hyperHTML, htm Tagged Templates
lit-html
hyperHTML
hyperHTML bind() DOM
hyperHTML wire()
htm
htm htm ( preact )
htm JSX
htm …
lit-html hyperHTML htm • (HTML Template Instantiation) • PolymerLabs/template-instantiation •
Directive API • ES5 • Node.js • Tagged Templates JSX • preact vhtml developit/ WebReflection/ Polymer/
( TypeScript Native lit-html )
• lit-element Web Components • FP lit-html ( )
• / Polyfills OK • Edge , IE 2020 Polyfills
• Custom Elements • Shadow DOM DOM • slot Shadow DOM • • • lit-element Web Components • FP lit-html
Thank you! @aggre_ @aggre aggre.io