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
7.9k
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
8
1.8k
color-scheme: light dark; を完全に理解する
uhyo
8
550
React 19 + Jotaiを試して気づいた注意点
uhyo
9
3.1k
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
3
3k
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
8
3.7k
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
4.3k
tsconfig.jsonの設定を見直そう!フロントエンド向け 2024夏
uhyo
26
11k
React 19を概念から理解する
uhyo
22
11k
require(ESM)とECMAScript仕様
uhyo
7
2.4k
Other Decks in Technology
See All in Technology
お問い合わせ対応の改善取り組みとその進め方
masartz
1
590
20250328_RubyKaigiで出会い鯛_____RubyKaigiから始まったはじめてのOSSコントリビュート.pdf
mterada1228
0
420
小さく始めるDevOps 内製化支援から見えたDevOpsの始め方 / 20250317 Ken Takayanagi
shift_evolve
1
120
コドモンのQAの今までとこれから -XPによる成長と見えてきた課題-
masasuna
0
140
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
320
Amazon Q Developer 他⽣成AIと⽐較してみた
takano0131
1
140
「家族アルバム みてね」を支えるS3ライフサイクル戦略
fanglang
4
600
生成AI時代のセキュアCI/CDとソース管理
yuriemori
0
100
チームビルディング「脅威モデリング」ワークショップ
koheiyoshikawa
0
180
入社後SREチームのミッションや課題の整理をした話
morix1500
1
220
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.3k
DevOps文化を育むQA 〜カルチャーバブルを生み出す戦略〜 / 20250317 Atsushi Funahashi
shift_evolve
1
120
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Navigating Team Friction
lara
184
15k
BBQ
matthewcrist
88
9.6k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
KATA
mclloyd
29
14k
A Tale of Four Properties
chriscoyier
158
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Site-Speed That Sticks
csswizardry
4
460
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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 まだかな?