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
lit-html と ShadyCSS - jmblog.jp
lit-html が v0.9.0 で ShadyCSS をサポートするようになったということなので、いろいろと調べてみた。 TL;DR 現時点では、Shadow DOM のスタイルカプセル化に対応するには ShadyCSS を使う必要がある。 lit-html 経由で ShadyCSS を使うと便利。 Shadow DOM の Polyfill 2018 年 2 月現在、各ブラウザの Shadow DOM v1 のサポート状況は次のようになっている。 Chrome と Opera は済み 🙆 Safari と iOS Safari は一部バグあり 🤔 Firefox と Edge はまだ 🙅 （参考：https://caniuse.com/#feat=shadowdomv1 ） したがって、幅広いブラウザに対応するには、 現段階では Web Components の Polyf
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
