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
Shadow DOMとCSSの現状
Search
uhyo
February 27, 2024
Technology
11
6.7k
Shadow DOMとCSSの現状
2024-02-27 DOMDOMトークス #1
uhyo
February 27, 2024
Tweet
Share
More Decks by uhyo
See All by uhyo
React 19を概念から理解する
uhyo
19
8.3k
require(ESM)とECMAScript仕様
uhyo
5
1.5k
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
7
1.5k
TypeScriptってどんな言語? 言語そのものを知る面白さ
uhyo
16
8.6k
App Router時代のデータ取得アーキテクチャ
uhyo
48
15k
ステート管理を超えるRecoil運用の考え方
uhyo
15
12k
ついに来る!TypeScript5.0の新機能
uhyo
21
16k
TypeScript 4.7と型レベルプログラミング
uhyo
6
5.4k
TypeScriptを振り回せ!
uhyo
28
9.1k
Other Decks in Technology
See All in Technology
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
Featured
See All Featured
Design by the Numbers
sachag
277
18k
The World Runs on Bad Software
bkeepers
PRO
63
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Music & Morning Musume
bryan
43
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
We Have a Design System, Now What?
morganepeng
46
7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Designing for Performance
lara
604
67k
A designer walks into a library…
pauljervisheath
201
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Transcript
Shadow DOMとCSSの現状 2024-02-27 DOMDOMトークス #1
発表者紹介 uhyo 株式会社カオナビ フロントエンドエンジニア 普段はTypeScriptとかReactをやっている。 好きなDOM仕様はDOM3 Load & Save (昔のOperaにだけ実装されてたやつ)
最近のDOMDOMニュース 2024年2⽉、Firefox 123がリリース。 Declarative Shadow DOMのサポートが追加され、 すべてのモダンブラウザでサポートが完了。
Declarative Shadow DOM復習 従来はJavaScriptのElement#attachShadowを 使わなければshadow rootを⽣成できなかった。 template要素のshadowrootmode属性を使うこと で、HTMLだけでshadow rootを⽣成できる。
Declarative Shadow DOM復習
DOMDOMクイズ こうするとshadow root を⽣成できる? (JSでtemplate要素を⽣ 成してdivに追加)
DOMDOMクイズ 答え: できない 理由: Declarative Shadow Root はHTMLパーサーの機能だから (どういう意味か調べてみよう!) ※innerHTMLとかでパーサーを起動してもできない
(allowDeclarativeShadowRootsフラグで制御されているため)
Shadow DOMとCSS Shadow DOMの⽤途はいろいろあるが、個⼈的に はCSSのスコーピングを重要視。 •Shadow DOMの外で宣⾔されたスタイルは 中の要素に適⽤されない •逆も同様 (::partの話は今⽇は省略)
CSSのスコーピング Shadow Treeの中に適⽤ されるスタイルは同じ Shadow Treeの中で宣⾔する 必要がある。 利点: spanみたいな セレクタを雑に使える
(クラス名とかに頼る機会が減る)
@scopeとの⽐較 CSS Cascading and Inheritance Level 6で定義さ れた@scopeもスコーピングができる。 上限と下限を指定できる。
@scopeとの⽐較 (1) UIライブラリと組み合わせる場合、 @scopeだと下限の設定に難がある。 children内にはスタイルを適⽤ したくない場合はどうすれば…… (Reactの例)
@scopeとの⽐較 (1) Shadow DOMはこのようなケースが得意。 Shadow tree内のstyleで宣⾔ されたスタイルは<slot>に 当てはめられたツリーには 適⽤されない
@scopeとの⽐較 (2) 親から .parent-component > div > div > button
みたいなセレクタで攻撃された場合…… @scope: 防御できない Shadow DOM: 防御できる 「やろうと思えばできちゃう」を防げるのは優秀。
余談: 昔作ったやつ これからのCSS in JSはShadow DOM ベースに違いない!! と思い、 2020年に作ったCSS in
JSライブラリ (もちろん流⾏らず) https://github.com/uhyo/castella
余談:昔作ったやつ CSSはマークアップと密結合している という考えから、HTMLとCSSのセッ トで1つのコンポーネントを定義。 HTMLはShadow DOMに⼊る。 (これがあるべき姿では? とはずっと思っている)
問題: リセットCSS 最近はリセットCSSを使うことが多い。 Shadow DOMの中にリセットCSSを適⽤するため には、Shadow DOMの中から読み込む必要がある。
問題: リセットCSS これコンポーネントごと に読み込んで⼤丈夫なの?
実際にやってみた 複数のshadow treeの中から <link rel=“stylesheet” href=“reset.css”> でCSSファイルを読み込む場合と読み込まない 場合で、ページのメモリ使⽤量の差を計測。 ブラウザ: Firefox
123.0, Google Chrome 121.0.6167.185 ソースコード: https://github.com/uhyo/domdom-talks-1
実際にやってみた 0 50 100 150 200 250 10000 20000 30000
40000 50000 メモリ増加量 (MB) コンポーネント数 <link> (Firefox) <link> (Chrome) +33% +74〜132%
実際にやってみた 0 50 100 150 200 250 10000 20000 30000
40000 50000 メモリ増加量 (MB) コンポーネント数 <link> (Firefox) <link> (Chrome) <link>の量に対して線型にメモリ使⽤量 が増加、割合としては⼀定に +33% +74〜132%
グラフの注意点 Google Chromeのメモリ使⽤量は計測しても全然安定 しなかったので参考記録です。 Firefoxの+33%という数字はlink要素の追加以外にも CSS量の増加による影響をすべて含んだものです。
オーバーヘッドが⼤きい…… 同じリセットCSSを全部のコンポーネントに適⽤ したいだけなのに、コンポーネントの数が増える ほどメモリ使⽤量も増えるのは嬉しくない。 (コンポーネント数に⽐例するオーバーヘッドはある程度は 避けられないが) ※ reset.cssにリクエストが⾶ぶのはさすがに1回
救世主!? adoptedStyleSheets adoptedStyleSheetsを使うことで、複数の shadow tree間で同じCSSStyleSheet インスタンスを共有することができる。
adoptedStyleSheetsのメモリ使⽤量 0 50 100 150 200 250 10000 20000 30000
40000 50000 メモリ増加量 (MB) コンポーネント数 <link> (Firefox) <link> (Chrome) adoptedStyleSheets (Firefox) adoptedStyleSheets (Chrome) +38%
0 50 100 150 200 250 10000 20000 30000 40000
50000 メモリ増加量 (MB) コンポーネント数 adoptedStyleSheetsのメモリ使⽤量 Firefoxは逆にちょっと増えてる…… Chromeはよくわからんけど減ってはいる。 +38%
adoptedStyleSheets所感 よく分かんないけどChromeではメモリ使⽤量 減ってそう。 何でFirefoxのオーバーヘッド増えたの? Safariは謎(この資料をWindowsで作ったので) Declarative Shadow DOMでは対応していない のは⾟い。
次の希望: Declarative CSS Module Scripts adoptedStyleSheetsに相当する処理を JavaScriptを使わずに書けるようにしたいという 議論も存在する。 2023年4⽉のミーティングの結論は “Present
members of WCCG reach consensus: discuss this further with implementers.” https://github.com/WICG/webcomponents/issues/939
次の希望2: Declarative Custom Elements 似たような問題意識に対して、 “I think we should solve
declarative custom elements instead.” との⾒解を⽰すメンバーもいる。 その名の通り、customElements.register相当 のことをマークアップからできるようにする。 https://github.com/whatwg/html/issues/9962
WebComponents元年 Declarative Shadow DOMの サポートも出揃い、2023年からの WebComponents元年v4も佳境と なった。 しかし、Shadow DOMとCSS関連 が良い形におさまるにはまだ時間が
かかりそうだ。 https://www.docswell.com/s/jxck/5246NN- 1st-year-of-webcomponents-v4 参考: When the 1st year of Web Components era come true https://www.docswell.com/s/araya/ZQ8P9E-2024-01-25-202509
まとめ Declarative Shadow DOMのサポートにより、 Shadow DOMベースのCSS in JSもSSRできる ようになった。 しかし、最終形態ではなく次の議論もこれから。
WebComponents 元年v5 まだかな?