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 元年 v3 / Web Components first yea...
Search
Jxck
November 06, 2020
Technology
1
1k
Web Components 元年 v3 / Web Components first year v3
2020/11/05 #new_style_study
https://web-study.connpass.com/event/192863/
Jxck
November 06, 2020
Tweet
Share
More Decks by Jxck
See All by Jxck
IE Graduation (IE の功績を讃える)
jxck
22
16k
IE Graduation Certificate
jxck
6
6.1k
RFC 9111: HTTP Caching
jxck
1
680
tc39_study_2
jxck
1
8.7k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.1k
Periodic Background Sync
jxck
0
560
Podcast over PWA
jxck
0
260
Yearly Web 2019
jxck
0
180
webbundle_study
jxck
2
620
Other Decks in Technology
See All in Technology
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
160
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.3k
デザインシステムのレガシーコンポーネントを刷新した話/Design System Legacy Renewal
kaonavi
0
140
AIエージェント開発における「攻めの品質改善」と「守りの品質保証」 / 2024.04.09 GPU UNITE 新年会 2025
smiyawaki0820
0
250
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
8
750
PostgreSQL Unconference #52 pg_tde
nori_shinoda
1
250
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
3
1.8k
滑らかなユーザー体験も目指す注文管理のマイクロサービス化〜注文情報CSVダウンロード機能の事例〜
demaecan
0
130
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.3k
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
210
10分でわかるfreeeのQA
freee
1
11k
Medmain FACTBOOK
akinaootani
0
170
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Site-Speed That Sticks
csswizardry
4
470
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
Six Lessons from altMBA
skipperchong
27
3.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
17
1.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
630
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
WebComponents 元年 v3 #new_style_study
WebComponent 元年 v0 2012~13 • Custom Elements v0 • Shadow
DOM v0 • Template Element • HTML Imports v0 の API を見直し v1 へ Deprecate には Reverse Origin Trials をしながら削除中 仕様段階で否定されそのまま Deprecated
WebComponent 元年 v1 2016~19 • Custom Elements v1 • Shadow
DOM v1 • Template Instantiation • Synthetic Modules 実質ただの HTML Snippet なので Handlebars 系の記法を入れて本当に Template にしよう。 => 議論進まず Import 構文を使って HTML/CSS/JSON など様々 な Module を Import できるようにしよう。 => Security Risk が見つかる
WebComponent 元年 v2 2019-2020 • Custom Elements v1 • Shadow
DOM v1 ◦ Declarative Shadow DOM ◦ Imeperative Slot Element • Template Instantiation • Synthetic Modules
Declarative Shadow DOM HTML DOM <host-element> <template shadowroot="open"> <style></style> <h2>Shadow
Content</h2> <slot></slot> </template> <h2>Light content</h2> </host-element> <host-element> #shadow-root (open) <style></style> <h2>Shadow Content</h2> <slot> ↳ <h2> reveal </slot> <h2>Light content</h2> </host-element>
Template Instantiation <template type="with-for-each" id="list"> <ul> {{foreach items}} {{if exists}}
<li class={{class}}>{{label}}</li> {{/if}} {{/foreach}} </ul> </template>
WebComponent 元年 v3 (期待) 2021~? • Custom Elements v1 ◦
Scoped Custom Element Registration • Shadow DOM v1 ◦ Declarative Shadow DOM ◦ Imeperative Slot Element • Template Instantiation ◦ DOM Parts • Synthetic Modules ◦ Import Assertions 勝手にファミリー認定 • WebPackaging ◦ Subresource Webbundle
Import Assertions & Synthetic Modules import json from "./foo.json" assert
{ type: "json" }; import("foo.json", { assert: { type: "json" } });
DOM Parts // <a href=""></a> nodePart = new ChildNodePart($a) attributePart
= new AttributePart($a, 'href') nodePart.value = "Example" attributePart.value = "https://example.com" nodePart.commit(); attributePart.commit(); // <a href="https://example.com">Example</a>
Subresource WebBundle <link rel="webbundle" href="bundle.wbn" resources=" style.css script.js image.webp template.html
" >
元年は続く