Rob Dodson
Chrome 63 以降では、シャドウ ピアシング セレクタ ::shadow と /deep/ を使用してシャドウルート内のコンテンツにスタイルを設定できなくなります。
/deep/コンビネーターは子孫セレクタとして機能します。x-foo /deep/ divはx-foo divのように機能します。::shadow疑似要素はどの要素とも一致しません。
削除の判断
::shadow と /deep/ は Chrome バージョン 45 で非推奨になりました。これは、2015 年 4 月のウェブ コンポーネント ミートアップの参加者全員によって決定されました。
シャドウ ピアシング セレクタに関する主な懸念事項は、カプセル化に違反し、コンポーネントが内部実装を変更できなくなる状況が生じることです。
CSS シャドウ パーツの仕様は、シャドウ ピアス セレクタの代替として開発されています。シャドー パーツを使用すると、コンポーネント作成者はカプセル化を維持しながら、名前付き要素を公開できます。また、ページ作成者は複数のプロパティを一度にスタイル設定できます。
サイトで ::shadow と /deep/ を使用している場合はどうすればよいですか？
::shadow セレクタと /deep/ セレクタは、以前の Shadow DOM v0 コンポーネントにのみ影響します。Shadow DOM v1 を使用している場合は、サイトを変更する必要はありません。
Chrome Canary を使用して、これらの変更によってサイトが破損していないことを確認できます。問題が発生した場合は、::shadow と /deep/ の使用を削除してみてください。これらのセレクタの使用を削除するのが難しい場合は、ネイティブ シャドー DOM からシャドウ DOM ポリフィルに切り替えることを検討してください。この変更が必要なのは、サイトがネイティブ Shadow DOM v0 に依存している場合のみです。