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 year v3
Search
Jxck
November 06, 2020
Technology
1
890
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
560
tc39_study_2
jxck
1
2.4k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
930
Periodic Background Sync
jxck
0
480
Podcast over PWA
jxck
0
210
Yearly Web 2019
jxck
0
140
webbundle_study
jxck
2
530
Other Decks in Technology
See All in Technology
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
930
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
270
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8.2k
Featured
See All Featured
Leading Effective Engineering Teams 2024
addyosmani
3
300
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Building Your Own Lightsaber
phodgson
101
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Done Done
chrislema
179
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Writing Fast Ruby
sferik
623
60k
The Invisible Customer
myddelton
117
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
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
" >
元年は続く