😽
CSSの:has セレクタを使って:root要素のCSS変数をごにょる
何でそんな事がしたいのか
DOMツリーの中に、「きっとシングルトンなドロワーメニュー」が表示されている時に、ドロワーとは関係ないツリーの中にいる要素のスタイルをいじりたいことがある。たとえば、↓のような時。
<html ...俺はこの世界を見守りたい。。。>
<!-- bodyとかは省略 -->
<div>
<div class="ドロワーメニュー">
俺はwidth280pxでviewportの左側に固定表示するぜ!
</div>
<div class="メインコンテンツ">
ドロワーメニュー君が表示されている時は、左マージン280px確保しないと、俺の左部分がユーザーに見えないなぁ。。。
</div>
</div>
</html>
こんな時、hasセレクタが利用できない時は、ドロワーメニュー君がアクティブ表示されている時に、
Vueであれば vueuse/head
なんかを使ってルート要素に任意のセレクタを付与して、そのセレクタに対してCSSを適用するってやってたけど、ライブラリなんかを作ってる時に、「このライブラリはvueuse/head
のピア依存があります」ってインストールをお願いするのがすごい嫌だった。
、と思ってた時に、hasセレクタ使えば、ツリーの深いとこからこの世界に副作用を与えれるんじゃない?って思って、しかもこういう風に「シングルトン前提」であれば、世界を汚すわけでもなかろうし、まずは実験してみよーって思ったら、できた。
↑は、「この世界(DOMツリー)のどこかにVAppLayout....が存在するならルート(html)要素のCSS変数hogeにredを適用する」ってパターン。
hasセレクタは、あったらいいなって思いながら、いざReadyになったら、思ったより必要なシーンに出会わなくて肩透かしだったけど、このパターンが使えるならいろいろ楽しく使えそうなんでわくわくしてきた。
ただ、hasセレクタがレンダリングエンジンのパフォーマンス的にどのくらいペナルティあるかが、ほんのり気になってはいる。
Discussion