Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shadow DOMとCSSの現状

uhyo
February 27, 2024

Shadow DOMとCSSの現状

2024-02-27 DOMDOMトークス #1

uhyo

February 27, 2024
Tweet

More Decks by uhyo

Other Decks in Technology

Transcript

  1. @scopeとの⽐較 (2) 親から .parent-component > div > div > button

    みたいなセレクタで攻撃された場合…… @scope: 防御できない Shadow DOM: 防御できる 「やろうと思えばできちゃう」を防げるのは優秀。
  2. 実際にやってみた 0 50 100 150 200 250 10000 20000 30000

    40000 50000 メモリ増加量 (MB) コンポーネント数 <link> (Firefox) <link> (Chrome) +33% +74〜132%
  3. 実際にやってみた 0 50 100 150 200 250 10000 20000 30000

    40000 50000 メモリ増加量 (MB) コンポーネント数 <link> (Firefox) <link> (Chrome) <link>の量に対して線型にメモリ使⽤量 が増加、割合としては⼀定に +33% +74〜132%
  4. adoptedStyleSheetsのメモリ使⽤量 0 50 100 150 200 250 10000 20000 30000

    40000 50000 メモリ増加量 (MB) コンポーネント数 <link> (Firefox) <link> (Chrome) adoptedStyleSheets (Firefox) adoptedStyleSheets (Chrome) +38%
  5. 0 50 100 150 200 250 10000 20000 30000 40000

    50000 メモリ増加量 (MB) コンポーネント数 adoptedStyleSheetsのメモリ使⽤量 Firefoxは逆にちょっと増えてる…… Chromeはよくわからんけど減ってはいる。 +38%
  6. 次の希望2: Declarative Custom Elements 似たような問題意識に対して、 “I think we should solve

    declarative custom elements instead.” との⾒解を⽰すメンバーもいる。 その名の通り、customElements.register相当 のことをマークアップからできるようにする。 https://github.com/whatwg/html/issues/9962
  7. 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