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
910
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
21
15k
IE Graduation Certificate
jxck
6
5.9k
RFC 9111: HTTP Caching
jxck
0
580
tc39_study_2
jxck
1
3.1k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
950
Periodic Background Sync
jxck
0
490
Podcast over PWA
jxck
0
220
Yearly Web 2019
jxck
0
140
webbundle_study
jxck
2
560
Other Decks in Technology
See All in Technology
開発者体験を意識した開発チームの生産性向上の取り組み
ham0215
3
650
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
1
160
Datadogの便利な使い方 - 意外と知らない?CoScreenとCloudcraft
taijihagino
PRO
1
600
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
39k
中規模・ミドルTier開発組織におけるDevRelの戦略と実行と成果 - DevRel Guild Conference Mini -
leveragestech
2
260
夏休みの(最後の)宿題 for JuliaTokyo #12
antimon2
0
130
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
4
640
脆弱星に導かれて
nishimunea
1
1.5k
Practical GenAI with Go - Elastic and Golang Sydney
adriancole
0
130
20240906_JAWS_Yamanashi_#1_leap_beyond_the_AWS_all_certifications
tsumita
1
100
[RSJ24] Object Retrieval in Large-Scale Indoor Environments Using Dense Text with a Multi-Modal Large Language Model
keio_smilab
PRO
0
220
Namespace, Now and Then
tagomoris
0
170
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
85
5.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
The Invisible Customer
myddelton
119
13k
Being A Developer After 40
akosma
82
580k
Designing with Data
zakiwarfel
98
5k
How To Stay Up To Date on Web Technology
chriscoyier
785
250k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
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
" >
元年は続く