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
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.2k
RFC 9111: HTTP Caching
jxck
1
730
tc39_study_2
jxck
1
12k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.2k
Periodic Background Sync
jxck
0
600
Podcast over PWA
jxck
0
290
Yearly Web 2019
jxck
0
210
webbundle_study
jxck
2
660
Other Decks in Technology
See All in Technology
BI ツールはもういらない?Amazon RedShift & MCP Server で試みる新しいデータ分析アプローチ
cdataj
0
160
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
3
1.9k
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
170
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
3
240
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
210
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
200
Git in Team
kawaguti
PRO
3
370
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
270
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
290
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Rails Girls Zürich Keynote
gr2m
95
14k
Gamification - CAS2011
davidbonilla
81
5.5k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Building an army of robots
kneath
306
46k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Building Adaptive Systems
keathley
44
2.8k
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
" >
元年は続く