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
7.7k
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
420
エンジニアは会社に何を求めるか? / What does engineers wants the company?
aggre
0
110
The importance ofopen assets
aggre
0
52
Fully AMP pros and cons
aggre
0
170
OSS の持続的開発をトークンエコノミーで支援する / Dev Token @OSS Universe
aggre
1
340
OSS の持続的開発をトークンエコノミーで支援する / Dev Token @CryptoBowl
aggre
1
390
Mastering lit-html directive
aggre
0
430
非中央集権ウェブ / Decentralized Web
aggre
3
540
OSS の持続的開発をトークンエコノミーで支援する / Dev Token
aggre
0
490
Other Decks in Technology
See All in Technology
学術機関におけるID連携とOpenID Connect
fujie
0
230
サプライチェーン攻撃に備える
ryunen344
0
280
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
210
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
390
内製化を目指す事業会社が、システム開発会社と共に進める「開発生産性改善」の取り組み事例 #devsumi
yuwji
0
100
ナレッジグラフとLLMの相互利用
koujikozaki
0
420
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
220
Next.js のページ遷移を全力で止める
ypresto
6
3.2k
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介
marokanatani
1
930
開発者の定量・定性データを組み合わせて開発者体験を把握するための取り組み
ham0215
1
130
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
7.1k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Practical Orchestrator
shlominoach
185
10k
Visualization
eitanlees
142
15k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
The Invisible Side of Design
smashingmag
295
50k
Designing with Data
zakiwarfel
98
5k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Automating Front-end Workflow
addyosmani
1365
200k
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