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
700
tc39_study_2
jxck
1
11k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.2k
Periodic Background Sync
jxck
0
580
Podcast over PWA
jxck
0
270
Yearly Web 2019
jxck
0
190
webbundle_study
jxck
2
640
Other Decks in Technology
See All in Technology
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
220
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
590
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
4
1.4k
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
250
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
1
130
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
180
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
0
260
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
150
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
370
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Balancing Empowerment & Direction
lara
1
390
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Adopting Sorbet at Scale
ufuk
77
9.4k
Site-Speed That Sticks
csswizardry
10
670
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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
" >
元年は続く