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
680
tc39_study_2
jxck
1
9.2k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.1k
Periodic Background Sync
jxck
0
560
Podcast over PWA
jxck
0
260
Yearly Web 2019
jxck
0
180
webbundle_study
jxck
2
620
Other Decks in Technology
See All in Technology
CloudWatch 大好きなSAが語る CloudWatch キホンのキ
o11yfes2023
0
180
Cross Data Platforms Meetup LT 20250422
tarotaro0129
1
570
Mastraに入門してみた ~AWS CDKを添えて~
tsukuboshi
0
230
3月のAWSアップデートを5分間でざっくりと!
kubomasataka
0
120
[2025年4月版] Databricks Academy ラボ環境 利用開始手順 / Databricks Academy Labs Onboarding
databricksjapan
0
140
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
150
AWSの新機能検証をやる時こそ、Amazon Qでプロンプトエンジニアリングを駆使しよう
duelist2020jp
1
170
Classmethod AI Talks(CATs) #21 司会進行スライド(2025.04.17) / classmethod-ai-talks-aka-cats_moderator-slides_vol21_2025-04-17
shinyaa31
0
580
OSSコントリビュートをphp-srcメンテナの立場から語る / OSS Contribute
sakitakamachi
0
1.4k
Webアプリを Lambdaで動かすまでに考えること / How to implement monolithic Lambda Web Application
_kensh
7
1.3k
The Tale of Leo: Brave Lion and Curious Little Bug
canalun
1
120
Ops-JAWS_Organizations小ネタ3選.pdf
chunkof
2
170
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
99
5.5k
Unsuck your backbone
ammeep
670
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
Thoughts on Productivity
jonyablonski
69
4.6k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
KATA
mclloyd
29
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
660
Docker and Python
trallard
44
3.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
GraphQLとの向き合い方2022年版
quramy
46
14k
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
" >
元年は続く