HTML 全体の CSS を取得して Shadow DOM に適用する

以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty

[efcl]

`document.styleShets`からスタイルを集めて`replaceSync`でスタイルシートを作り、`shadowRoot.adoptedStyleSheets`でスタイルシートを当てる方法について。

[naari_3]

べんり

[sukkuuuuu]

う

[mayumayu_nimolove]

めんどくさい

[RATCHO]

CSSをインライン化すると早くなる、という漠然とした迷信

[yarumato]

“ShadowDOMの中にlinkタグを書く方法だと最適化がしにくい。CSSはインライン化したほうが高速。replaceSync()とadoptedStyleSheets()を使うと毎回styleタグを書き出すより効率的に処理できる”

[shimatokuo]

いかん、僕では利点が理解できない