PoC InnerText Selector

li[data-text*="Hoge"] のノリで li:inner-text*="Hoge" と書いてみたい。

代わりに JS で cssInnerText('li', '*=', 'Hoge', 'color: red') という風に書けるようにしてみた。

• Hoge を含む ul.example > li 要素を赤太字にする
• 当該文字列を含まない li 要素は青文字にする
• この行は文中に
  Hoge
  が出てくる
• ネストしたリストの中に
  1. ココは違うけど
  2. ココには対応する文字が出てくる Hoge
• ふにふに
• どうかな

• Foo から始まる項目はピンク色にする
• この項目は当該文字列を含まないので水色にする
• ココには文中に Foo が登場する・何もしない

課題

cssInnerText() を呼び出したタイミングで style.cssText にスタイルを書き込むようにしている。その仕組みのため、以下のような問題・制約がある。

• DOM 要素の動的な追加には自動対応しない。追加した DOM 要素にスタイルを当てたい場合は都度関数を呼び直す必要がある。
  • MutationObserver とか使ったら良いのかな？パフォーマンス問題が起きそう…
• style.cssText に追記するやり方のため、CSS の優先度が高め。カスケードの調整が微妙かも？
  • JS から呼び出す作りにしていることだし、素の CSS よりは優先されるモノと割り切っていいかな
• :hover、:focus などの擬似クラス、::before などの擬似要素を操作したい場合に対応できない
  • style.cssText を使ってスタイルを書き込むのではなく、属性セレクタをでっちあげるようなやり方じゃないと無理かな
  • 参考 : https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo
  • :has() の Polyfill で属性セレクタを使うやり方をしている

些細な課題

• console.log や console.warn を表示・非表示する設定を何かしたい。表示させたいときだけ引数で渡してもらうのが良いのかなぁ？

ちなみに、style.cssText は上書きされたプロパティがよしなに消えるので、呼び出しただけゴミが積み重なるような事態は起きない模様。