Chromeに実装されたCSSの疑似クラス「:has()」がjQueryに元からある「:has()」に影響を及ぼしWEBサイトが壊れる

Masataka Yakura @myakura

Chrome 105で`:has()`が入ったらjQueryが壊れたという話が出てきてうわーってなっている。 github.com/w3c/csswg-draf…

Masataka Yakura @myakura

jQueryは昔から`:has()`とか`:contains`みたいな拡張セレクタを持っている。`$()`とかで渡されるセレクタの処理はまず`querySelectorAll()`で処理して、処理できないものをjQuery側で受けるような仕組みだった。

Masataka Yakura @myakura

ただネイティブの`:has()`が入ったことで状況が変わる。名前がかぶるのもあるし、`:has()`の引数はforgiving selector listという、invalidなセレクタがあっても全部が落ちないように処理するようになっている。結果拡張セレクタがjQueryに渡されなくなってしまうことに。

Masataka Yakura @myakura

で、WebKitでも`:has()`の実装が入っているが、いいのか悪いのかセレクタの処理が違っていたため壊れていないらしい。ChromeもこのWebKitの挙動を導入して回避しようとしているが、それで全部解決するか……？

Masataka Yakura @myakura

あー、「壊れた」だけだと言葉不足かな。jQueryを使ったコードすべてに影響はしなくて、`ul:has(li:contains('Item'))`みたいにjQueryの拡張セレクタを`:has()`内で使っていたら問題になる。

Masataka Yakura @myakura

ChromeもWebKitの挙動をワークアラウンドとして実装。中に書かれたセレクタがすべて通らなかったな場合にinvalidになる。 Canaryではもう入っていて、Stableもrespinがかかったのでそれの展開待ち。105リリース直後でそのビルドさえ100％展開されてないはずだけど、この場合どうなるんだろうな。

Masataka Yakura @myakura

このワークアラウンドも一部のケースにしか対応できないので、ほんと一時しのぎといった感じ。仕様での解決をしないといけないけど、どうするんだろうな……

市井（メディア代表） @ichii731

勝手な持論だが、流石に今からjQueryを使うのは"辞めたがいい"域かもしれぬ。昔からオワコンとか言われてて可哀想だが看過できなさそう。 JSの拡張セレクタ:has()の件にしろ、jQueryの導入は中長期的にサイトを破壊する可能性もあるという、、、 publickey1.jp/blog/22/conten…

あこ｜コーダー @akanekoiii

jQuery問題。安定稼働してるシステムで既に使われてる場合、改修や横展開だと工数ないのでそのまま使う。自分の場合このケースが多い。 新規サイトはWPならVanillaで書く。jQueryはWP組み込んだ時に干渉して動かないことあったので。。 生js書ける前提で選択肢としてjQuery使うならOKだと思うけどな🤔

貝島 聡 | Webマーケティングをもっと身近に @kj_derukui

今のいままで、jQueryを全てVannila.JS(素のJavaScript)に書き換えてて、とうとう全て書き終わりました。ちゃんと動くと脳汁が止まりません。 さようなら、すべてのjQuery #JavaScript #プログミング #シン・ジャバスクリプト

なた @7t45a

さようならjquery

貝島 聡 | Webマーケティングをもっと身近に @kj_derukui

jQueryが読めることで、今後修正とかがあったときにどうすればいいか対応することが出来ます。 使われないかもしれないからやらなくていいやではなく、結局なにがしたいのかは理解する必要があります。