Chrome 63 以降では、シャドウ ピアス セレクタの ::shadow
と /deep/
を使用して、シャドウルート内のコンテンツのスタイルを設定することはできません。
/deep/
コンビネータは、子孫セレクタとして機能します。x-foo /deep/ div
はx-foo div
のように機能します。::shadow
疑似要素はどの要素にも一致しません。
削除の決定
::shadow
と /deep/
は Chrome バージョン 45 でサポートが終了しました。これは、2015 年 4 月の Web Components イベントの参加者全員による決定です。
シャドーピアス セレクタの主な懸念は、カプセル化に違反し、コンポーネントがその内部実装を変更できなくなる状況が発生することです。
シャドウ ピアス セレクタの代わりとして、CSS Shadow Parts の仕様が拡張されています。シャドウパートを使用すると、コンポーネント作成者はカプセル化を維持しつつ、複数のプロパティのスタイルを一度にスタイル設定できるように名前付き要素を公開できます。
::shadow と /deep/? をサイトで使用している場合の対処方法
::shadow
セレクタと /deep/
セレクタは、従来の Shadow DOM v0 コンポーネントにのみ影響します。Shadow DOM v1 を使用している場合は、サイト上の何も変更する必要はありません。
Chrome Canary を使用すると、こうした新しい変更によってサイトが正常に動作しないことを確認できます。問題が発生した場合は、::shadow
と /deep/
の使用をすべて削除してみてください。これらのセレクタの使用を削除することが難しい場合は、ネイティブ Shadow DOM から Shady DOM ポリフィルに切り替えることを検討してください。サイトがネイティブ Shadow DOM v0 に依存している場合にのみ、この変更を行う必要があります。