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
6k
RFC 9111: HTTP Caching
jxck
1
660
tc39_study_2
jxck
1
7.4k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1k
Periodic Background Sync
jxck
0
540
Podcast over PWA
jxck
0
240
Yearly Web 2019
jxck
0
170
webbundle_study
jxck
2
600
Other Decks in Technology
See All in Technology
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
450
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
170
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
5.3k
Building Products in the LLM Era
ymatsuwitter
10
5.8k
Windows の新しい管理者保護モード
murachiakira
0
130
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
1
780
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
400
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.5k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
クラウドサービス事業者におけるOSS
tagomoris
3
930
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
1.1k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Done Done
chrislema
182
16k
Music & Morning Musume
bryan
46
6.3k
The Invisible Side of Design
smashingmag
299
50k
Building Adaptive Systems
keathley
40
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
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
" >
元年は続く