😽

CSSの:has セレクタを使って:root要素のCSS変数をごにょる

2023/01/20に公開

何でそんな事がしたいのか

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